JavaScript to control image animation?

Question

I'd like to have an animated character on the page, with different animations for different behaviours. I currently have two ideas for how it could work:

IDEA 1: Have each behaviour as an animated GIF and use JavaScript to switch GIF files when switching behaviour. Upside: Animations are in the image itself, leaving less work for JS. Downside: No way (that I know of) for JavaScript to tell what frame the GIF is at, when the animation ends/loops, etc.

IDEA 2: Have each frame of each animation as a PNG image and use JS to switch between frames, with some preloader to ensure all images are ready before animation begins. Upside: Much more control over animation sequence. Downside: Lots of frames...

Which of these two ideas would be better? (I'd like to avoid using Flash for this, btw)
I'm leaning towards idea 2 myself, for the better control it offers. Since the site already has a timer running every 50ms, it wouldn't be much to add this animation to that timer system.

Answer 1

I know this is old but I'd give option 3, which is something similar to option 2 with a twist.

Instead of loading frames, you'd have to load a big spritemap with all frames and possibly a map of all animation + coordinates. You'd have the sprite as a background for a div using the right dimension. You'd have to just move the background image to the right frame.

You could have all event on a different line and each animation frames on a different column. This will make a grid that you can easily control.

Plus

• Good control over animation and frames
• Probably faster than loading or switching between images
• You don't have to create multiple connections to the server to load all animations
• Png gives you better alpha result than gif

Minus

• You have to handle all the animations by yourself

Answer 2

For idea 1, you could use the setTimeOut() method to trigger an event after the length of time the GIF takes to loop. The problem with this, however, is that the GIF may start at a different time to the javascript.

Personally, I'd go for idea 2; as long as the frames are relatively small the client will download all the images pretty quickly (a 16x16px PNG is ~500 bytes). The client computer will have no problem moving the frames.

Another idea would be to put all the frames on below each other in one long image, and use CSS and jQuery (or vanilla JavaScript) to alter the CSS background-position property every 50ms. This would mean a smaller image and maybe a little less coding.

Answer 3

Idea 1 won't work, as JavaScript has no way of controlling the current frame of an Animated GIF - neither across browsers, nor using some specific (ActiveX / Mozilla specific) extension that I know of.

I think you are left with Idea 2. I don't know how smooth the results are that you can achieve with this method, though - you'd have to test.

Answer 4

You might want to take a look at freezeframe.js. It uses a canvas element to extract the first frame from a GIF in order to pause it.