Comment boucler une séquence d'animation SVG?

Je séquence de animationTransform:Comment boucler une séquence d'animation 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 possible de boucler cette séquence sans utiliser script?

Je peux définir une animation individuelle à boucle en utilisant repeatCount="indefinite" par Je veux boucler toute la séquence dans l'ordre.

Source

2010-09-02 serg

Nous l'avons déjà compris. Solution pour ceux qui sont intéressés:

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

Source

2010-09-02 19:05:54 serg

Travaux en (oold) Firefox 10, ne fonctionne pas dans (mise à jour) Chrome 32, si quelqu'un rencontre le même problème. Et quelques liens utiles décrivant toutes les possibilités du timing de l'animation: [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

Peut confirmer que cela ne fonctionne pas dans Chrome 34. – hamishtaplin

Vous pouvez aussi boucle dans un seul animateTransform en fournissant un attribut values une liste des points-virgules:

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

Here's an example (vérifié dans Firefox 4.0 et Chrome).

Source

2010-12-22 11:43:46 robertc

J'aime cette solution. Pourriez-vous indiquer où trouver la documentation de l'attribut SVG animateTransform 'values'? C'est malheureusement un mot plutôt commun pour une recherche web ordinaire. Merci! – jtheletter

@janaspage Je viens de trébucher sur la documentation de l'attribut values ici: http://www.w3.org/TR/smil-animation/#ValuesAttribute – chrisM

il est également possible d'ajouter/soustractions (milli) secondes:

begin="anim2.end-500ms"

Source

2011-11-01 10:25:20

Comment boucler une séquence d'animation SVG?

Répondre

Questions connexes