Sites


SVG

Prérequis pour créer une animation

Les animations SVG ont longtemps fait rêvé les amateurs de ce langage. Force est pourtant de constater qu'après des années d'attente, il existe encore peu de vrais projet implémentant vraiment de l'animation SVG. Cela, comme le reste, change bien sûr depuis HTML5, mais il n'en reste pas moins que l'animation est avant tout un travail de scénarisation et d'artiste et que le manque d'outil visuel de création est alors un frein pour un grand nombre.

Il n'en reste  pas que les animations en SVG ont de vrais atouts.
Parmi ceux-ci, on peut citer la clarté. La plupart des éléments d'animation sont tous structurés de la même façon et sont pour la bonne part très explicites.
Les possibilités sont relativement riches et vont du simple déplacement linéaire d'un élément à un déplacement contraint en passer par des interpolations de formes. Mais attention à ne pas abuser. Le navigateur doit alors tout calculer lui-même à chaque étape de l'animation, ce qui peut faire ventiler vos machines.
Enfin, il n'est pas nécessaire de connaître d'autres langages, comme javascript, pour réaliser ds animations SVG. Elles se font sous un mode déclaratif ce qui les rends accessibles. Il suffit juste de bien penser son projet en amont et d'affiner après codage.

Fonctionnement de l'animation SVG

Une animation SVG repose sur une combinaison de différents éléments SVG :

  • set
  • animate
  • animateColor
  • animateTransform
  • animateMotion

qui définissent des types d'animations particuliers, bien exprimé par leur nom. Ces éléments devront être insérés à l'intérieur de l'élément à animer. Par exemple, pour un code de rectangle simplifié à ceci :

<rect x="10" y="10" width="50" height="50" />

Le code simplifié pour une animation sera :

<rect x="10" y="10" width="50" height="50">
     <animate .... />
</rect>  

Remarquez comme la balise rect a perdu son / à la fin et est doublée en fermeture avec </rect>. Concernant les éléments d'animation, nous les verrons un à un dans les prochains chapitres.

A ces éléments s'ajoutent des  attributs spécifiques pour gérer les détails de l'animation. Par chance, si on peut dire, ces attributs sont largement utilisés par tous les éléments ce qui réduit la difficulté d'apprentissage.

Dire ce qu'on anime avec attributeName 

attributeName permet de spécifier sur quel attribut de la balise l'animation doit porter. Par exemple, pour déplacer un rectangle à l'horizontal, attributeName pointera sur x qui détermine cette position. Cela nous donnerait le code suivant :

 <rect x="10" y="10" width="50" height="50">
    <animate attributeName="x" />
  </rect> 

attributeName peut aussi être complété par l'attribut attributeType qui permet de spécifier la nature syntaxique de ce qu'il faut animer. Dans notre exemple ici, la nature est XML, car x est un attribut XML de l'élément rect. Il existe aussi d'autres valeurs qui font au total:

  • XML : pour des attributs XML
  • CSS : pour des propriétés CSS seulement
  • auto : dans ce cas, le navigateur cherche d'abord dans les propriétés CSS s'il trouve une propriété équivalent déclarée. Si c'est le cas, il l'anime, sinon, il cherche dans les attributs XML.

A l'heure actuelle, l'animation ne peut pas encore fonctionner, il faut lui dire qu'elle est la quantité de changement a effectuer.

Définir les points clés de l'animation

Ceux qui ont déjà manipulés des logiciels d'animation ont peut-être déjà entendu parlé d'image-clé. Ce sont les images sur lesquelles sont déterminés l'état d'un élément animé à certains moment de l'animation. Ces états sont importants et surtout pratique. Ils permettent à l'interpréteur de connaître l'état initial avant changement ainsi que l'état final. Il peut alors se charger de déduire seul les étapes intermédiaires.

En SVG, les images-clés se déterminent de 2 façons :

  • avec les attributs from et to pour les animations simples qui vont d'un point à un autre
  • avec l'attribut values si elles contiennent plusieurs changements à interpoler.

En utilisant from et to, voilà ce que deviendrait notre code d'animation :

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       from="0"
       to="100"
   />
</rect> 

Nous passons ici à la ligne pour rendre le code plus lisible, seulement. Cet exemple fera passer le rectangle, du point 0 (tout à gauche), au point 100 (plus à droite).

 En utilisant values, voilà ce que deviendrait notre code d'animation :

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       values="0;10;100;50;200;30;0"
   />
</rect> 

Values va donc permettre de spécifier plusieurs positions. La forme va passer par chacune d'entre elles dans l'ordre où elles sont spécifiées. Ici le rectangle fera de petits allers-retours qui sont tous évalués ici par des chiffres, séparés par des point-virgules. Remarquez que dans ce cas, la durée de l'animation, par défaut, est découpée de façon égale entre chaque valeur spécifiée.

Gérer le temps de l'animation 

Le dernier point essentiel pour voir enfin notre animation fonctionner consiste à lui rajouter des données temporelles, en particulier définir le moment à laquelle elle doit se lancer et le moment à laquelle elle doit s'arrêter. Nous reviendrons sur certains de ces points mais ces valeurs peuvent exprimer selon un événement (clic, par exemple) ou une position dans le temps.

Nous utiliserons pour l'instant la position dans le temps et verrons les autres possibilités en fin de section animation dans le chapitre, enchaîner les animations.

En SVG, l'attribut begin permet de définir à quel moment l'animation doit commencer et dur le temps qui doit s'écouler avant qu'elle ne s'arrête. En reprenant notre exemple, cela pourrait donner :

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       from="0"
       to="100"
       begin="0s"
       dur="5s"
   />
</rect> 

animation svg simple avec from et to

Remarquez alors que les durées peuvent être exprimées en secondes mais d'autres valeurs temporelles comme minutes heures ... peuvent aussi fonctionner dans des notations particulières. Les animations sont cependant rarement aussi longues.

Au lieu de définir la durée avec Dur, il est aussi possible de définir précisément le moment en utilisant l'attribut end.

Essayez à présent avec  values :

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       values="0;50;200;10;0"
       begin="0s"
       dur="5s"
   />
</rect> 

Animation SVG simple avec values

On pourrait ainsi cumuler les propriétés, mais il nous semble important de terminer à présent en mentionnant repeatCount="indefinite" qui permet de répéter sans fin l'animation et que nous allons souvent utiliser dans ces pages mais qui est aussi parfois pratique pour bien observer les changements dans une animations en cours de réalisation. Une alternative peut être repeatDur suivi de la durée et qui va permettre de répéter l'animation aussi longtemps que la durée spécifiée n'est pas écoulée, par exemple repeatDur="2min".

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       values="0;50;200;10;0"
       begin="0s"
       dur="5s"
      repeatCount="indefinite"
   />
</rect> 

Animation SVG simple avec repeatCount

Combiner des animations

Le dernier point qu'il nous semble important de mentionner ici est la possibilité de combiner ces animations. En effet, pour l'instant, nous avons déplacer le rectangle vers la gauche, mais qu'en est-il si nous voulons en plus jouer sur sa hauteur ou sa couleur ?

Le principe est simple : ajouter des élément animate ou équivalents listés plus haut et dans les chapitre suivants, autant que nécessaire comme par exemple :

<rect x="10" y="10" width="50" height="50">
   <animate 
       attributeName="x"
       values="0;50;200;10;0"
       begin="0s"
       dur="5s"
      repeatCount="indefinite"
   />
   <animate 
       attributeName="height"
       values="50;100;30;70;50"
       begin="0s"
       dur="5s"
      repeatCount="indefinite"
   />
</rect> 

Cela commence à faire beaucoup de code, mais c'est clair et explicite.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.