CODEWITHSUNDEEP
kineticjs
DANG Fan
DANG Fan

Reputation: 864

How to draw animated gif with KineticJS

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?

Upvotes: 2

Views: 1154

Answers (2)

Owen
Owen

Reputation: 430

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

Upvotes: 3

markE
markE

Reputation: 105015

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.

Upvotes: 3

Related Questions