Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Il est possible d'animer certains objets d'un canevas via un script Snap SVG.
Cliquez dans le canevas pour démarrer l'animation !
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.
Cliquez dans le canevas pour lancer l'animation.
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.
Cliquez successivement sur les trois carrés !
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.