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: Ha

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

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.

Answer 3

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 4

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.