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 (image adaptative), la largeur du canevas SVG est exprimée en pourcentage. Les positions et dimensions des formes seront calculées grâce aux valeurs de l'attribut viewBox.
Rappel : notion cruciale 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

Il est très difficile dans le cadre d'un script de récupérer les différentes valeurs de l'attribut viewBox.
Donc je me contente d'écrire l'instruction : var X = 400; // largeur définie dans le viewBox
Donc attention si vous décidez de modifier les valeurs de l'attribut viewBox il faudra corriger votre script !!!

Continuons l'examen du script !

rond est une variable qui référence la forme 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 chaine "10" (et non pas l'entier 10). Et comme en JavaScript "10" + 2 donne 102 (Il y a en effet concaténation puisque l'un des termes est une chaine). Il faut donc avant toute tentative d'incrémentation de la variable rayon convertir cette dernière en un entier avec la fonction parseInt (ou number).

var opacite =rond.style.fillOpacity : la variable opacité récupère la valeur de la propriété de style fill-opacity. Mais dans un script il faut écrire fillOpacity.
La variable opacite récupère une chaine. Il faut donc la convertir sous forme d'un décimal 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. Exemple : rond.style.fillOpacity = opacite

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


Retour menu