从精灵图像生成动画？

Question

我已经看到Sublime Text website他们有一个似乎正在使用一堆“精灵”的动画。这样的图像怎么样：

成为动画？我做了几次谷歌搜索，其中大部分（动画）只是flattened images，它们变成了动画图片like this。

Answer 1

您可以检查您发布的第二个链接的源代码。代码记录良好。以下是一般性解释：

1. 你有一个画布元素，它是绘制动画的地方，还有一个包含动画所有“帧”的精灵图像。
2. 你有一个“循环”功能，在设定的时间间隔内调用（在我们的情况下为1000/30，等于33ms）
3. 该函数清除画布元素
4. 该函数设置接下来要绘制的精灵imgae的区域。这是我们的“框架”。
5. 该函数在画布元素上绘制精灵的计算区域

我会以不同的方式做这件事。出于兼容性原因，最好使用简单的div来实现这种类型的动画。只需将图像精灵设置为背景图像即可。然后创建完全相同的循环，计算“背景位置”值，它对应于新帧。

Answer 2

Jon Skinner（是的，来自Sublime Text），写了一篇关于他如何为崇高文本主页制作动画的博客文章：http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

他说他做了一系列保存到.png的截图。

然后他将png编码成delta表（一张只包含最后一帧和当前帧之间像素差异的精灵表） - 相当不错且高效！

他甚至为构建delta-sheet（基于python）的编码器提供了代码：https://github.com/sublimehq/anim_encoder