Balise animate de SVG

Exemple 1

Le rond grossit progressivement pour atteindre un rayon maximum puis diminue pour atteindre un diamètre minimum et le cycle recommence mais ne se répète que 10 fois.
Dans le même temps il est de plus opaque puis de plus en plus transparent et le cycle reprend mais ne se répète lui aussi de que 10 fois.

Actualisez la page pour redémarrer l'animation !

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400" style ="background : yellow" > <circle cx="200" cy="200" fill = 'red' style ="fill-opacity : 0.1;"> <animate attributeName="r" attributeType ="XML" values = "1;200;1" begin ="0s" dur="30s" repeatCount="10" /> <animate attributeName="fill-opacity" attributeType ="CSS" values = "0.1;1;0.1" begin ="0s" dur="30s" repeatCount="10" /> </circle> </svg>

Commentaire du code

La balise circle inclut deux fois la balises animate.
La balise animate est le "couteau suisse" de l'animation en SMIL et comprend de nombreux attributs.

Si il n'y a que deux valeurs pour l'attribut values on peut remplacer ce dernier par les attributs from et to.

Concernant la deuxième balise animate vous constatez que la valeur de l'attribut attributType est "CSS". En effet l'opacité de la forme a été passée en propriété CSS (via l'attribut style) et non pas en attribut.

La balise animate comprend d'autres attributs que nous allons aborder dans les exemples suivants.

Exemple 2

L'animation est ici déclenchée automatiquement, le cycle dure 10 secondes, se répète un nombre indéfini de fois mais la durée globale de l'animation dure 25 secondes !

Le code SVG correspondant

La boule se déplace de gauche à droite et de bas en haut durant 10 secondes puis le cycle reprend.
Mais la durée totale de l'animation est de 25 seondes !
Actualisez la page pour relancer cette animation.

<svg width="100%" height="auto" viewBox ="0 0 900 120" style ="background : lime ;margin :10px auto 10px auto ; box-shadow : 5px 5px 5px gray ;" > <circle r= '10' fill = 'red'> <animate attributeName="cx" values = "10;100;300;500;700;890" begin ="0s" dur="10s" repeatCount="indefinite" repeatDur ="25" attributeType ="XML"/> <animate attributeName="cy" values = "60;10;110;10;110;60" begin = '0s' dur ="10s" repeatCount="indefinite" repeatDur ="25" attributeType ="XML"/> </circle> </svg>

Commentaire

Vous pouvez constater que CSS est sollicité pour dessiner le décor de l'animation (règle de style dans la balise SVG).
Ici j'ai introduit un nouvel attribut : repeatDur (durée globale de l'animation).
Ne confondez pas l'attribut repeatDur avec l'attribut dur (durée d'un cycle). L'attribut repeatDur est prioritaire sur l'attribut repeatCount ! Donc ici malgré repeatCount ="indefinite" l'animation va s'arrêter au bout de 25 secondes.

Remarquez après la fin de l'animation la boule retournent à la position de départ.
Il aurait été préférable que la boule reste à la position atteinte après deux cycles et demi d'animation.

Nous verrons la solution plus tard.

Atelier

Le carré s'agrandit puis se rétrécit et le cycle recommence à l'infini.

Le carré est toujours centré dans la zone de dessin dont le viewBox est : "0 0 400 400"

Il faut donc "animer" non seulement les attributs width, height du rectangle mais aussi les attributs x, y (coordonnées du coin supérieur gauche).
Pour chaque balise animate l'attribut values doit contenir 5 valeurs. Par exemple pour l'animation de width la valeur de l'attribut values sera "0;200;400;200;0".

Je ne vous communique pas le code SVG de cette page. A vous de le trouver en vous aidant des deux premières animations avec le SMIL.
Je vous mets un peu sur la voie. le cycle dure 30 secondes. Le conteneur rect doit comprendre quatre fois la balise animate.
Lorsque les dimensions du carré augmentent les valeurs des coordonnées du coin supérieur gauche doivent diminuer et vice-versa.
Ainsi lorsque le côté du carré fait 200 les coordonnées x et y doivent être égales à 100 :(400-200)/2 ! Lorsque le côté du carré est égal à 400 les coordonnées x et y doivent être égales à 0 : (400-400)/2 !

Exemple 3 : animation 3D de clones

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.
Quant à 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.
Notez l'astuce pour créer un effet d'ombre. Chaque objet comprend deux cercles dont un gris (l'ombre).
Il faut bien sur dessiner d'abord l'ombre (cercle gris) 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").

L’attribut fill de animate (ne doit pas être confondu avec l’attribut fill définissant la couleur de remplissage d’une forme).

Remarque : pour l'animation de la boule blanche (clone du modèle "blanche") je vous communique seulement des bribes de code.
Comme l'animation est perpétuelle (pas de repeatDur et repeatCount à indefinite) l'attribut fill sera ici inutile !
Retour menu