Image Animation using JavaScript

Now you need to create two functions, one that animates the images, and one that controls the frame rate. The first function, which switches the images in sequence, looks like this:

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

In the tag of the image that you want to be animated, you must include NAME = "waveanim".
But where is the delay? This next function, which actually runs before the image switching function, and sets the delay time for the animation:

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

This function just runs the Switch function, and then waits for a specified amount of time before running Switch again (and displaying the next frame). The amount of time it waits is determined by the variable delay, which by default has been set to 100, or 1/10 of a second.

To change the speed of the animation, just create a button to activate this function, which speeds it up:

    function fast() {
    delay-=10; <-- decrease delay by .1 seconds
    if(delay < 0) delay = 0;
    }

...and create another button to activate this one, which slows it down:

    function slow() {
    delay+=10; <-- increase delay by .1 seconds
    if(delay >4000) delay = 4000;
    }

Finally, to make the animation run as soon as all of the images are loaded, add this this event handler to the BODY tag:

    onLoad = "animate()";

02/05/97

slide: 49/50