Animation de courbes de Béziers et arcs SVG avec JavaScript

Courbes quadratiques animées

L'oeil cligne : se ferme lentement puis s'ouvre lentement et le cycle reprend ...

Le code SVG correspondant

<svg width="50%" height="50%" viewBox ="0 0 400 200"> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path d="M 100,100 Q 200,5 300,100" id ='quadra1' style = "stroke:black; stroke-width:4px; fill:none;"/> <path d="M 100,100 Q 200,195 300,100" id ='quadra2' style = "stroke:black; stroke-width:4px; fill:none;"/> </svg>

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

Le script correspondant

function svg1()
{
 	var courbe1 = document.querySelector('#quadra1'); 
	var courbe2 = document.querySelector('#quadra2'); 
	y1 = 1 ; 	y2 = 199;
	delta = 1 ; 
	var courbe1_d; 	var courbe2_d;
	setInterval(animate,100); 
	function animate()
	{
		if (y1 > 30) delta*=-1; 
		if (y1 < 0) delta*=-1; 
		y1 = y1 + delta ;
		y2 =  y2 - delta ; 
		courbe1_d  = "M 100,100 Q 200," + y1 + " 300,100" ;
		courbe2_d  = "M 100,100 Q 200," + y2 + " 300,100" ;
		courbe1.setAttribute('d', courbe1_d) ; 		
		courbe2.setAttribute('d', courbe2_d) ; 
	}
} // fin svg1

Il faut bien sûr rajouter un instruction pour appeler cette fonction.

Le principal attribut de la balise path est d (d comme description (du chemin)).
Ici la programmation consiste à modifier la valeur de l'attribut d de chaque courbe quadratique.
On se contente de modifier les ordonnées des points d'inflexion des deux courbes (variables y1 et y2).
Tantôt la variable delta est positive et alors l'écart entre les ordonnées diminue donc les courbes s'aplatissent et tantôt delta est négatif et l'écart entre les deux ordonnées augmente et les courbes se creusent.

Courbe cubique animée

Le code SVG

<svg width="50%" height="50%" viewBox ="0 0 300 300"> <path id ="cubique" d= "M 0,150 C 100,0 200,300 300,150" style ="fill : none ; stroke-width : 2 ; stroke : red ;" /> </svg>

Pour bien comprendre le code SVG je vous conseille de revoir auparavant la page sur les courbes de Bézier cubiques dans le tutoriel "Dessiner avec SVG".

Le script

function svg2() { var courbe = document.querySelector('#cubique'); var y1 = 0 ; var y2 = 300; var delta = 1 ; var courbe_d ; setInterval(animate,50); function animate() { if (y1 > 100) delta*=-1; if (y1 < 0) delta*=-1; y1 = y1 + delta ; y2 = y2 - delta ; courbe_d = "M 0,150 C 100," + y1 +" 200,"+ y2 +" 300,150" courbe.setAttribute('d', courbe_d) ; } } // fin svg2

Il faut bien sûr rajouter un instruction pour appeler cette fonction.

Le principal attribut de la balise path est d (comme description du chemin).
Ici la programmation consiste à modifier la valeur de l'attribut d de la courbe de Bézier cubique.
On se contente de faire varier les ordonnées des deux points d'inflexion ( utilisation des variables y1 et y2).
y1 varie de 0 à 100 tandis que y2 varie de 300 à 200 puis c'est l'inverse.
Tantôt la variable delta est positive et alors l'écart entre les ordonnées diminue donc la courbe s'aplatit et tantôt delta est négatif et l'écart entre les deux ordonnées augmente donc la courbe se creuse.

Deux arcs d'ellipse animés

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>

Pour bien comprendre le code SVG je vous conseille de revoir auparavant la page sur les arcs elliptiques dans le tutoriel "Dessiner avec 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

function svg3() { 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; if (angle < 0) delta*=-1; angle = angle +=delta ; 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 svg3

Il faut bien sûr rajouter un instruction pour appeler cette fonction.

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