Animation SVG avec SMIL
Synchronized Multimedia Integration Language (angl.) (SMIL) est un langage basé sur XML pour écrire des présentations multimédias interactives. Les auteur·ice·s peuvent utiliser la syntaxe SMIL dans d'autres langages basés sur XML pour définir le minutage et la disposition des éléments pour l'animation.
SMIL permet de :
- animer les attributs numériques d'un élément (
x,y, etc.) - animer les attributs de transformation (déplacement, rotation, etc.)
- animer les attributs de couleur
- suivre un chemin de mouvement
Les sections suivantes montrent comment utiliser SMIL dans SVG pour ces quatre cas d'usage.
Animation pour un attribut
L'exemple suivant anime l'attribut cx d'un cercle. Pour ce faire, on ajoute un élément <animate> dans l'élément <circle>. Les attributs importants pour <animate> sont :
attributeName-
Le nom de l'attribut à animer.
from-
La valeur initiale de l'attribut.
to-
La valeur finale.
dur-
La durée de l'animation (par exemple, écrire '5s' pour 5 secondes).
Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments <animate>.
<svg width="300" height="100">
<title>Animation d'attribut avec SMIL</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animate
attributeName="cx"
from="0"
to="500"
dur="5s"
repeatCount="indefinite" />
</circle>
</svg>
Animer les attributs de transformation
L'élément <animateTransform> permet d'animer les attributs de transformation. Cet élément est nécessaire car nous n'animons pas un simple attribut comme x qui est juste un nombre. Les attributs pour la rotation sont ainsi : rotation(theta, x, y), où theta est l'angle en degrés, et x et y sont les positions absolues. Dans l'exemple ci-dessous, on anime le centre de rotation et l'angle.
<svg width="300" height="100">
<title>Animation SVG SMIL avec transformation</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect
x="0"
y="50"
width="15"
height="34"
fill="blue"
stroke="black"
stroke-width="1">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 100 60"
repeatCount="indefinite" />
</rect>
</svg>
Animation suivant un tracé (chemin)
L'élement <animateMotion> permet d'animer la position et la rotation d'éléments en suivant un tracé spécifique. Ce chemin est définit de la même manière que dans <path>.
Exemple 1 : Mouvement linéaire
Dans cet exemple, un cercle bleu rebondit indéfiniment entre les bords gauche et droit d'une boîte noir. L'animation est ici gérée par l'élément <animateMotion>.
On crée ici un chemin avec les commandes MoveTo, pour définir le point de départ de l'animation, Horizontal-line, pour déplacer le cercle de 300 pixels vers la droite, et la commande Z, pour fermer le chemin — ce qui permet d'établir une boucle qui revient au début. En définissant la valeur de l'attribut repeatCount à indefinite, on indique que l'animation doit boucler indéfiniment, tant que l'image SVG existe.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<title>Animation SVG SMIL avec chemin</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
Exemple 2 : Mouvement en courbe
Le même exemple que précédemment mais avec une trajectoire courbe.
<svg width="300" height="100">
<title>Animation SVG SMIL avec chemin</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect
x="0"
y="0"
width="20"
height="20"
fill="blue"
stroke="black"
stroke-width="1">
<animateMotion
path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
dur="3s"
repeatCount="indefinite"
rotate="auto" />
</rect>
</svg>