How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation)

Question

More and more I am seeing an effect where pngs are loaded into a series of DIVs (or one div) and then sequenced though frame by frame either based on button click or based on scroll. I've tried to peek at the code, and I understand that javascript is doing the heavy lifting, but I'm still a bit lost, are there any tutorials on this technique? examples?

example of animation (multiple div) http://atanaiplus.cz/index_en.html:

example of animation (one div): http://www.hyundai-veloster.eu/

example of scrolling animation: http://discover.store.sony.com/tablet/#design/ergonomics

Mild Fuzz · Accepted Answer · 2012-03-12T15:39:02.890

9

you just want to swap out the src attribute using a setInterval timer

var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);

The trick is how you generate nextImage. This largely depends on the naming conventions of your images, or which direction you wish the animation to run in

Update

Or use a plugin

edited Mar 12 '12 at 15:39

answered Mar 12 '12 at 15:31

Mild Fuzz

29,463
31
100
148

2

yeah the thing about spritely is that the image sequence is a actually one big image, that is being moved around to crate an animation. I don't really think that would work for a larger more complex image sequence. – user379468 Mar 12 '12 at 15:37
Yeah, the file size would be HUGE. – Diodeus - James MacFarlane Mar 12 '12 at 15:40
2

well, probably smaller cumulatively than all of the individual images – Mild Fuzz Mar 12 '12 at 15:43

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

Perhaps instead of switching between different images, use the spriting technique described in this question: How to show animated image from PNG image using javascript? [ like gmail ]

edited May 23 '17 at 12:33

Community

1
1

answered Mar 12 '12 at 15:36

Zugbo

514
1
4
14

1

I haven't got the rep to comment on other answers yet, but in response to the file size problem: If you have to load all of the images anyway, you're already committed to sending that data- by bundling the images into a sprite you at least save on HTTP overhead. You also get the benefit of being able to start the animation as soon as the image loads, not having to check all the images separately. – Zugbo Mar 12 '12 at 15:43
1

That may be true, but I think there are other reason why it's not optimal. Moving around an image that is 10,000 by 10,000 is far more expensive to render than to toggle visibility or swap the name of an image in the div ... – user379468 Mar 12 '12 at 15:52
You have to weigh file-size against the number of HTTP requests. If your images don't have to be fully transaprent, you could sprite them into a large JPEG....but if they need to be PNG-24's, that would get pretty freakin' huge to combine them all together. HTTP requests might be more worth it. – Marcy Sutton May 17 '13 at 20:18

How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation)

2 Answers2

Linked