Dessiner avec SVG - sommaire

Snap SVG : initiation aux animations

Il est possible d'animer certains objets d'un canevas via un script Snap SVG.
Le framework propose la méthode animate().
Dans le script on peut aussi créer un modèle d'animation (
Snap.animation()) et l'appliquer ensuite à plusieurs objets.

Exemple 1 : fusion de cercles

Cliquez dans le canevas pour démarrer l'animation !

Le code correspondant

HTML : <svg width ="80%" viewBox ="0 0 600 400" id ="zone1" >

Le script :

	var s = Snap("#zone1") ;
	var grand = s.circle(300,200,100);
	// dessiner un grand cercle
	grand.attr({fill: "green", stroke: "black", strokeWidth: 5});
	// colorier le cercle
	var petit1 = s.circle(200,200,70);
	// dessiner un petit cercle
	var petit2 = s.circle(400,200,70);
	// dessiner un autre petit cercle
	var groupe = s.group(petit1, petit2);
	// regroupement des deux petits cercles en un groupe
	groupe.attr({fill : "none",stroke :"yellow", strokeWidth :4});
	// colorier le groupe de formes
	function fanimer()
	{
		petit1.animate({cx : 300 , r : 100}, 6000);
		// animer petit cercle de gauche
		petit2.animate({cx: 300, r:100}, 6000);
		// animer petit cercle de droite
	}
	// appel fonction fanimer
	s.click(fanimer)

Le script contient désormais une fonction d'animation reposant sur l'utilisation de la méthode animate()
petit1.animate({cx: 300, r:100}, 6000) : l'animation s'applque au premier petit cercle.
Cette animation dure 6 secondes (6000 millisecondes) et concerne deux paramètres : r & cx ; les valeurs indiquées correspondent aux valeurs finales. Donc ce rond grandit et se déplace vers la droite.

petit2.animate({cx: 300, r:100}, 6000) : l'animation s'applique au deuxième petit cercle qui grandit et se déplace vers la gauche.
Donc les trois cercles fusionnent en un seul à l'issue de l'animation.

Exemple 2 : fusion de deux carrés

Cliquez dans le canevas pour lancer l'animation.

Le code correspondant

HTML : < svg id="zone2" width ="80%" >
J'ai oublié l'attribut viewBox dans la balise SVG ...

Le script :

	var s = Snap("#zone2") ;
	s.attr({ viewBox: "0 0 700 500" });
	var carre1 = s.rect(20,20,30,100).attr({ fill: 'red' });
	// premier carré rempli de vert
	var carre2 = s.rect(150,20,30,30).attr({ fill: 'blue'});
	// deuxième carré rempli de bleu
	var animer_carre = Snap.animation({ width: 100, height: 100, fill: 'purple', x: 300, y: 200 }, 4000);
	// définition d'un modèle d'animation qui fixe les valeurs finales d'un carré
	function fanimer()
	{
		carre1.animate(animer_carre);
		carre2.animate(animer_carre);
	}
	// appel de la fonction d'animation
	s.click(fanimer); 

var animer_carre = Snap.animation({ width: 100, height: 100, fill: 'purple', x: 300, y: 200 }, 4000)
Grâce à la méthode Snap.animation() on peut définir un modèle d'animation puis appliquer ensuite ce modèle à plusieurs objets du canevas ayant des paramètres identiques.

Exemple 3 : transformation de carrés sur clic

Le canevas

Cliquez successivement sur les trois carrés !

Le code correspondant

HTML : <svg id="zone3" width ="80%" viewBox ="0 0 600 400" >

Le script :

	var s = Snap("#zone3") ;
	var carre3 = s.rect(50,50,40,40 ).attr({ fill: 'red'});
	// clonage
	var carre4 =carre3.clone().attr({y: 150, fill :"green"}); 
	var carre5 = carre3.clone().attr({y: 250, fill :"blue"}); 
	// modèle d'animation
	var transform_modele = Snap.animation({transform: 't200 s2 r45'},4000);
	// l'animation consiste en un transformation complexe : translation, changement d'échelle et rotation
	
	// définition d'une fonction d'animation basée sur un modèle d'animation
	function fanimer() {this.animate(transform_modele);}
	
	// appel fonction fanimer
	carre3.click(fanimer);
	carre4.click(fanimer);
	carre5.click(fanimer);

var transform_modele = Snap.animation({transform: 't200 s2 r45'},4000) : le modèle d'animation porte sur une transformation complexe en 4 secondes.

function fanimer() {this.animate(transform_modele);} : la fonction "fanimer" applique cette transformation à l'objet courant.