CMPS 335 Advanced Web Publishing JavaScript Programming


Animation

Animation is movement of graphical images on a computer screen.  There are many ways to include animation in Web pages.  Two of these methods are GIF animation and JavaScript animation.  Both methods require a series of image frames.  Each image frame is an image file.  Animation is accomplished by displaying the series of images sufficiently fast, about 30 or more images per second, thatour eyes see continuous movement.

GIF animation is the easiest way to create animation for non-programmers, but it requires an animation software such as Paint Shop Pro.  The image software converts the individual GIF image files to an animated GIF file.

Examples of Animated GIF: Car Race   Bouncing Ball

Creating JavaScript animation requires JavaScript programming.  The first step in creating an animation is to create the images themselves.  It is important to make sure that each image frame of the animation is created with the same height and width attributes of the IMG tag.  Either the setInterval() or setTimeout() method can be used to display the series of images consecutively, with time delays, to create an illusion of animation.  Each iteration of the setInterval() or setTimeout() method changes the image frame displayed by the IMG tag.

Click Car-race for an example of JavaScript animation

One advantage of JavaScript animation is that you can use JPEG images for animation.  The JPEG image format usually gives you much higher quality images.  The series of individual images used in creating the above car-race animation is shown below: