Snap SVG : initiation aux animations

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 la zone de dessin est créée avec la méthode Snap(largeur,hauteur).

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 code correspondant

Comme dans l'exemple précédent il se résume à un script puisque c'est dans ce dernier que la zone de dessin est créée.

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

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

Dans le chapitre suivant : enchainer animations, répéter la même animation à l'infini
Retour menu