Dessiner avec SVG - sommaire

Animations avec Snap SVG : approfondissements

Dans le chapitre précédent les animations étaient simultanées.
Quid de l'enchainement d'animations ?

Enchainer les animations - répéter à l'infini une séquence d'animations

La méthode animate peut avoir un troisième argument : une fonction de "callback".

Le canevas

Cliquez dans le canevas pour lancer l'animation.
Actualisez la page pour revenir à l'état initial.

Le code correspondant

HTML : un canevas identifié "zone1".

Le script :

	var s = Snap("#zone1") ; 
	s.attr({ viewBox: "0 0 600 400" });
	var X = 600; 	var Y = 400;
	var ellipse1 = s.ellipse(X/2, Y/2,100,200).attr({ fill: 'Navy',fillOpacity : .5});
	var ellipse2 =s.ellipse(X/2, Y/2,200,100).attr({ fill: 'red',fillOpacity : .5});
	// fonction avec enchainement de deux animations 
	function fanimer()
	{
		ellipse1.animate({ry:100}, 4000, function(){ellipse2.animate({ry: 200}, 4000)}); 
	}
	// appel fonction 
	s.click(fanimer); 

Remarquez l'astuce pour que les ellipses soient bien centrées : on crée deux variables X & Y qui correspondent aux limites (les deux dernières valeurs du viewBox) du repère cartésien.
Les paramètres de position des ellipses (cx & cy) deviennent donc égales X/2 et Y/2.

Dans la fonction "fanimer" on définit un enchainement de deux animations grâce à un troisième argument à la méthode animate(). Cette fonction de callback définit une animation sur l'objet "ellipse2".
Les deux premiers arguments quant à eux, définissent une animation sur l'objet "ellipse1".

Répéter une séquence d'animations à l'infini

Un carré de couleur "olive" et ombré fait un AR dans le canevas.

Le code correspondant

Le HTML :

< svg  width ="80%" viewBox ="0 0 600 400" id="zone2" 
	style ="background : radial-gradient(darkgreen, green, lime,palegreen );" >

Le canevas est rempli avec un dégradé radial CSS3.

Le script :

	var s = Snap("#zone2") ;
	var x_max = 550 ; 	var y_max = 350;
	var ombrage = s.filter(Snap.filter.shadow(10,10, .5));
	var carre =s.rect(0,0,50,50).attr({fill : "olive", filter : ombrage}); 
	function fdeplace()
	{
		carre.animate({x: x_max, y: y_max},3000, function(){
			carre.animate({x: 0, y: 0},3000);  });
	};
	fdeplace(); 	// pour ne pas patienter 6 secondes !
	setInterval(fdeplace, 6000);
	// appel de la fonction tout les 6 secondes

Piqure de rappel sur les filtres en Snap SVG et plus précisément l'ombrage.

Comme le canevas fait 600 par 400 et que le carré fait 50 par 50 les valeurs de x_max& y_max sont respectivement 550 et 350 afin que le carré ne sorte jamais du canevas.

Observez bien la définition de la fonction fdeplace() : une instruction unique basée sur la méthode animate() avec trois arguments dont une fonction de callback. Ainsi vous générer un aller-retour.

Notez l'utilisation d'une méthode bien connue du JS standard : setInterval(fonction, intervalle de temps) pour appeler régulièrement la fonction fdeplace().