SVG & jQuery : Animation automatique d'un rond

Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse ...
Le cycle se répète à l'infini.

Ce thème a été traité en JS traditionnel. Ici l'animation est programmée en jQuery.

Le code de la page

Le code HTML & SVG

Il ne faut surtout pas oublier de charger la librairie jQuery.

<script src ="jquery.js"></script> ... <body> ... <svg width="40%" height="auto" style = 'background : yellow; ' viewBox ="0 0 400 400"> <circle cx="200" cy="200" r="10" style ="fill : red ; fill-opacity : 0.1;" /> </svg>

Attention la transparence de l'objet est passée en propriété de style et non pas en attribut.
Donc pour changer la valeur de ce paramètre via jQuery il faudra utiliser la méthode css() !

Le script

var X= 400; var rayon = $("circle").attr("r"); var opacite =$("circle").css("fillOpacity"); // conversion des chaînes en numériques rayon = parseInt(rayon) ; opacite =parseFloat(opacite); var vrayon = 2; var vopacite = 0.01 ; var animation = setInterval(animate,100) ; function animate() { if (rayon >= X/2) { vrayon = -2 ; vopacite = -0.01; } if (rayon <= 10) { vrayon = 2 ; vopacite = 0.01; } rayon = rayon + vrayon ; opacite = opacite + vopacite; $("circle").attr("r",rayon); $("circle").css("fillOpacity",opacite); } // fin fonction animate

Les méthodes attr() et css() retournent toujours une chaîne (donnée de type string). Donc avant toute tentative d'incrémentation il faut convertir ces chaînes en numériques (entier ou réel) avec respectivement les fonctions parseInt() et parseFloat().

L'un des avantages de jQuery c'est non seulement la concision du code mais aussi sa simplicité. Ainsi ce sont les mêmes méthodes pour récupérer ou modifier les attributs, propriétés ou contenus des noeuds !
On dit que ces méthodes sont en même temps "getters" et "setters" ! Excusez moi des anglicismes.

Si vous voulez en savoir plus sur le JavaScript et son Framework jQuery il y a dans le même site un tuto "JavaScript & jQuery".
Retour menu