Animated images using Javascript

Last updated on January 24, 2012. Tags: animated GIF, animation, APNG, Javascript animation

One of the most interesting and most useful thing in the internet are the animated GIFs. They separate the web from printed reading materials by showing us some movements but without the huge file size that comes with videos. They are very useful in explaining concepts and processes and can be found in several websites about natural sciences.

Animated images for the web

Many web designers in the 1990s are also fond of putting them in their websites (glitters, rotating cross, flame, etc are common) but common design wisdom in web design today implies that these animations can distract users without anything useful except possibly, as I already mentioned, to explain concepts and processes.

However, many web designers, developers and programmers now shun the use of animated GIFs or even GIFs in general due to their limited colors. GIFs tend to be more pixelated and its limited colors does not blend well with the rest of a typical website dominated by JPEG and PNG images.

Animated PNG (APNG) looks very promising. It works in the same way as animated GIF but can display more colors and supports partial transparency. However, animated PNGs have very limited browser support. Firefox and Opera supports it while Internet Explorer and Safari do not. Chrome can display APNG only if the APNG addon is installed. Those that do not support animated PNG will display only the first frame as a static image.

Components of Javascript animation

While I'm still waiting for APNG to be widely supported by most browsers, I decided to look at another solution and that is by using Javascript to display several images in succession acting as frames or cells of an animation.

Take a look at the image below. This animation is displayed using ifrmae. Click here to see the web page inside the iframe:

This example is that of an image animated using Javascript. There are actually 8 separate image files here appearing in transition to provide the same effect as animated GIF or APNG.

There are three components responsible for making this animated image work. First is the Javascript situated in the header section. Second is the image tag in the main body of the web page. Third is the Javascript within the main body of the web page.

The Javascript in the header section (between <head> and </head> tags) are responsible for putting the static images in the cache and assigning variables in them for latter use.

<SCRIPT LANGUAGE="JavaScript">
<!--

var pic1=new Image()
pic1.src="frame01.png"
var pic2=new Image()
pic2.src="frame02.png"
var pic3=new Image()
pic3.src="frame03.png"
var pic4=new Image()
pic4.src="frame04.png"
var pic5=new Image()
pic5.src="frame05.png"
var pic6=new Image()
pic6.src="frame06.png"
var pic7=new Image()
pic7.src="frame07.png"
var pic8=new Image()
pic8.src="frame08.png"
//-->
</script>

Of course, you can have more or less than 8 pictures. Just add or remove the variables and pictures based on your needs. The pattern here is pretty much established using eight pictures.

The next component is the image tag which you need to place where you want the actual animation itself to appear. Assign the first image of the animation as the source and assign a name to it. This name will be crucial in the latter part. Here, I named it "animation".

<img src="frame01.png" name="animation"/>

Now, the third and final component is the function that will allow the image to transit across the 8 separate images. It is a second Javascript tag that is situated in the body of the web page somewhere between <body> and </body> tags and must come AFTER the image tag a.k.a. second component.

<script type="text/javascript">

<!--
var counter=1
function animate(){
//does not animate if the browser does not support images
if (!document.images)
return
document.images.animation.src=eval("pic"+counter+".src")
if (counter<8)
counter++
else
counter=1
//controls the speed of the transition, in this case 100 means 100 milliseconds or 1/10 seconds
setTimeout("animate()",100)
}
animate()
//-->
</script>

The lines that start with // are the comment tags and they explain what some parts of the code does. The "animation" in images.animation.src pinpoints to the image tag with name="animation". In the part counter<8, 8 can be replaced with whatever number of images you actually used for your animation. The 100 in setTimeout("animate()",100) corresponds to the speed of transition from one image to another or the amount of time each separate image is displayed. Here, 100 means 100 milliseconds or 1/10 second. The smaller the number, the faster the animation will be.

Animation that does not loop forever

In making animated GIFs, whether using Adobe Image Ready or most of those free GIF animation maker, there's an option whether you want the animation to repeat forever or you want it to stop after the last frame. The earlier part of this tutorial shows how to replicate infinitely looping animation using Javascript. What if you want it to stop after the last frame.

To make the animation stop afer the last frame, take a look at this part of the third component:

if (counter<8)
counter++
else
counter=1

The animation repeats indefinitely because when the counter reaches 8 (corresponding to the last image), it resets itself to 1 and thus the increment and the animation repeat once again. To make the animation stop at the last frame, change the last line to counter=8; here you must replace 8 with the actual number of images you used as animation frames or even greater integer. What is important is that the value of the variable "counter" does not reset.

Posted by Greten on January 24, 2012 under JavaScript

Share and Enjoy:

Post Comments

Comment Rules and Reminders

The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
Fields marked with asterisks (*) are required. Your email will never be displayed in public.