Répétition infinie d'une chaine d'animations SMIL

Dans la page précédente, pour répéter à l'infini une chaine d'animations on a "programmé" en HTML un rechargement automatique de la page toutes les 10 secondes (somme des durées des différentes animations de la chaine).
Je vais partir d'un exemple dans lequel les animations s'enchainent mais sans répétition de la chaine et ensuite je vais vous montrer comment faire en sorte que la première animation s'exécute après la fin de la dernière pour créer un cycle infini.

Les deux animations s'enchainent mais sans répétition

Le rendu

La chaine d'animations démarre au chargement de la page et se termine au bout de 10 secondes.
Pour relancer cette chaine d'animation actualisez la page.

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 300 300"> <path d="M 0,150 C 100,0 200,300 300,150"> <animate attributeName="d" attributeType ="XML" from= "M 0,150 C 100,0 200,300 300,150" to = "M 0,150 C 100,100 200,200 300,150" begin="0s" dur="5s" id = "a1"/> <animate attributeName="d" attributeType ="XML" from= "M 0,150 C 100,100 200,200 300,150" to = "M 0,150 C 100,0 200,300 300,150" begin="a1.end" dur="5s" id ="a2"/> </path> </svg>

Maintenant les deux animations s'enchainent et se répètent à l'infini

Le rendu

Le code SVG correspondant

Par rapport à la version précédente le code est pratiquement identique sauf un à un détail ...

<svg width="50%" height="auto" viewBox ="0 0 300 300"> <path d="M 0,150 C 100,0 200,300 300,150" > <animate attributeName="d" attributeType ="XML" from= "M 0,150 C 100,0 200,300 300,150" to = "M 0,150 C 100,100 200,200 300,150" begin="0s;a4.end" dur="5s" id = "a3"/> <animate attributeName="d" attributeType ="XML" from= "M 0,150 C 100,100 200,200 300,150" to = "M 0,150 C 100,0 200,300 300,150" begin="a3.end" dur="5s" id ="a4"/> </path> </svg>

Les deux animations sont identifiées a3 & a4.
Notez bien la valeur de l'attribut begin pour la première animation : "0s;a4.end" . Ce qui veut dire que cette animation va démarrer non seulement au chargement de la page mais aussi à la fin de l'animation "a4". Donc on crée un cycle : a3 au chargement puis a4 puis de nouveau a3 lorsque a4 est terminé ; donc un cycle est créé.
Retour au tuto