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.

I'm asking which is _actually_ better, I'm asking whether my opinion on which is better is right or wrong, and for what reason. — Niet the Dark Absol, Nov 26 '10 at 16:24
See also [Can you control GIF animation with Javascript?](https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript) — user, Nov 01 '16 at 02:52

score 14 · Accepted Answer · answered Feb 24 '12 at 02:25

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

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! — Niet the Dark Absol, Feb 24 '12 at 02:30
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 — Loïc Faure-Lacroix, Mar 14 '12 at 23:18

score 2 · Answer 2 · answered Nov 26 '10 at 16:29

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.

answered Nov 26 '10 at 16:29

Pekka

442,112
142
972
1,088

Okay - I was mostly looking for confirmation on there being no way to control GIFs. Thanks :) – Niet the Dark Absol Nov 26 '10 at 16:30
best possible interval 10-20ms -> 50 fps is not that bad IMHO. – gblazex Nov 26 '10 at 16:45
@galambalazs no, that sounds pretty decent if it's possible to run it stably across browsers. – Pekka Nov 26 '10 at 16:46
IE has some quirk which controls GIF animation – Free Consulting Nov 26 '10 at 16:54
@user interesting. Do you know a link? – Pekka Nov 26 '10 at 16:54
1

@Pekka - http://jsbin.com/fps/ - It's below 20ms even on IE 6, and 4ms in Chrome. – gblazex Nov 26 '10 at 17:08

score 2 · Answer 3 · edited Apr 15 '15 at 22:20

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.

edited Apr 15 '15 at 22:20

ROMANIA_engineer

54,432
29
203
199

answered Nov 26 '10 at 16:33

Bojangles

99,427
50
170
208

Yes, a single image with all the different frames is the best approach. It's called spriting and it is a well-known technique. – Zecc Nov 26 '10 at 17:07
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 :) http://otanistudio.com/swt/sprite_explosions/ – Zecc Nov 26 '10 at 17:11

score 0 · Answer 4 · answered Nov 29 '14 at 12:23

0

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.

answered Nov 29 '14 at 12:23

Wilfred Hughes

29,846
15
139
192

JavaScript to control image animation?

4 Answers4

Linked