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.

Rythme de l'animation : exemple 1

Dans le cadre d'une transition ou animation CSS on peut demander que la progression ne soit pas linéaire.
Et bien c'est la même chose avec les animations Snap SVG.

Jusqu'à présent dans mes exemples les méthodes d'animation ont deux voire trois paramètres.

Rappel sur les transitions et animations CSS

Il faut peut-être utile de rappeler que dans le cadre des transitions et animations CSS le rythme des changements n'est pas forcément linéaire.

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).
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.
Retour menu