如何使用KineticJS绘制GIF动画

Question

我需要用KineticJS绘制GIF动画，然而，当我跟随image tutorial时，我失败了。有没有办法画GIF动画？

Answer 1

不直接。

你可以这样做：

1. 将.gif拆分为单独的图像：http://gif-explode.com/
2. 将这些图像加载到javascript数组中。
3. 创建一个Kinetic.Image。
4. 枚举数组中的每个图像。
5. 使用枚举的阵列图像替换Kinetic图像中的图像。
6. 使用myKineticImage.setImage（images [nextImage ++]）设置下一张图片。

Answer 2

使用 KineticJS Sprite。

动画GIF是（非常）旧的方式。它不能很好地工作，它在非常糟糕的性能和不同的浏览器中不一致。当一次显示大量动画GIF并减慢一切时，它也会占用内存。信不信由你用代码而不是图像文件处理动画更好。

我建议使用PNG格式。您应该使用包含所有动画帧的单个PNG文件（精灵表）。然后将它们加载到一个数组中并使用KineticJS Sprite来显示它。这很简单。你有一个精灵包含你需要的一切。这里有一个很好的例子：

kineticjs animated sprite tutorial