Quel module ou language pour interface animée html

[Xenos]

Les animations SVG peuvent être plus efficaces pour ce genre de choses.

Exemple (laissez quelques secondes à l'animation: elle est lente au début)

<?xml version="1.0" encoding="utf-8"?>

<!--

	© Xenos 2013 - jeuweb.org

	Licence LGPL, exemple de démonstration d'animation SVG.

	Lecture, exécution, modification, rediffusion (tel quel / modifié) autorisées, 

	sous condition de conserver le droit moral (aka nom des auteurs originaux).

-->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<path id="test" d="M 150 50 q 40 25 0 50" stroke="blue" stroke-width="2" fill="none"/>

	<path id="test2" d="M 150 150 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100" stroke="blue" stroke-width="2" fill="none"/>

	<script type="text/ecmascript"><![CDATA[

		document.getElementById("test").p = 1;

		document.getElementById("test2").p = 1;

		setInterval(function ()

		{

			var o = document.getElementById("test");

			var o2 = document.getElementById("test2");

			o.p *= 1.01;

			o2.p *= 1.01;

			if (o.p > 500)

				o.p = o.p%500+1;

			if (o2.p > 200)

				o2.p = o2.p%200+1;

			var y = square(o2.p/200.)*25.;

			o.setAttribute('d', "M 150 50 q "+(40+o.p)+" 25 0 50");

			o2.setAttribute('d', "M 150 "+(150-y)+" a "+(50+o2.p)+" "+(50-2*y)+" 0 0 1 0 "+(100-2*y)+" a 50 50 0 0 1 0 "+(2*y-100)+"");

		},

		15);

		function square(x) { return(x*x); };

	]]></script>

</svg>

Quelques ressources utiles:

• SVG par W3Schools et le tag path (sommairement expliqué)
  
• SVG basics + arc elliptiques (utilisés dans l'exemple)
  
• SVG par le W3C, exhaustif (puisqu'il s'agit de la norme elle-même)
  
• Lier ECMAScript (javascript) et SVG
  

En utilisant SVG, tu pourras facilement modifier l'animation, changer les couleurs, la vitesse, etc, sans passer par des frames.
En revanche, l'animation SVG n'est pas utilisable dans un canvas (sauf via une lib JS comme spécifié dans le post SO ci-dessus), ni même dans une balise IMG.
Pour afficher l'animation, il faut utiliser une balise object. Pour les informations sur la balise object, le tuto W3Schools est bien fichu.