Animation d'Images

Pour créer une animation comme celle-ci, il faut en premier lieu créer une serie d'image. Puis, pour animer ces image, il faut télécharger ces images dans un tableau.
Primo, definissons les variables pour delai, le nombre d'images et l'indicateur de l'image courante:

    delay = 100;            <-- delai entre image (.1 sec.)
    imgNumber = 0;          <-- indicateur de l'image courante 
    totalimgNumber = 8;     <-- nombre d'images
    anim = new Array();     <-- tableau d'images

Secondo, téléchargeons toutes les images dans le tableau.

    for (i = 0; i < totalimgNumber; i++) {
      anim[i] = new Image (239, 390);
      anim[i].src = 'wave' + (i + 1) + '.gif';
    }

Tertio, il nous faut créer 2 fonctions; une pour permuter les images et une pour controler le delai:

    function Switch() {                
        document.waveanim.src = anim[imgNumber].src;
        imgNumber++;
        if(imgNumber >= totalimgNumber) imgNumber = 0;
    }

Dans la balise IMG il faut inclure NAME = "waveanim".

    function animate() {
       Switch();
       setTimeout( "animate()", delay);
    }

Cette fonction ne fait qu'appeler Switch et attend pour un temps determiné (delai) avant d'apperler Switch encre une fois.

Pour changer la vitesse d'animatio, il suffit de changer la variable delay:

    function fast() {
       delay-=10; <-- decremente delay de .1 secondes
       if(delay < 0) delay = 0;
    }

    function slow() {
       delay+=10; <-- incremente delay de .1 secondes
       if(delay >4000) delay = 4000;
    }

Finallement, pour commencer l'animation, il faut executer animate() des que la page est chargée:

    onLoad = "animate()";