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