бесконечная анимация с задержками в SMIL

Question

Добрый день уважаемые, подскажите пожалуйста, как в SMIL реализовать задержки в бесконечно повторяющейся анимации? Приведу пример

#work{
 border: 1px solid #000; 
}
#obgect{
  animation: moveObject 4s linear infinite;
}
@keyframes moveObject{
0%,100%{
    transform: translateX(0);
  }
50%{
    transform: translateX(100px);
  }
}

<svg  id="work" x="0px" y="0px"
 viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
  <circle id="obgect" r="10" cx="10px" cy="50%" fill="red"/>
  <animate  
    xlink:href="#obgect"
    attributeName="r" 
    dur="2s"
    begin="1s" 

      repeatCount="indefinite"

    values="10;20;10"
></animate>

</svg>

На первом проходе всё хорошо. - После первой секунды шарик увеличиваеться, на 3-й секунде он приобретает свой изначальный размер, а дальше идет полное рассогласование. Мне необходимо понять как сделать так что б шарик менял свои размеры только с 2 по 3сек в бесконечном цикле. (CSS анимацию не трогаем) Собственно и вопрос - как реализовать повторяющиеся задержки в анимации бесконечного цыкла ?

Шарик со 2 по 3 сек должен увеличиваться и уменьшаться или только увеличиваться? — Alexandr_TT, Feb 04 '17 at 18:37
увеличится и уменьшится. Анимациия должна происходить так 0%-25% - никаких изменений с размерами; 25%-50% -увеличение в размере; 50%-75% уменьшение в размере 75%-100% никаких изменений . — BlackStar1991, Feb 04 '17 at 19:51

Alexandr_TT · Accepted Answer · 2017-02-05T01:07:16.297

SMIL - это чистая декларативка. Нет переменных, функций и т.д Поэтому некуда запоминать текущее состояние в бесконечном цикле. Но вы хотели получить анимацию на чистом SMIL, поэтому я использовал возможность сделать цепочку последовательных анимаций и последняя анимация переходит к исполнению первой анимации begin="0s;an6.end", а в качестве пауз я поставил заглушки-анимации, которые ничего не делают, но участвуют в цепочке анимаций. Это строки с атрибутом - values="10;10"

<svg id="work" version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" 
     width="200" height="200" viewBox="0 0 200 200" >
<style>
 #work{
 border: 1px solid #000; 
}
#obgect{
  animation: moveObject 8s linear infinite;
}
@keyframes moveObject{
0%,100%{
    transform: translateX(0);
  }
50%{
    transform: translateX(180px);
  }
}
   </style> 
  <circle id="obgect" r="10" cx="10px" cy="50%" fill="red"/>
 <animate id="an1" 
    xlink:href="#obgect"   attributeName="r"   dur="1s"  begin="0s;an6.end"    values="10;10"> 
  </animate>
  <animate id="an2" 
  xlink:href="#obgect"   attributeName="r"   dur="2s"  begin="an1.end"    values="10;20;10"> 
   </animate> 
         <animate id="an3" 
           xlink:href="#obgect"   attributeName="r"   dur="1s"  begin="an2.end"   values="10;10"> 
         </animate>
        <animate id="an4" 
          xlink:href="#obgect"   attributeName="r"   dur="1s"  begin="an3.end"    values="10;10"> 
           </animate> 
      <animate id="an5" 
  xlink:href="#obgect"   attributeName="r"   dur="2s"  begin="an4.end"    values="10;20;10"> 
   </animate>
  <animate id="an6" 
  xlink:href="#obgect"   attributeName="r"   dur="1s"  begin="an5.end"    values="10;10"> 
  </animate>
</svg>

Ниже тайминг последовательных анимаций. Зелёный прямоугольник - это горизонтальное перемещение шарика туда и обратно, заданное в стилях CSS

Увеличил немного длину и время пробега шарика для наглядности.

an1, an3, an4, an6 - идентификаторы заглушек- анимаций, которые обеспечивают паузы между анимациями an2 и an5 увеличения и уменьшения размеров шарика.

Классно, спасибо. Я правда думал что можно как-то легче реализовать. Очень не люблю плодить пустой код(это я сейчас про заглушки) — BlackStar1991, Feb 05 '17 at 08:20
@BlackStar1991 А по другому никак не сделать, если просили на чистом SMIL в силу того, что написал выше про декларативку SMIL. — Alexandr_TT, Feb 05 '17 at 09:05
@BlackStar1991 Используя js было бы намного меньше строчек, а насчет реализации с помощью CSS было бы длиннее. Я выполнил ваши условия на все 100%. Отметьте, пожалуйста ответ, как решение. — Alexandr_TT, Feb 05 '17 at 09:08
Жаль что в SMIL так сложно реализовывать задержки. Пришлось перестроить анимацию http://codepen.io/BlackStar1991/pen/XpBQzm — BlackStar1991, Feb 07 '17 at 14:25

бесконечная анимация с задержками в SMIL

1 Answers1

Linked