javascript - 从精灵图像生成动画？

Question

我看过Sublime Text 网站，他们有一个动画，似乎使用了一堆“精灵”。像这样的图像如何：

变成动画？我做了几个谷歌搜索，其中大部分（动画）只是扁平化的图像，它们变成了这样的动画图像。

Answer 1

您可以检查您发布的第二个链接的源代码。代码有据可查。这是一个一般性的解释：

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

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

Answer 2

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

他说他做了一系列保存为.png的屏幕截图。

然后他将 png's 编码成一个 delta-sheet（一个只包含最后一帧和当前帧之间的像素差异的精灵表）——非常漂亮和高效！

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