Animations SVG 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" viewBox ="0 0 600 400" > </svg> <script> var s = Snap("#zone") ; 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.

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 modifier 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

Le canevas SVG contenant l'animation

Patientez quelques secondes ...

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

Le code 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> <script> 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 ...

Notez que le canevas est adaptatif ; qu'il a une image en fond en guise de décor dont les dimensions sont adaptées au canevas.
J'aurais pu inséré l'image gif via Snap avec 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 d'abord en SVG traditionnel puis on continue en Snap.

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

La méthode Snap.animate()

Avec cette méthode la valeur d'un attribut d'un élément passe d'une valeur initiale à une valeur finale.
La syntaxe est un peu délicate : Snap.animate (de, à, function(val) {cible.attr(attribut : val)}, durée)
le plus simple est de bien étudié le code ci-dessous.

Exemple

Actualisez la page pour relancer l'animation !

Le carré se déplace de gauche à droite.
Le cercle se déplace de droite à gauche et de bas en haut.
Le requin se déplace de gauche à droite et de bas en haut et sa taille grandit !

Le script

	var s =Snap("#zone5"); 
	// dessiner trois objets
	var carre = s.rect(0, 0, 20, 20);
	var cercle =s.circle(880,380,20); 
	var requin =s.image("requin.gif",0,300,50,25); 

	// animation du carré
	Snap.animate(0,880, function (val) {rect.attr({ x: val});}, 4000);
	
	// animation du cercle
	Snap.animate(880,20, function (val) {cercle.attr({ cx: val});},5000);
	Snap.animate(380,20, function (val) {cercle.attr({ cy: val});},5000);
	
	// animation requin
	Snap.animate(0,700, function (val) {requin.attr({ x: val});},6000);
	Snap.animate(300,0, function (val) {requin.attr({ y: val});},6000);
	Snap.animate(50,200, function (val) {requin.attr({ width: val});},6000);
	Snap.animate(25,100, function (val) {requin.attr({ height: val});},6000);

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 ...

Lisez la suite !Animations avec Snap - suite
Retour menu