animation - software - Cómo hacer un bucle de secuencia de animación SVG?

svg animation software

Question

Tengo una secuencia 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"/>

Si es posible repetir esta secuencia sin usar script?

Puedo configurar la animación individual en bucle utilizando repeatCount="indefinite" por Quiero bucle toda la secuencia en orden.

Answer 1

También puede simplemente hacer un bucle dentro de una sola forma animateTransform al proporcionar un atributo de values con una lista separada por punto y coma:

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

Aquí hay un ejemplo (marcado en Firefox 4.0 y Chrome).

Answer 2

Ya lo descubrí. Solución para quienes estén interesados:

<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"/>

Answer 3

también es posible sumar / restar (milli) segundos:

  begin="anim2.end-500ms"