Le SVG
L'animation en SVG
L'animation via SMIL
Afin de pouvoir être animable, le SVG à été développé en collaboration avec les développeurs du SMIL. Le SMIL est une autre recommandation du W3C, visant l'écriture de présentation multimédia interactive. Pour en savoir plus sur le SMIL, c'est par là.
Le SVG incorpore 5 balises différentes de SMIL Animation afin de gérer ses animations. Un élément notable est qu'à l'heure où j'écris ces lignes, aucun navigateur n'est pleinement compatible avec ces éléments. Si les exemples ne fonctionnent pas sur votre navigateur, je vous conseille d'installer le navigateur Opera (10.51+).
La balise animate
Cette balise permet d'animer un seul attribut (ou propriété) au cours du temps.
Pour savoir ce qui peut ê animé au cours du temps, c'est par là.
Exemple:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"/> </rect> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.
Pour l'instant, je vais passer sous silence les différents attributs de la balise animate. En effet, tout ces attributs sont communs avec la plus part des balises d'animation, je les expliquerai donc à la fin.
La balise set
La balise set est un moyen simple de fixer la valeur d'un attribut pour une période donnée.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"> <set attributeName="fill" to="red" begin="mouseover" end="mouseout" /> </rect> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.
La balise animateMotion
Cette balise permet, comme son nom l'indique, la modification de la position d'une figure (ou d'un groupe) au cours du temps. Il existe plusieurs moyen de spécifier cette position, soit par un jeu de valeurs (x,y), soit par l'utilisation d'un tracé.
L'exemple qui suit montre l'utilisation d'un tracé, il provient directement de la recommandation W3C du SVG.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg"> <desc>Exemple animMotion01 - illustre les calculs d'animation du mouvement</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- Dessine le contour du tracé de mouvement en bleu, avec trois petits cercles au début, au milieu et à la fin. --> <path d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- Voici un triangle qui se déplacera sur le tracé de mouvement. Il est défini avec une orientation verticale, la base du triangle étant centrée horizontalement juste au-dessus de l'origine. --> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- Définit l'animation sur le tracé de mouvement --> <animateMotion dur="6s" repeatCount="indefinite" path="M100,250 C 100,50 400,50 400,250" rotate="auto" /> </path> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.
La balise animateColor
Cette balise permet de changer la couleur d'un objet au cours du temps.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"> <animateColor attributeName="fill" values="red;green;blue;green;red" dur="5s" repeatCount="indefinite"/> <animateColor attributeName="stroke" values="green;blue;red;blue;green" dur="5s" repeatCount="indefinite"/> </rect> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.
La balise animateTransform
Cette dernière balise permet la gestion des transformations au cours du temps.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="70px"> <rect x="30px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"> <animateTransform additive="sum" attributeName="transform" type="skewX" values="0;20;0;-20;0" dur="2s" repeatCount="indefinite"/> </rect> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.
Les attributs de synchronisation
Au travers ces différents exemples, nous avons vu différentes maniéres de synchroniser nos animations. Voyons maintenant la signification des différents attributs:
- begin, qui définit le début de l'animation au moyen d'un critère de temps (ex: 4s) ou d'évènement (ex: mouseover) ;
- end, qui définit la fin de l'animation au moyen d'un critère de temps (ex: 6s) ou d'évènement (ex: mouseout) ;
- dur, qui définit la durée de l'animation (ex: 6s) ;
- min et max, qui définissent les bornes de la durée active de l'animation ;
- restart, qui peut prendre trois valeurs :
- always, l'animation peut être relancée à tout moment ;
- whenNotActive, l'animation ne peut ê relancée que si elle est inactive, autrement les requê de relance sont ignorées ;
- never, l'animation ne peut pas être relancée.
- repeatCount et repeatDur, qui définissent le nombre et la durée totale des répétitions ;
- fill, qui n'admet que deux valeurs :
- freeze, c'est à dire que l'effet persistera à la fin de l'animation ;
- remove, l'objet à la source de l'animation reviendra dans son état initial.
Les attributs de gestion de valeurs
Il existe plusieurs attributs pour spécifier les valeurs de l'animation:
- calcMode, qui peut prendre 4 valeurs différentes :
- discrete, aucune interpolation n'est effectuée, l'animation passe simplement d'une valeur à l'autre ;
- linear, une interpolation linéaire simple est effectuée pour le calcul de l'animation ;
- paced, définit une interpolation qui produit une vitesse de transition égalisée au cours de l'animation ;
- spline, interpole à partir d'une valeur de la liste de l'attribut values sur la suivante, selon une fonction temporelle définie par une spline de Bézier cubique.
- values, une liste d'une ou plusieurs valeurs séparées par un point-virgule ;
- keyTimes, une liste de valeurs entre 0 et 1 séparées par un point-virgule. Chaque temps de la liste correspond une valeur de l'attribut values, et représente le temps où l'animation devra la prendre ;
- from, la valeur de debut de l'animation ;
- to, la valeur de fin de l'animation.
Les attribut de succéssion d'animation
C'est le dernier d'attributs possibles, et il n'y a que deux attributs :
- additive, qui laisse deux choix :
- sum, qui ajoute l'animation à la valeur de l'attribut sous-jacent, ainsi qu'aux autres animations ;
- replace, qui remplace l'attribut et les autres animations.
- accumulate, qui laisse aussi deux choix :
- sum, spécifie que chaque itération s'accumule aux précédentes ;
- none, spécifie que les répétitions ne sont pas cumulatives.
L'animation via ECMAScript
Un autre moyen d'animer le SVG et d'utiliser son DOM. Selon wikipédia, "Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté."
Il se représente généralement comme un arbre que l'on peut parcourir et modifier à souhait. Pour le SVG le meilleur moyen d'y arriver est par le biais de l'ECMAScript, et plus particulièrement du JavaScript. L'avantage de ce type d'animation est qu'il fonctionne sur la plus part des navigateurs actuel.
Expliquer le fonctionnement du JavaScipt dans le SVG reviendrait à tout simplement essayer de vous enseigner le JavaScript, ce qui pourrait faire l'objet d'un exposé complet. Vous trouverez donc ici un seul exemple, attestant de la bonne interaction du JavaScript avec SVG.
Le code Javascript :
var oldcol; function colorme(evt) { var rect = evt.target; oldcol = rect.getAttribute("fill"); rect.setAttribute("fill", "blue"); } function uncolorme(evt) { var rect = evt.target; rect.setAttribute("fill", oldcol); }
Le code SVG :
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="120px" height="70px" onload="init();"> <defs> <script type="text/ecmascript" xlink:href="../script/jssetrect.js"/> </defs> <rect id="monrect" x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px" onmouseover="colorme(evt)" onmouseout="uncolorme(evt)"/> </svg>
Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous. (passez votre souris sur le rectange)