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

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.