Dessiner avec SVG - sommaire

Snap SVG : initiation aux animations

Il est possible d'animer certains objets d'un canevas via un script Snap SVG.

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.