Deux arcs d'ellipse animés avec Javascript

Le code SVG de la page

<svg height = '50%' width = '50%' viewBox ="0 0 400 300" style ="border :1px solid black;" > <ellipse cx ="160" cy ="150" rx ="50" ry="20" fill ="none" stroke ="black" /> <path d= "M 110,150 A 50 20 0 1 1 210,150" fill ="none" stroke ="red" stroke-width ="4" id ='arc1' /> <path d= "M 110,150 A 50 20 0 0 0 210,150" fill ="none" stroke ="green" stroke-width ="4" id ='arc2'/> </svg>

Une ellipse et deux arc elliptiques : un arc de couleur rouge et un arc de couleur verte.
Pour chacun des ces deux arcs le rayon de rotation (troisième paramètre après A) est 0.

Le script

var arc1 = document.querySelector('#arc1'); var arc2 = document.querySelector('#arc2'); var angle = 0 ; var delta = 1 ; setInterval(animate,50); function animate() { if (angle > 90) delta*=-1; // la valeur de delta est inversée if (angle < 0) delta*=-1; angle = angle +=delta ; //incrémentation ou décrémentation de l'angle d'inclinaison var valeur_d_arc1 = "M 110,150 A 50 20 " + angle + " 1 1 210,150" ; var valeur_d_arc2 = "M 110,150 A 50 20 " + angle + " 0 0 210,150" ; arc1.setAttribute('d', valeur_d_arc1) ; arc2.setAttribute('d', valeur_d_arc2) ; }// fin fonction

Pour bien comprendre le code SVG de cette page je vous conseille de revoir auparavant la page sur les arcs elliptiques dans le tutoriel "Dessiner avec SVG".

Dans le cadre de la fonction d'animation la variable angle passe de 0 à 90 puis de 90 à 0 et le cycle se répète sans fin.
Cette variable est le troisième paramètre de l'attribut d dans chaque arc d'ellipse (angle de rotation). Retour menu