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.
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 ...