Animations avec Snap SVG : approfondissements

Dans la page précédente nous avons découvert l'animation SVG via Snap.

Enchainer les animations

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

Le canevas SVG contenant l'animation

Actualisez la page pour relancer l'animation !

Il y a deux animations qui s'enchainent : d'abord celle concernant l'ellipse bleu marine puis celle concernant l'ellipse rouge.

Le code correspondant

<svg id="zone" width ="80%" height="auto"> </svg> <script> var s = Snap("#zone") ; s.attr({ viewBox: "0 0 600 400" }); var X = 600; var Y = 400; var ellipse = 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}); ellipse.animate({ry:100}, 4000, function(){ellipse2.animate({ry: 200}, 4000)}) ; ...

Dans la page précédente les canevas n'étaient pas "responsive". Désormais la largeur du canevas est exprimée en %. Dans ce cas il faut donc rajouter l'attribut viewBox à la balise SVG pour que les positions et tailles des formes soient calculées.
Le viewBox peut être ajouté dans l'instruction HTML ou dans le script via la méthode attr comme c'est le cas ici.

Notez l'astuce pour que les cercles et ellipses soient centrées dans le canevas ; les arguments cx & cy exprimés par rapport aux deux dernières valeurs du viewBox.
Donc si les valeurs du viewBox changent il faut mettre à jour le script ...

Ici la méthode animate a un troisième argument : une fonction de rappel ("callback") c'est à dire une fonction exécutée à la fin de l'animation.
Dans l'exemple le "callback" consiste en une deuxième animation mais qui s'applique cette fois à "ellispe2" (l'ellipse rouge).
Donc les deux animations s'enchainent !

Répéter une suite d'animations à l'infini

L'animation

Patientez quelques secondes ...

Remarquez que le requin ne sort pas de la zone d'animation.

Le code HTML correspondant

<svg id="zone2" width ="80%" height="auto" viewBox ="0 0 600 400" style ="background-image :url(fond1.jpg) ; background-size : cover ;" > <image xlink:href="requin.gif" width="100" height="70" x = '0' y ='0' id ="requin"/> </svg>

Notez que le canevas est adaptatif ; que le viewBox est défini dans l'instruction HTML ; qu'il a une image en fond en guise de décor.
J'aurais pu inséré le requin (gif animé) via le script avec la méthode image() mais je ne l'ai pas fait car je veux vous montrer ici la grande souplesse de la librairie Snap : on écrit le code d'abord en SVG traditionnel puis dès qu'on aborde l'animation on se dit qu'il est plus facile d'utiliser Snap SVG que le SMIL ou CSS ou encore JavaScript de base.

Le script correspondant

	var s = Snap("#zone2") ;
	// utiliser une zone SVG existante
	var x_max = 500 ; 	var y_max = 330; 
	var squale = Snap('#requin');
	// identifier l'image matricielle insérée dans le canevas
	function deplace()
	{
		squale.animate({x: x_max, y: y_max},3000, function(){
		squale.animate({x: 0, y: 0},3000);  });
	};
	// fonction qui fait faire un AR au requin : 3 sec à l'aller et 3 sec au retour
 	setInterval(deplace, 7000);
	// appel de la fonction tout les 6 secondes
...

Comme l'image PNG fait 100 par 70 les coordonnées maximales sont 500 et 330 compte tenu des width & height du viewBox (600 par 400).

On définit une fonction "deplace" avec deux animations qui s'enchainent.
Cette fonction est ensuite appelée toutes les 7 secondes via l'instruction basée sur "setInterval".

Les événements

Une animation est déclenchée suite à un événement.

Le canevas avec les animations

Cliquez sur le requin pour le déplacer !
Survolez le bouton de commande pour agrandir le squale ! agrandir / réduire le requin

Le code correspondant

<svg id="zone3" width ="100%" height="auto" viewBox ="0 0 600 400" style ="background-image :url(fond1.jpg) ; background-size : cover ;" > <g id="bouton"> <rect x="0" y="360" height="40" width="200" fill="gray"/> <text x="0" y="380" font-size="20" fill="white">agrandir / réduire le requin</text> </g> </svg> <script> var s = Snap("#zone3") ; var squale2 = s.image("requin.gif",50,50,100,70); // insertion d'une image matricielle dans le canevas var bouton = Snap('#bouton'); //déplacement du requin function deplace() { squale2.animate({ x: 500, y: 330}, 4000, function(){squale2.animate({x: 0, y: 0}, 4000)}) ; } //taille du requin augmente function agrandir() { squale2.animate({width: 200, height : 140},1000); } // taille du requin diminue function reduire() { squale2.animate({width: 100, height : 70},1000); } // animations : squale2.click(deplace); bouton.mouseover(agrandir); bouton.mouseout(reduire); ...

En SVG traditionnel on dessine le canevas et à l'intérieur de celui-ci une zone grise avec un texte en blanc et identifiée :"agrandir/réduire le requin".

Pour éviter toute confusion avec le script précédent (mais dans la même page) l'image PNG est ici référencée par la variable squale2.

Nous voyons deux nouveaux événements de Snap : mouseover() & mouseout().
Donc les événements Snap ressemblent aux événements jQuery. Pour chaque type d'événement et comme avec jQuery, le préfixe "on" a disparu !
Il faut écrire "click" (et non pas "onclick"), dblclick (et non pas "ondblclick"), etc ...

Passez à la suite !Animations avec Snap - suite
Retour menu