SVG & JavaScript : Animation automatique d'un objet SVG (un rond)

Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse et le cycle reprend à l'infini ...

Le code de la page

Le code SVG

<svg width="50%" height="auto" viewBox ="0 0 400 400" style = 'background : yellow; ' > <circle cx="200" cy="200" r="10" style =" fill : red ; fill-opacity : 0.1;" /> </svg>

Pour que l'image vectorielle s'adapte à tous les écrans (et donc ne soit jamais rognée), les dimensions du canevas SVG sont exprimées en pourcentage.

Les coordonnées initiales de l'objet SVG (le rond) sont alors exprimées par rapport au repère défini par le viewBox.
La notion de viewBox est présentée dans le tuto "Dessiner avec SVG" dans le même site.

Le script

var X = 400 ; //largeur définie dans le viewbox var rond = document.querySelector('circle') ; var rayon = rond.getAttribute('r'); var opacite =rond.style.fillOpacity ; rayon = parseInt(rayon) ; opacite =parseFloat(opacite); var v_rayon = 2; var v_opacite = 0.01 ; setInterval(animate,100) ; function animate() { if (rayon == X/2) { v_rayon = -2 ;v_opacite = -0.01; } if (rayon == 10) { v_rayon = 2 ; v_opacite = 0.01; } rayon += v_rayon ; opacite += v_opacite; rond.setAttribute('r',rayon) ; rond.style.fillOpacity = opacite ; } // fin fonction animate

Attention les dimensions (width et height) du canevas SVG sont exprimées en pourcentage (et non pas en pixels) donc il faut exprimer la valeur maximale du rayon du rond à la moitié de la largeur définie dans le viewBox.
Si on peut récupérer très facilement les dimensions du canevas SVG (avec la méthode getAttribute) c'est beaucoup plus délicat de récupérer une des valeurs de l'attribut viewBox ...
Donc ici je me suis contenté d'écrire l'instruction : var X = 400; .
Conséquence pratique ; si les valeurs du viewBox sont modifiées dans le code SVG il faudra aussi modifier cette instruction dans le script.

Continuons l'examen du script.

rond est une variable objet qui référence le cercle SVG.
var rayon = rond.getAttribute('r') : cette instruction permet de récupérer la valeur de l'attribut r du cercle.
Mais attention la valeur primitive de la variable rayon est la chaîne "10" (et non pas l'entier 10).
Et en JavaScript "10" + 2 donne 102 ! Il y a en effet concaténation (puisque l'un des termes est une chaîne).
Il faut donc avant toute tentative d'incrémentation de la variable rayon convertir cette dernière en un entier avec la fonction parseInt.
var opacite =rond.style.fillOpacity : la variable opacité récupère la valeur de la propriété de style fill-opacity. Mais il faut écrire fillOpacity en JavaScript. La variable opacite récupère une chaîne numérique. Il faut donc la convertir sous forme d'un réel avec la fonction parseFloat.

C'est la fonction JS animate qui modifie le rayon du cercle et son opacité. Cette fonction est appelée tous les 100 millisecondes donc 10 fois par seconde via la fonction setInterval.

Etudions maintenant de plus près la fonction animate.

Pour changer en JS la valeur d'un attribut il faut utiliser la syntaxe : élément.setAttribute("attribut",valeur).
Exemple : rond.setAttribute('r',rayon)

Pour changer en JS la valeur d'une propriété de style il faut utiliser la syntaxe : élement.style.propriété = nouvelle valeur

La variable v_rayon est tantôt égale à 2 et tantôt égale à -2. Donc l'instruction rayon += v_rayon incrémente ou décrémente la valeur de rayon.
La valeur de rayon est au maximum de X/2 et au minimum de 10.

La variable v_opacite est tantôt égale à 0.01 et tantôt égale à -0.01. Donc l'instruction opacite += v_opacite incrémente ou décrémente la valeur de opacite.


Retour menu