Cómo secuenciar la secuencia de animación SVG?

tengo secuencia de animationTransform:Cómo secuenciar la secuencia de animación SVG?

<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 posible bucle de esta secuencia sin necesidad de utilizar la escritura?

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

Fuente

2010-09-02 serg

Ya lo pensé. Solución para aquellos que 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"/>

Fuente

2010-09-02 19:05:54 serg

Trabaja en (oold) Firefox 10, no funciona en (arriba-hasta la fecha) Chrome 32, solo si alguien se encuentra con el mismo problema. Y algunos enlaces útiles que describen todas las capacidades del tiempo de animación: [W3C SVG 1.1 Spec.] (Http://www.w3.org/TR/SVG/animate.html#TimingAttributes), [Developer.Mozilla.org] (https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin). – Jeyekomon

Puede confirmar que esto no funciona en Chrome 34. – hamishtaplin

Puede también acaba de bucle dentro de una sola animateTransform proporcionando un atributo values con un punto y coma lista separada por:

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

Here's an example (comprobado en Firefox 4.0 y Cromo).

Fuente

2010-12-22 11:43:46 robertc

Me encanta esta solución. ¿Podría recomendar dónde encontrar la documentación del atributo SVG animateTransform 'values'? Desafortunadamente, es una palabra bastante común para una búsqueda web común. ¡Gracias! – jtheletter

@janaspage Acabo de tropezar con la documentación para el atributo de valores aquí: http://www.w3.org/TR/smil-animation/#ValuesAttribute – chrisM

también es posible añadir/restar (mili) segundos:

begin="anim2.end-500ms"

Fuente

2011-11-01 10:25:20

Cómo secuenciar la secuencia de animación SVG?

Respuesta

Cuestiones relacionadas