Animations SVG avec Snap : premiers pas

Avant d'aborder l'animation avec Snap SVG il est préférable de visiter les pages concernant le dessin statique avec Snap afin de vous familiariser avec la syntaxe. Découverte de Snap SVG

Ci-dessous trois exemples d'animations SVG avec Snap SVG.
Ces animations ne sont exécutées qu'une fois et ne durent que quelques secondes. Aussi n'hésitez pas à actualiser la page pour les relancer.

Exemple 1 : animation de cercles

Le canevas SVG contenant l'animation

Actualisez la page pour relancer l'animation !

Le code correspondant

Il se résume à un script car c'est dans celui-ci que le canevas est créé !

var s = Snap(600,300) // création d'un zone de dessin SVG var grand = s.circle(300,200,100); // dessiner un grand cercle grand.attr({fill: "green", stroke: "black", strokeWidth: 5}); // colorier le cercle var petit = s.circle(200,200,70); // dessiner un petit cercle var petit2 = s.circle(400,200,70); // dessiner un autre petit cercle var groupe = s.group(petit, petit2); // regroupement des deux petits cercles en un groupe groupe.attr({fill : "none",stroke :"yellow", strokeWidth :4}); // colorier le groupe de formes petit.animate({r: 30, cx :150}, 6000); // animer petit cercle de gauche petit2.animate({cx: 300, r:100}, 6000); // animer petit cercle de droite

Si vous avez lu la page concernant la bibliothèque JS Snap SVG dans le tutoriel "Dessiner avec SVG" ce codage vous est familier sauf les deux dernières instructions.
Examinons les attentivement !
petit.animate({r: 30, cx :150}, 6000) : l'animation concerne la forme identifiée par la variable "petit" c'est à dire le premier petit cercle.
L'animation dure 6 secondes (6000 millisecondes) et concernent deux paramètres : r & cx ; les valeurs indiquées correspondent aux valeurs finales.

Donc le premier petit cercle diminue de taille et se déplace vers la gauche tandis que le deuxième s'agrandit et se déplace vers la gauche pour se confondre avec le grand rond.

Attention les deux animations sont ici simultanées !
C'est dans la page suivante que j'explique comment enchainer les animations ...

Exemple 2 : fusion de deux carrés

Le canevas SVG contenant l'animation

Actualisez la page pour relancer l'animation !

Le script correspondant

var s = Snap(400,200); // création d'un canevas SVG dans la page var carre1 = s.rect(20,20,30,30).attr({ fill: 'red' }); // premier carré rempli de vert var carre2 = s.rect(150,20,30,30).attr({ fill: 'blue'}); // deuxième carré rempli de bleu var anim_modele = Snap.animation({width: 80, height: 80, fill: 'purple', x: 60, y: 50 }, 4000); // définition d'un modèle d'animation carre1.animate(anim_modele); carre2.animate(anim_modele); // application du modèle d'animation aux deux carrés qui vont donc fusionner en un seul à la fin de l'animation

Notez que la syntaxe fait penser à du jQuery ; ainsi on retrouve le "chainage" qui permet ici en une seule instruction de dessiner et de colorier une forme.

Grâce à la méthode Snap.animation() on peut définir un modèle d'animation puis appliquer ensuite ce modèle à plusieurs formes. En effet dans ce modèle on ne fait référence à aucun élément ; il s'agit donc bien d'une animation générique.

Attention les deux animations sont ici simultanées ! C'est dans la page suivante que j'explique comment enchainer les animations ...

Exemple 3 : transformation de carrés sur clic

Le rendu

Cliquez sur l'un des carrés pour l'animer !
Actualisez la page pour repositionner les carrés.

Ici l'animation de l'élément est déclenchée sur un l'événement clic.

Le script correspondant

var s = Snap(400,200); var carre = s.rect( 50,50,40,40 ).attr({ fill: 'red'}); var carre2 =carre.clone().attr({y: 150, fill :"green"}); var transformation = Snap.animation({transform: 't200s2r45'},4000); // l'animation consiste en un transformation complexe : translation, changement d'échelle et rotation // création d'une fonction générique function animer() {this.animate(transformation);} // appel fonction générique carre.click(animer); carre2.click(animer);

Le modèle d'animation "transformation" est ici une transformation avec translation, changement d'échelle et rotation.
transform: 't200s2r90' : "t" comme "translate", "s" comme "scale" et "r" comme "rotate". Donc l'élément concerné se déplace, grossit et tourne sur lui même.
Ce modèle d'animation est ensuite intégré dans une fonction générique "animer" (car emploi dans cette fonction du mot "this" en guise d'élément).
Il suffit ensuite d'appeler cette fonction "animer" lors d'un clic sur "carre" OU sur "carre2" !

Prolongements

Dans la page suivante je vais vous montrer que Snap est très souple puisqu'on peut mixer SVG traditionnel et script en Snap SVG.
Je vous montrerai comme aller plus loin dans les animations : enchainer différentes animations, répéter une animation à l'infini. Je vous présenterai les événements autres que click, etc. Aller au chapitre suivant
Retour menu