JavaScript Gif-Like Animation

First, I like to say how much I hate spammers. Id even start believing in the beyond again, if God would only reserve a special place in hell for spammers. 35,000 spam comments and counting… Because of this, Id like to apologize in advanced if I accidentally delete one of your comments. Also, the first time you comment, it goes into an approval pool, so if you dont see it right away, please give me a day or two to approve it.

I have been pretty busy prepping for a big announcement that we will be making at Mint.com this week, so I did not have as much time to prepare a blog article as I would have liked. So, I decided to have a little fun today and created a JavaScript driven GIF-Like animation tool.

The basic idea is that you take each frame that you would use in an animated GIF and instead create a separate GIF for each. The next step is to put an IMG tag on a page and set its source to the first image. Then at the end of the webpage inside a SCRIPT tag, instantiate GifAnimator, passing in the ID of the IMG tag as the first parameter, and an Array of image sources (your frames) as the second image. Then, go ahead and call the start method of your new GifAnimator Object to begin animation.

Example 1: Instantiating GifAnimator

<script type="text/javascript">

var anim = new Core.Widget.GifAnimator(animator, [
	assets/images/animator/A.gif,
	assets/images/animator/B.gif,
	assets/images/animator/C.gif,
	assets/images/animator/D.gif,
	assets/images/animator/E.gif,
	assets/images/animator/F.gif
]);

setTimeout(function() {
	anim.start();
}, 1000);

</script>

Download GifAnimator.js and include it into your project to make Example 1 work. I have created a test page as well.

Hopefully, you will remember that I started this article by saying that I was playing. There is little reason to replace GIF animation with a JavaScript solution, as JavaScript timeouts are fairly inaccurate, and they have a tendency to pause every few seconds as the processor catches up with the browser.