WebDevelopersNotes logo

home-icon Home / Graphics / Animated Gifs: a detailed discussion

Animated Gifs: a detailed discussion

animated-gifs-detailed

Animated gif of a running dogAnimated gifs actually contain a series of images (or frames) that are displayed one after the other and give a semblance of animation, just as in traditional animation techniques. Also, in animated gifs you can control the time for which each frame is displayed.

On this page, I shall dissect an animated gif so that you can understand them better. One important point though. As I mentioned above, the gif consist of static images and “appears” to be animated. Animation is just a semblance of motion. The display time for frames (you can set this up individually) decides how the animation will finally look.

Sponsored Links

The image consists of 8 frames each playing for 10 milliseconds each.

Frame 1: 10 millisecondsFrame 1 : 10 milliseconds

Frame 2: 10 millisecondsFrame 2 : 10 milliseconds

Frame 3: 10 millisecondsFrame 3 : 10 milliseconds

Frame 4: 10 millisecondsFrame 4 : 10 milliseconds

Frame 5: 10 millisecondsFrame 5 : 10 milliseconds

Frame 6: 10 millisecondsFrame 6 : 10 milliseconds

Frame 7: 10 millisecondsFrame 7 : 10 milliseconds

Frame 8: 10 millisecondsFrame 8 : 10 milliseconds

Our animated gif of a running dog (above) starts at frame no. 1 which plays for 10 milliseconds and then frame no. 2 is displayed and so on. When the last frame (no. 8) is reached, the image loops and displays frame no. 1 once again. You can specify the number of loops you want in the animated gif or you can set it to loop indefinitely.

In the above animated gif example, each frame is played for 10 milliseconds. Now, let us change this to 25 milliseconds as in the image below.
Animated gif of a running dogYou will notice that the dog has started to run slowly and its motion is jerky because the frames in the animated gif are displayed for a longer period (25 milliseconds instead of the 10 milliseconds like in the original). If you want to create a slow running dog but with smoother motion you would have to create many more frames especially those that go in-between the start and the end frames.

How to create animated gifs

Animated gifs can be created or modified using any of the freeware or shareware available. I’m particularly fond of Animation Shop from Jasc (www.jasc.com). The program comes bundled with Paint Shop Pro. Most animation programs have many built in effects for images. Here is the Explode image effect from Animation Shop.

Explode image effect of Animation Shop

Let us now see how we can create a simple animated Gif file using Animation Shop. By the by, you can use your favorite animated gif creator – Though the tools might change, the logic of creating animated gifs is the same.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Such was the media hype and frenzy around the launch of the iPad that 300,000 were sold on the very first day! [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy