Animation de clones avec le SMIL

Deux boules ombrées se déplacent selon les deux axes en 10 secondes.
Pour la boule blanche l'animation est perpétuelle mais démarre deux secondes après le chargement de la page.
Pour la boule rouge l'animation ne dure que 25 secondes et la boule reste à l'emplacement atteint au bout de cette durée.

Le code SVG : définition de modèles

<svg width="100%" height="auto" viewBox ="0 0 900 120" style ="background : lime ;margin :10px auto 10px auto ; box-shadow : 5px 5px 5px grey ;" > <defs> <g id ="blanche"> <circle r="10" fill ="gray" cx ="4" cy ="4"/> <circle r="10" fill ="white" cx ="0" cy ="0" /> </g> <g id ="rouge"> <circle r="10" fill ="gray" cx ="4" cy ="4"/> <circle r="10" fill ="red" cx ="0" cy ="0" /> </g> </defs>

On définit deux modèles identifiés rouge et blanche.
Chaque modèle est en fait constitué de deux ronds : un rond gris (l'ombre) et un rond rouge ou blanc.
Il faut bien sur dessiner d'abord l'ombre puis le rond rouge ou blanc afin qu'il soit en premier plan. Le rond rouge ou blanc devant être décalé de 4 pixels vers le haut et vers la gauche par rapport au rond gris.

Le code SVG (suite) : clonage et animation des clones (extraits)

<use xlink:href ="#rouge"> <animate attributeName="x" values = "-20;100;300;500;700;920" begin ="0s" dur="10s" attributeType ="XML" repeatCount="indefinite" repeatDur ="25s" fill ="freeze" /> <animate attributeName="y" values = "60;0;110;0;110;60" begin = '0s' dur ="10s" attributeType ="XML" repeatCount="indefinite" repeatDur ="25s" fill ="freeze" /> </use> <use xlink:href ="#blanche"> <animate ... begin ="2s" dur="10s" /> <animate ... begin = '2s' dur ="10s" /> </use> </svg>

On clone et on anime chaque modèle avec changement des coordonnées X et Y.

Donc ici la grande nouveauté syntaxique est la balise animate contenue dans la balise use.

Notez l'emploi dans la balise animate de l'attribut fill avec la valeur "freeze" (on parle de "gel de l'animation").

Ne confondez pas l'attribut fill de la balise animate avec l'attribut du même nom pour les balises de formes (rect, circle, ellipse, path, etc.) et qui permet de remplir la forme.

Pour l'animation du clone de la boule blanche je vous communique seulement des bribes de code.
Comme l'animation est perpétuelle l'attribut fill est ici inutile ! Retour menu