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.

Share the Post:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as