ti-enxame.com

Como fazer um loop na sequência de animação SVG?

Eu tenho uma sequência de animationTransform:

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

Se é possível repetir esta sequência sem usar o script?

Eu posso definir uma animação individual para repetir usando repeatCount="indefinite" by Quero fazer um loop em toda a sequência.

28
serg

Já percebi isso. Solução para quem está interessado:

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>
36
serg

Você também pode fazer um loop dentro de um único animateTransform fornecendo um atributo values com uma lista separada por ponto e vírgula:

<animateTransform attributeName="transform" type="rotate"
     values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
     repeatCount="indefinite" />

Aqui está um exemplo (marcado no Firefox 4.0 e Chrome).

30
robertc

também é possível adicionar/subtrair (mili) segundos:

  begin="anim2.end-500ms"
7
Ingmar de Lange