How to draw animated gif with KineticJS

Question

I need to draw animated gif with KineticJS, however, I failed when I followed the image tutorial. Is there any way to draw animated gif?

Answer 1

Use a KineticJS Sprite.

Animated GIF is the (very) old way of doing this. It doesn't work very well, it's very flaky performance-wise and inconsistent in different browsers. It also eats memory when lots of animated GIFs are displayed at once and slows everything down. Believe it or not it's better to handle the animation with code instead of within the image file.

I recommend using the PNG format. You should use a single PNG file (sprite sheet) containing all the animation frames together. Then load them into an array and use a KineticJS Sprite to display it. It is fairly straightforward. You have a sprite containing all you need. There is a great example here:

kineticjs animated sprite tutorial

Answer 2

Not directly.

You can do this however:

1. Break apart the .gif into separate images: http://gif-explode.com/
2. Load those images into a javascript array.
3. Create a Kinetic.Image.
4. Enumerate through each image in the array.
5. Replace the image in your Kinetic image with the enumerated array image.
6. Use myKineticImage.setImage(images[nextImage++]) to set the next image.