SVG & JavaScript : animation automatique de clones

Dans le tuto "dessiner avec SVG" vous avez vu comment créer des modèles (voire des modèles de modèles) et comment cloner ces modèles.
Maintenant je vais vous montrer comment animer ces clones avec JavaScript.

Le code HTML et SVG de la page (extraits)

... <body> ... <svg viewBox ="0 0 600 400" width="80%" height="auto" style ='background : lime ; box-shadow : 5px 5px 5px grey; '> <defs> <g id = 'voiture'> <rect x = '14' y ='2' width ='14' height ='8' fill = 'gray' /> <circle cx = '10' cy='20' r = '5' fill = 'silver' /> <circle cx = '30' cy='20' r = '5' fill = 'silver' /> </g> <g id ='auto_rouge'> <desc>Modèle basé sur voiture</desc> <path d= 'M 0,20 v-10 h10 v-10 h 20 v 10 h 10 v 10 z' fill = 'red' /> <use xlink:href="#voiture" x="0" y="0" /> </g> <g id ='auto_jaune'> <desc>Modèle basé sur voiture</desc> <path d= 'M 0,20 v-10 h10 v-10 h 20 v 10 h 10 v 10 z' fill = 'yellow' /> <use xlink:href="#voiture" x="0" y="0" /> </g> </defs> <use xlink:href="#auto_rouge" x="0" y="0" id ='automobile' /> <use xlink:href="#auto_jaune" x="90%" y="10%" /> </svg> <button type = 'button'>Arrêter animation </button> ...

Pour que l'image vectorielle s'adapte à tous les écrans, ses dimensions sont exprimées en pourcentage. Il faut donc rajouter alors obligatoirement un viewBox dans la balise SVG sinon les formes ne peuvent être dessinées puisqu'il n'y a pas de répère.

On définit un modèle identifié voiture sans carroserie.
A partir de ce modèle on définit deux modèles : auto_rouge et auto_jaune avec respectivement une carroserie rouge ou jaune.
On clone ces deux derniers modèles dans le canevas. Le clone du modèle auto_rouge est identifié automobile. C'est lui qui va être déplacé.

Le script de la page

var auto = document.querySelector('#automobile'); var X =600; // X récupère largeur du viewBox var x = auto.getAttribute('x'); x = parseInt(x); var y = auto.getAttribute('y'); y = parseInt(y); var delta = 1; var timer = setInterval(animate,100) ; function animate() { if (x >=X-40) delta = -1 ; if (x <= 0) delta = 1 ; x = x + (delta * 6) ; y = y + (delta * 4) ; auto.setAttribute('x',x) ; auto.setAttribute('y',y) ; } document.querySelector('button').onclick = function() {clearInterval(timer) ; alert('fin animation') ; }

Le script est dans la partie BODY (après tout le code HTML) et n'est pas inclus dans une fonction. Donc il s'exécute automatiquement.
On se contente ici d'animer le clone identifié auto (copie du modèle "auto_rouge").

Le script récupère le positionnement de l'objet SVG identifié auto dans le repère donc même si dans le code SVG vous modifiez le positionnement de l'objet "auto" le code JavaScript sera toujours valide. Pratique !

Faut-il rappeler que les valeurs retournées par la méthode getAttribute sont de type string et que donc il convient de les convertir en entier avant toute éventuelle addition car le caractère + est ambigu en JavaScript (addition ou concaténation).
Par contre les conversions sont automatique pour les autres opérations.

Grâce à la fonction animate l'objet auto est déplacé selon une diagonale.
Cette fonction est appelée 10 fois par seconde. Cette répétition est nommée timer afin qu'elle puisse arrêtée par l'internaute : clearInterval(timer)
La variable x est tantôt incrémentée de 6 et tantôt décrémentée de -6 car delta est tantôt égal à 1 et tantôt égal à -1.
La variable y est tantôt incrémentée de 4 et tantôt décrémentée de -4 car delta est tantôt égal à 1 et tantôt égal à -1.
Pourquoi 6 et 4 ? Parce que le rapport largeur / hauteur du canevas SVG est de 6/4 (600 sur 400).
Retour menu