|
|
for May 27, 1996: How to Create Animations Using JavaScript
Animated GIFs are an easy way to do animation. But it is difficult to control the speed of a GIF animation and it may play back at varying and erratic speeds. Now with Netscape 3.0's ability to change images right on the page, it is possible to create and control animations using JavaScript. The animation below, which is probably still loading, is an example of this. Using the faster and slower buttons, you can control the speed of the animation. 
To create an animation like this, you must first create a series of images. Then, to play those images back easily, the images must be preloaded into arrays. For the animation of the waving stick figure, I created eight images and named them "wave1.gif", "wave2.gif", and so on. In these examples, that is what I will be using. First define these variables, which define the delay and total number of images:
delay = 100; <-- delay time of the animations (.1 sec.)
imgNumber = 0; <-- number of the image in the animation
totalimgNumber = 8; <-- total number of images
anim = new Array(); <-- images array
Next, preload all of the images into an arrays; this can be done very efficiently using a for loop.
for (i = 0; i < totalimgNumber; i++) {
anim[i] = new Image (239, 390);
anim[i].src = 'wave' + (i + 1) + '.gif';
}
It is important to note that the "wave" is the prefix of the filename on all of the images in my animation. You can have whatever prefix you want, as long as each prefix is followed by 1, 2, 3 and so on until the last image. In this animation, the last image is "wave8.gif", and that's where the animation resests.
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;
}
This function simply increases imgNumber by one each time it is run. Then, the respective image in the anim image array is displayed on the page. This effect is what creates the animation. It is important to note that when this function changes the images on the page, it reffers to the image object named "waveanim". So, 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()";
|
| ||||||||||||||||||||
