Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site
Vous savez qu'avec le SMIL et en particulier la balise ANIMATE on peut enchainer les animations et on peut répéter à l'infini
une séquence d'animations.
Peut-on faire la méme chose avec Snap SVG ?
Vous savez qu'avec le SMIL et en particulier la balise ANIMATE on peut enchainer les animations et on peut répéter à l'infini
une séquence d'animations.
Peut-on faire la méme chose avec Snap SVG ?
La réponse est OUI !
La méthode animate peut avoir un troisième argument : une fonction de "callback".
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.
Attention, ça devient un peu compliqué au niveau des accolades et parenthèses.
Le canevas est responsive et l'attribut "viewBox" est rajouté dans le script.
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 mettre à jour le script : changer les valeurs des variables X et Y.
Ici la méthode animate a ici 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 !
Patientez quelques secondes ...
Remarquez que le requin ne sort pas de la zone d'animation.
J'aurais pu inséré le requin (gif animé) via le script avec la 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 le code d'abord en SVG puis dès qu'on aborde l'animation on se dit qu'il est plus facile d'utiliser Snap SVG que le SMIL ou CSS ou encore JavaScript.
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 aller-retour au requin :
// 3 sec à l'aller et 3 sec au retour
deplace();
setInterval(deplace, 6000);
// appel de la fonction tout les 6 secondes
...
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" contenant les deux animations qui s'enchainent.
Cette fonction est ensuite appelée toutes les 6 secondes via l'instruction basée sur la méthode "setInterval".
Méthode setInterval() bien connue de ceux qui connaissent l'API JavaScript Canvas.
Une animation peut être déclenchée suite à un événement.
Cliquez sur le requin pour le déplacer !
Survolez le bouton de commande pour agrandir le squale !
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 on dessine le canevas et à l'intérieur de celui-ci un rectangle 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 web) 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 ...