SVG & jQuery : animation automatique de clones

Thème déjà évoqué plus haut mais ici la programmation de l'animation est faite avec jQuery et la vitesse de déplacement n'est plus constante.

Le code SVG

<svg width="80%" height="auto" style ='background : lime ; box-shadow : 5px 5px 5px grey;' viewBox="0 0 600 400"> <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'> <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'> <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>

Le code SVG est strictement identique à celui de la page dans laquelle l'animation avait été faite en JS traditionnel.
Donc pour le commentaire du SVG je vous renvoie à la page : "Déplacement automatique de clones" dans la partie "Animer objets SVG avec JavaScrit.

Le script

Attention à la différence de la version en JS traditionnel, ici la vitesse de déplacement de l'auto rouge n'est pas constante mais aléatoire !

var X = 600; var Y = 400; var x = $("#automobile").attr("x"); x = parseInt(x); var y = $("#automobile").attr("y"); y = parseInt(y); var delta_x = 1; var delta_y =1 ; var timer = setInterval(animate,50) ; function animate() { // gestion des effets de bord if (x > X-40) delta_x = -1 ; if (y > Y-30) delta_y =-1; if (x <= 0) delta_x = 1 ; if (y <=0) delta_y =1; // génération d'un entier reel = Math.random() ; entier = Math.floor(reel*10) ; // nouvelles coordonnées auto x = x + (delta_x * entier) ; y = y + (delta_y * entier) ; $("#automobile").attr("x",x); $("#automobile").attr("y",y); } $("button").click(function() {clearInterval(timer) ; alert('fin animation') ; });

Les variables x et y récupèrent les coordonnées initiales de l'objet SVG identifié "automobile".

Afin que la voiture rouge ne sorte jamais du canevas les variables delta_x et delta_y sont tantôt égales à 1 et tantôt à -1. Elles changent de valeur lorsqu'un bord de canevas est atteint.

La fonction animation est exécutée toutes les 50 millisecondes donc 20 fois par secondes (1000/50).
Dans le cadre de la fonction animation la vitesse de déplacement de l'auto rouge est générée de façon aléatoire (un entier inférieur à 10).
Retour menu