Dessiner avec SVG - sommaire

Animations avec Snap SVG : le rythme

Jusqu'à présent les méthodes d'animation avaient 2 voire 3 arguments (troisième argument : fonction de rappel).
Or entre la durée de l'animation et la fonction de rappel on peut insérer un troisième argument facultatif : le rythme de l'animation.

Une méthode d'animation peut comporter jusqu'à quatre paramètres (seuls les deux premiers sont obligatoires) :
• liste d'attributs
• durée animation
• rythme animation
• fonction de rappel

Rappelons les valeurs possibles des propriétés CSS animation-timing-function & transition-timing-function
• ease : vitesse rapide au début et ralenti à la fin
• linear: rythme constant
• ease-in : lent au début et de plus en plus accéléré vers la fin
• ease-out : rapide sur le début et de plus en plus décéléré vers la fin
• ease-in-out : le départ et la fin sont lents
• steps(n,start/end) : animation saccadée (sauts successifs)

Je fais cette piqure de rappel sur les transitions et animations CSS à escient comme vous allez comprendre en lisant la suite de mon propos.

Dans le cadre des animations avec Snap SVG on peut aussi avoir des animations avec des rythmes non linéaires comme je montre dans l'exemple ci-dessous.

Exemple

Cliquez sur le premier rond pour lancer l'animation.
Actualisez la page pour revenir à l'état initial.

Les boules se déplacent vers la droite, deviennent opaques et changent de couleur.
Pour chaque boule l'animation dure 10 secondes. Aucune des six boules n'a un rythme de déplacement identique !
Par contre l'état final est identique pour toutes les boules : alignement à droite et grossissement.

Le script

Les "width & height" du viewBox sont 1200 et 600. function fanimation() { var paper = Snap("#zone"); var ombrage = paper.filter(Snap.filter.shadow(10, 10, .5)); // définition d'un ombrage var rond = paper.circle(30,30,30); serie = Snap.set(rond, paper.circle(30,130, 30),paper.circle(30,230,30), paper.circle(30,330,30),paper.circle(30,430,30),paper.circle(30,530,30)); // serie désigne un ensemble de six ronds var param_init = {fill : "red", fillOpacity : .2, filter : ombrage}; // attributs initiaux des ronds serie.attr(param_init); function ffin() { this.attr({r:50}); } function fanimer() { serie.animate( [{cx : 1100,fillOpacity : 1, fill : "navy"}, 10000, mina.linear, ffin], [{cx : 1100,fillOpacity : 1, fill : "purple"}, 10000, mina.bounce,ffin], [{cx : 1100,fillOpacity : 1, fill : "black"}, 10000, mina.easein,ffin], [{cx : 1100,fillOpacity : 1, fill : "orange"}, 10000, mina.easeout,ffin], [{cx : 1100,fillOpacity : 1, fill : "olive"}, 10000, mina.elastic,ffin], [{cx : 1100,fillOpacity : 1, fill : "yellow"}, 10000, mina.easeinout,ffin] ); } // fin fonction fanimer rond.click(fanimer); } fanimation(); //appel de la fonction d'animation

La fonction fanimer() comprend 6 parties puisqu'elle s'applique à "serie" qui est un ensemble de 6 formes.
Pour chaque partie il y a 4 arguments.
Le troisième argument est un mot qui précise le rythme de l'animation : linéaire (linear) ou avec rebond (bounce) ou avec accélération (easein) ou décélération (easout) ou effet élastique (elastic).

Donc on retrouve exactement la même terminologie que pour les animations CSS.
Le quatrième argument est la fonction ffin; fonction basée sur le mot "this".

Rythme de l'animation : exemple 2

Le script (extraits)

Dans cet exemple je vous montre les huit valeurs possibles du troisième argument (rythme de l'animation).
Le script peut paraitre un peu long mais paradoxalement il s'écrit très rapidement grâce à des "copier-coller". En effet des groupes de lignes sont pratiquement identiques.
Notez les deux variables anim & duree qui sont utilisées comme arguments de la méthode élément.animate.
Donc si vous voulez complexifier les animations ou modifier leur durée il suffit de changer ces variables.
Pour deux animations (sur 8) il y a en fin d'animation l'appel d'une fonction "ffin" qui élargit le rectangle et le noircit.

A vous de compléter ! function fanimation2() { var s = Snap("#zone2"); // dessiner 8 rectangles var r1 = s.rect(20, 10, 100, 50).attr({fill: 'Green'}); var r2 = s.rect(20, 60, 100, 50).attr({fill: 'Blue'}); ... var r8 = s.rect(20, 360, 100, 50).attr({fill: 'navy'}); // deux paramètres de l'animation var duree =10000; var anim = {transform: 't1000'}; // déplacer les 8 rectangles function ffin() { ... .attr({fill : ..., ... : 150}); } function fanimer() { r1.animate(anim, duree, mina.linear, ffin); r2.animate(anim, duree, mina.easein); r3.animate(anim, duree, mina.easeout); r4.animate(anim, duree, mina.backin); r5.animate(anim, duree, mina.backout); r6.animate(anim, duree, mina.elastic); r7.animate(anim, duree, mina.bounce); r8.animate(anim, duree, mina.easeinout, ffin); } r1.click(fanimer); } // fin fanimation2 fanimation2(); //appel de la fonction d'animation

Le rendu

Cliquez sur le premier rectangle pour démarrer l'animation.
Actualisez la page pour revenir à l'état initial.

Remarquez que le 4ième rectangle (backin) est très lent au démarrage. Alors que le 5ième (backout) est lui très rapide.