Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans le chapitre précédent les animations étaient simultanées.
Quid de l'enchainement d'animations ?
La méthode animate peut avoir un troisième argument : une fonction de "callback".
Cliquez dans le canevas pour lancer l'animation.
Actualisez la page pour revenir à l'état initial.
HTML : un canevas identifié "zone1".
Le script :
var s = Snap("#zone1") ; s.attr({ viewBox: "0 0 600 400" }); var X = 600; var Y = 400; var ellipse1 = 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}); // fonction avec enchainement de deux animations function fanimer() { ellipse1.animate({ry:100}, 4000, function(){ellipse2.animate({ry: 200}, 4000)}); } // appel fonction s.click(fanimer);
Remarquez l'astuce pour que les ellipses soient bien centrées : on crée deux variables X & Y qui correspondent
aux limites (les deux dernières valeurs du viewBox) du repère cartésien.
Les paramètres de position des ellipses (cx & cy) deviennent donc égales X/2 et Y/2.
Dans la fonction "fanimer" on définit un enchainement de deux animations grâce à un troisième argument à la méthode
animate(). Cette fonction de callback définit une animation sur l'objet "ellipse2".
Les deux premiers arguments quant à eux, définissent une animation sur l'objet "ellipse1".
Un carré de couleur "olive" et ombré fait un AR dans le canevas.
Le HTML :
< svg width ="80%" viewBox ="0 0 600 400" id="zone2" style ="background : radial-gradient(darkgreen, green, lime,palegreen );" >
Le canevas est rempli avec un dégradé radial CSS3.
Le script :
var s = Snap("#zone2") ; var x_max = 550 ; var y_max = 350; var ombrage = s.filter(Snap.filter.shadow(10,10, .5)); var carre =s.rect(0,0,50,50).attr({fill : "olive", filter : ombrage}); function fdeplace() { carre.animate({x: x_max, y: y_max},3000, function(){ carre.animate({x: 0, y: 0},3000); }); }; fdeplace(); // pour ne pas patienter 6 secondes ! setInterval(fdeplace, 6000); // appel de la fonction tout les 6 secondes
Piqure de rappel sur les filtres en Snap SVG et plus précisément l'ombrage.
Comme le canevas fait 600 par 400 et que le carré fait 50 par 50 les valeurs de x_max& y_max sont respectivement 550 et 350 afin que le carré ne sorte jamais du canevas.
Observez bien la définition de la fonction fdeplace() : une instruction unique basée sur la méthode animate() avec trois arguments dont une fonction de callback. Ainsi vous générer un aller-retour.
Notez l'utilisation d'une méthode bien connue du JS standard : setInterval(fonction, intervalle de temps) pour appeler régulièrement la fonction fdeplace().