Les animations (partie 1)
À l’heure actuelle, le seul navigateur qui vous permettra de visualiser au mieux les exemples de ce site est Opera. Par exemple, les animations ne fonctionnent correctement que sous Opera. Sous Firefox 3.5 et inférieur, un script (FakeSmile) simule les fonctions d’animations mais beaucoup d’exemples sont buggés.
SVG permet un contrôle très fin sur les animations. En gros, on va pouvoir tout faire bouger, clignoter, changer de couleur, etc. sans avoir à écrire une seule ligne de JavaScript ! Et c’est super simple !
- L’élément animate
- L’animation de couleur : animateColor
- Répétition d’animation
- L’élément set
- L’animation avec les transformation
- L’animation sur un path
L’élément animate
L’élément animate sert à faire varier la valeur d’un attribut ou d’une propriété CSS au cours du temps. Concrètement, on doit placer la balise animate comme enfant immédiat de l’élément dont on veut faire varier un attribut ou une propriété. Dans l’exemple suivant, on pourra faire varier, au choix, l’attribut x, y, width ou height ainsi que toutes les propriétés CSS qui peuvent être appliquées à un rectangle, même si elles ne sont pas déclarés ! On pourra donc faire varier l’épaisseur d’une bordure (stroke-width) même si rien n’est indiqué à ce sujet dans la feuille de style (il peut même ne pas y avoir de feuille de style). Il en va de même pour les attributs qui ont des valeurs par défaut. Par exemple, x qui vaut 0 par défaut peut être manipulé par une animation même s’il n’apparaît pas dans la balise parente (rect dans notre cas).
La balise rect devient une balise double. Ce n’est absolument pas un problème puisque rect est la même chose que ]]> !
Les attributs de base
Les deux premières informations dont à besoin SVG pour animer quelque chose, ce sont le type d’objet à traiter (attribut XML ou propriété CSS) et le nom de cet objet. C’est là qu’entrent en jeu les attributs attributeType et attributeName.
attributeType accepte deux valeurs : « CSS » ou « XML » selon ce qu’on veut traiter : un attribut de l’élément parent ou un style CSS.
attributeName prend en paramètre le nom de l’attribut ou de la propriété CSS. Par exemple :
animate attributeName="stroke-opacity" attributeType="CSS".
Puis, on doit déterminer la valeur de départ de l’attribut ou la propriété sélectionné et la valeur finale. On utilise les attributs from et to pour déterminer ces deux valeurs.
Ensuite, il faut faire démarrer l’animation, grâce à begin qui peut prendre une valeur de durée.
Enfin, on indique la durée de l’animation avec l’attribut dur, qui prend aussi une durée en paramètre.
Pour notre première animation, on commence à 2 secondes pour finir à 5 secondes. On fait varier l’attribut width d’un rectangle de 100 à 300 pixels (n’hésitez pas à recharger la page si rien ne se passe, puisque begin="2s" signifie « à +2 secondes de l’affichage du dessin »).
Et voilà le travail ! Bien sur, le rectangle revient à sa position initiale mais c’est un détail que nous règlerons plus tard.
Les attributs begin et end : précisions
En plus de begin, il existe une balise, end, qui permet de contraindre une animation à s’arrêter. Dans l’exemple suivant, l’animation ne dure pas 6 secondes mais s’arrête à 4 secondes comme indiqué dans l’attribut end.
Attention toutefois : il faut obligatoirement un attribut dur. Le viewer SVG ne calculera pas la différence end-begin si vous omettez cet attribut !
À propos des valeurs de durée, il faut savoir que, en plus de la seconde (notée s), on peut utiliser les heures (h), les minutes (min) et les millisecondes (ms).
Plus intéressant, on peut demander à SVG de commencer une animation (et de la finir) en fonction du début ou de la fin d’une
autre animation ! Si si, c’est vrai !
Il faut pour cela localiser l’animation avec laquelle on veut interagir avec un id. Ensuite,
on écrit begin="id.begin" pour faire commencer l’animation en même temps que l’animation
id et begin="id.end" pour faire commencer notre animation à la fin de
l’autre. Remarquez dans l’exemple suivant qu’il peut y avoir plusieurs animations sur le même objet en même temps :
Et voilà : une synchronisation parfaite ! En fait, la seule chose gênante, c’est le retour à la valeur de départ à la fin de l’animation. Si vous devez apprendre quelque chose ici, c’est que les concepteurs de SVG ont pensé à tout. Et c’est donc vrai dans notre cas.
Le gel d’animation avec l’attribut fill
L’attribut fill, dont la valeur par défaut est remove, permet de geler une animation à sa fin, grâce à la valeur freeze. En reprenant notre exemple du dessus, ça donne :
Muhahaha !
Notez bien (surtout ceux qui vont programmer avec DOM après) que le gel d’animation ne revient pas à geler la valeur de l’attribut. Donc, la valeur de stroke-opacity est, à la fin, de 1 (et non pas de 0) !
L’animation de couleur : animateColor
Il existe un élément dédié à l’animation de couleur : il s’agit de animateColor.
animateColor fonctionne exactement de la même façon que animate, à cela près que les valeurs de from et de to doivent être des couleurs !
Répétition d’animation
Jusqu’ici, nos animations ne se sont répétées qu’une fois. En réalité, il est possible de les faire se répéter autant de fois ou de temps que l’on veut, et même indéfiniment !
L’attribut repeatCount prend en paramètre soit un entier supérieur à 0, soit le mot-clé indefinite. Dans le premier cas, l’animation se répète le nombre de fois indiqué. Dans le second, elle se répète indéfiniment.
L’attribut repeatDur prend en paramètre soit une durée, soit le mot-clé indefinite. Dans le premier cas, l’animation se répète pendant la durée indiquée. Dans le second, à vous de deviner .
La présence des deux attributs en même temps n’est absolument pas gênante.
Exemple avec un path (et oui, ça fonctionne même avec un chemin, à condition que seuls les nombres varient (pas les lettres)).
Remarquez l’utilisation judicieuse de coordonnées relatives.
Voici une dernière animation, pour le fun :
L’élément set
Lorsqu’on souhaite fixer un attribut à une valeur, sans transition, l’utilisation de animate n’est pas cohérente. Dans ce cas, on utilise set qui permet, grâce à son attribut to de fixer cette valeur pendant la durée dur. Par exemple, si on veut rendre visible un triangle pendant quelques secondes seulement, on fait :
Bien sur, si j’avais voulu que le panneau ne disparaisse pas, j’aurais écrit fill="freeze" et j’aurais enlevé le dur.
L’animation avec les transformation
Vous vous souvenez des transformations ? Ces trucs un peu bizarre qui ne servait a priori à rien ! Et bien il existe une balise (animateTransform pour ne pas la citer) qui permet de faire des animations à partir des transformations (quoi, personne ne vous avait prévenu que SVG, c’était génial ?) !
En plus des attributs habituels, on doit spécifier dans type le type de transformation qu’on souhaite réaliser : translate, rotate, scale, skewX ou skewY. Après, il ne reste plus qu’à remplir les attributs from et to avec les valeurs voulues.
Maintenant, à vous de coder. Vous avez le niveau suffisant pour programmer une horloge !
L’animation sur un path
animateMotion est la dernière balise d’animation de SVG. Elle permet de faire défiler un object le long d’un chemin.
Comme d’habitude, on la place comme enfant direct de l’objet qu’on veut déplacer. Ensuite, on utilise, en plus des attributs habituels, soit l’attribut path qui contient les coordonnées du chemin, soit la balise mpath, enfant direct de animateMotion, dont l’attribut xlink:href appelle un path par son id (ouf ).
En gros, ça donne ça :
C’est parfait ! Mais imaginez que j’ai dessiné, au lieu de ma boule de sapin de noël (vous n’aviez pas deviné ?) une voiture : elle n’aura pas vraiment suivi le chemin et serait restée horizontale dans les descentes et les montées. On peut demander à SVG de calculer la valeur de rotation de l’objet qu’on anime par rapport à la pente du chemin. Il s’agit de l’attribut rotate qui a pour valeur par défaut 0, mais qui peut prendre une autre valeur d’angle, la valeur auto et auto-reverse :
C’est un peu long (au niveau du XML, par contre au niveau CSS c’est vraiment court) mais en fait, c’est beaucoup de copier-coller, accompagné de modification d’un ou deux attributs à chaque fois… Voilà ce que vous pourrez faire en dix minutes avec un peu d’entrainement !
Ce merveilleux chapitre touche à sa fin, mais nous reviendrons aux animations plus tard. Vous verrez qu’on peut contrôler très finement la vitesse des animations et qu’il en existe (des animations) plein d’autres sortes avec les mêmes balises !
