kineticjs - 如何使用 KineticJS 绘制动画 gif

Question

我需要用 KineticJS 绘制动画 gif，但是，当我按照图像教程进行操作时失败了。有什么方法可以绘制动画 gif 吗？

Answer 1

使用KineticJS 精灵。

动画 GIF 是（非常）古老的方法。它不能很好地工作，它在性能方面非常不稳定并且在不同的浏览器中不一致。当同时显示大量动画 GIF 并减慢一切时，它也会消耗内存。信不信由你，最好用代码而不是在图像文件中处理动画。

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

kineticjs 动画精灵教程

Answer 2

不是直接的。

但是，您可以这样做：

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