SVG : successions d'animations

Exemple1

Les animations s'enchaînent mais portent sur des objets différents.

Le code SVG correspondant(extraits)

<svg width = "50%" height="auto" viewBox ="0 0 400 400" style ="background : lime ;" > <rect x = "0" y = "0" width ="0" height="50" fill = 'orange'> <animate ... ="width" fill="freeze" from="0" to="200" begin="0s" dur="5s" id="a1" ... ="XML"/> </rect> <rect x="50" y="100" width="0" height="50" fill ='purple'> <animate ... ="width" fill="freeze" from="0" to="200" begin="a1.end" dur="5s" id="a2" ... ="XML"/> </rect> <rect x="100" y="200" width="0" height="50" fill ='yellow'> <animate ... ="width" fill="freeze" from="0" to="200" begin="a2.end" dur="5s" id ="a3" ... ="XML"/> </rect> <rect x="150" y="300" width="0" height="50" fill ='silver'> <animate ... ="width" fill="freeze" from="0" to="200" begin="a3.end" dur="5s" id ="a4" ... ="XML"/> </rect> </svg>

Commentaire du code

Il y a quatre animations. Chaque animation consiste à dessiner progressivement (sur 5 secondes) un rectangle de 150 pixels de large et de 50 pixels de haut. Chaque animation n'est répétée qu'une fois ! En effet l'attribut repeatCount est absent !
Les animations s'enchaînent. La deuxième démarre lorsque la première est terminée. La troisième s'enclenche dès que la deuxième est achevée et ainsi de suite.

Notez que dans chaque balise animate il est utilisé l'attribut id. Remarquez aussi la valeur de l'attribut begin à partir de la deuxième animation.
Ainsi la première animation est identifiée a1.
La deuxième animation est identifiée a2 et commence lorsque la première est terminée : begin="a1.end"
La troisième animation commence lorsque la deuxième est terminée : begin="a2.end"
Et ainsi de suite ...

Exemple 2

Enchaînement d'animations portant sur le même objet.

Le code correspondant

<svg width = "50%" height="auto" viewBox ="0 0 400 400" style ="background : yellow ;" > <circle cx = "20" cy = "200" r ="20" height="50" fill = 'red'> <animate attributeName ="cx" fill="freeze" values ="20;380;20" begin="0s" dur="8s" repeatDur ="18s" repeatCount="3" attributeType ="XML"/> <animate attributeName ="r" fill="freeze" values ="20;200;20" begin="18s" dur="6s" repeatCount ="indefinite" attributeType ="XML"/> </circle> ...

Commentaire du code

La boule rouge se déplace de gauche à droite puis de droite à gauche; ce cycle de 8 secondes est répété durant 18 secondes (donc 2fois et quart) car emploi de l'attribut repeatDur qui est prioritaire sur repeatCount !
Puis c'est la deuxième animation qui démarre et qui concerne le même objet : variation du rayon.

Exemple3

La deuxième animation (celle portant sur le rond) démarre seulement lorsque la première animation (celle portant sur le carré) a été exécutée deux fois !

Le code correspondant

<svg width = "50%" height="auto" viewBox ="0 0 400 400" style ="background : lime ;" > <rect x = "0" y = "0" width ="50" height="50" fill = "orange" > <animate attributeName ="x" fill="freeze" values ="0;350;50" begin="0s" dur="5s" id="r1" attributeType ="XML" repeatCount ="indefinite" /> </rect> <circle cx = "20" cy = "200" r ="20" fill = "red" > <animate attributeName ="cx" fill="freeze" values ="20;380;20" begin="r1.repeat(2)" dur="8s" repeatCount="indefinite" attributeType ="XML"/> </circle> ...

Commentaire

la première animation est identifiée r1.
Notez bien la valeur de l'attribut begin dans la deuxième animation : r1.repeat(2) ce qui veut dire lorsque l'animation r1 a connu deux cycles !
Retour menu