Dessiner avec SVG - sommaire

Snap SVG : initiation aux animations

Dans les pages précédentes, nous avons utilisé le framework Snap SVG pour réaliser des dessins statiques des les pages web. Maintenant passons à la création d'images vectorielles animées.

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

Actualisez la page pour relancer l'animation !

Le code correspondant

Il se résume à une instruction HTML et un script.
N'oubliez pas de charger la librairie Snap SVG dans la partie HEAD de la page ! ... <svg width ="100%" viewBox ="0 0 600 400" id ="zone" > </svg> ... <script> var s = Snap("#zone") ; // s référence la première zone de dessin de la page 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 ...

Analyse du script

La nouveauté ici : la méthode animate() qui est appliquée à deux ronds identifiés "petit" et "petit2".
petit.animate({r: 30, cx :150}, 6000) : l'animation concerne l'élément identifié par la variable "petit" c'est à dire le premier petit cercle.
Cette animation dure 6 secondes (6000 millisecondes) et concernent deux paramètres : r & cx ; les valeurs indiquées correspondent aux valeurs finales.

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

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

Actualisez la page pour relancer l'animation !

Le code correspondant

Analyse du script

Cette fois le canevas est "responsive" : valeur de l'attribut width en %.
L'attribut viewBox devient alors obligatoire mais est défini dans le script.

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 également simultanée.

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.

Le script correspondant

Commentaire

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" !