Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Coder en SVG

Dessins statiques

Le format SVG Les formes de base Les chemins Gestion du texte La balise image L'attribut viewBox pour des canevas responsives Dégradés, motifs, masques et découpes Modèle et clonage de modèle Les transformations Les filtres en SVG

Dessins animés

La balise animate Compléments sur la balise animate Balise animatemotion Balise animatetransform Balise set Animer via JavaScript Animer via CSS Un jeu - le squash Comparaison SVG & Canvas

Le framework Snap SVG

Découverte du framework Plus loin avec Snap SVG Les filtres avec Snap SVG Les dégradés avec Snap SVG Chemins, masques & découpes en Snap SVG Animations avec Snap SVG - introduction Animations avec Snap SVG - enchainer, répéter à l'infini Animations avec Snap SVG - animations génériques - les événements Animations avec Snap SVG - progression de l'animation

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

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 à l'animation.

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.

... <svg id="zone" width ="400" height="400" > </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é : la méthode animate() !
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.
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

Actualisez la page pour relancer l'animation !

Le code correspondant

... <svg id="zone1" width ="80%" height="auto" > </svg> ... <script> var s = Snap("#zone1") ; s.attr({ viewBox: "0 0 600 300" }); 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 </script>

Analyse du script

Cette fois la zone de dessin est "responsive".
La largeur du canevas est exprimée en % de celle de son conteneur.
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

... <svg id="zone2" width ="80%" height="auto" > </svg> <script> var s = Snap("#zone2") ; s.attr({ viewBox: "0 0 600 300" }); 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 function animer() {this.animate(transformation);} carre.click(animer); carre2.click(animer);

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