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.

Solution 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

Solution 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.

Solution 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.

Comments

[Niet the Dark Absol]

Okay - I was mostly looking for confirmation on there being no way to control GIFs. Thanks :)

[gblazex]

best possible interval 10-20ms -> 50 fps is not that bad IMHO.

[Pekka]

@galambalazs no, that sounds pretty decent if it's possible to run it stably across browsers.

[Free Consulting]

IE has some quirk which controls GIF animation

[Pekka]

@user interesting. Do you know a link?

[Zecc]

Yes, a single image with all the different frames is the best approach. It's called spriting and it is a well-known technique.

[gblazex]

@Pekka - jsbin.com/fps - It's below 20ms even on IE 6, and 4ms in Chrome.

[Zecc]

I edited my comment to remove the link, since I didn't really see if they were using the best approach. But ok, here it is again :) otanistudio.com/swt/sprite_explosions

[Niet the Dark Absol]

Instant win. I didn't know about spritesheets at the time of the question, and another "plus" is that I only need one onload event to fire before the animation can start!

[Loïc Faure-Lacroix]

I recently had to do something similar (3d rotating house). I opted for individual images since having a sprite of 100 images 600x400 might be very big. Loaded all images with a "new Image()" and added them to a array list. Then I just have to move from one image to an other using an index and changing the src of a <img>