devxlogo

Move Animated GIFs Across a Web Page

Move Animated GIFs Across a Web Page

Question:
I’m trying to make an animated GIF move across a Web page, but the animation freezes in both Internet Explorer 4 and Netscape Navigator 4. I tried to do this with an applet instead of an animated GIF and it works, but the color that I have made transparent in the images is no longer rendered as transparent, but rather white so the effect is lost. Also, when I use an applet moving across a Web page, it disregards the specification of the z-index values?it always stays on top.

Answer:

A browser has a lot of work to do, especially in the day and age of Dynamic HTML, XML parsing, changing text blocks, and so forth. Animation is widely touted as a feature of Dynamic HTML, yet ironically its support for animation is pretty limited. This is especially true when you attempt to mix DHTML with animated GIFs.

An animated GIF is not a single image. Instead, it is actually a series of images that are combined together in one of a couple different ways. The simplest GIF images (although usually the largest) consist of a sequence of complete images, along with a possible color to map a transparent background. To save space, however, many GIFs use a difference principle?only those pixels that change colors from one frame to next are written to successive layers. For flat images, this procedure can usually cut down the size of an animated GIF by 60% or more. However, it has nasty consequences if you wish to use the GIF for animation. The browser displays an animated GIF by rendering it to an offscreen buffer, drawing only those pixels that aren’t transparent. If the GIF moves, then the render time takes longer (or the GIF image seems only partially displayed) because the image can’t rely on having the previous frame to draw on (no pun intended).

Using full frame GIFs is one solution, although it does force a longer download time. However, another principle of Web animation (and computer animation of any sort) is that you need to make sure that the computer is given time to draw the graphic in the first place. For example, if you run this script on an image, you would expect the image to move smoothly across the page until it was at top=250, left=400:

The renderers might allow this image to smoothly move across the screen in the browser (though they probably shouldn't) but more likely you'll see the image start at one point on the screen then mysteriously jump to the end point, bypassing the intervening points. The reason for this is that you're taking control of the browser pretty much completely here. On a fast machine, IE5 can do limited multi-tasking (which is why you may actually see some intermediate frames), but in general, the routine doesn't give the renderer the opportunity to draw the images. However, you can use the SetTimeout or SetInterval functions to pass some of the operational cycles back to the browser. For example, the previous function could be split apart as follows:

While this code is a little more complex, it gives the processor a chance to perform its own tasks, such as cursor changes, text updates, event handling, and so on. It also lets the internal component that handles the display of animated GIFs do all of its own bookkeeping, so that your image will animate. The best interval for displaying should be small enough to give the illusion that the animation is a seamless whole, and still enough to give the browser time to draw the image in its entirety.

In general, you should strive to make sure that your GIF image's frame rate matches (or is some multiple of) the interval between drawing times in the setTimeout call. This will cut down on "splitting" animations, where the top of the image renders then the image is moved and the bottom renders, giving the appearance that the image has split in half. If you set the number of frames per second in the image to 10 and the setTimeout interval to 5, for example then it will give the GIF image enough time to display two frames completely before the image is moved.

This example proves the paradox of DHTML?while it was billed as an animation engine, native DHTML implementations typically don't do much work when animation is involved. IE4 (and IE5) come with a number of animation tools such as sequencers that take some of the work out of putting together a convincing animation, although they can be difficult to use at times. IE5 also comes with HTML+TIME, an addition to HTML that is designed for handling some of the sequencing nightmares normally associated with animation. Additionally, you can work with such products as Macromedia Director or Flash Shockwave, which contain powerful, sophisticated animations that can tie into your Web page.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist