我今天访问了http://www.sublimetext.com，并对网站在其首页上的截屏动画感兴趣。它看起来像是视频和幻灯片之间的混搭。我也在其他现代网站上看过它们，但我认为这是一些HTML5视频标签的诡计。但当我查看sublimetext网页的来源时，我很困惑。
此页面上的动画是在HTML5 2D画布上创建的，使用基本PNG图像的纯JavaScript。每张幻灯片都是从PNG文件加载的。通过仅修改图像中的少数像素来实现动画。动画javascript定期在原始PNG上应用这些更改。您将在脚本中找到存储在* _timeline变量中的这些增量。
我的问题是什么工具可以产生这样的增量？如何记录一个人的桌面屏幕并创建这样的基本PNG +动画增量？
我喜欢这种方法，因为它似乎是截屏效果最有效的格式，连续帧的变化很小。
更新1 我知道有一些技术可以使用GIF实现这一点（检查https://askubuntu.com/q/107726），但是有什么很酷的工具可以生成这个可以将PNG增量转换为动画的javascript代码。谷歌搜索并没有帮助我找到它。
更新2 截屏视频（和sublimetext）的作者在sublimetext论坛上回复了我的问题。他是使用自定义python脚本完成的，并计划在http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252
之后写一篇关于它的博客文章答案 0 :(得分：14)
Sublime Text的创建者Jon Skinner写了关于流程on his website
的文章他还发表了他编写的编码器on GitHub
答案 1 :(得分：1)
查看他们的一张图片，您就会明白它的工作原理：
http://www.sublimetext.com/anim/command_palette_packed.png
他们只是剪切并将适当的图像部分插入到画布元素的适当位置，但如果你的问题是如何制作这样的图像，我就没有想法。 我想用一些软件，而不是手工，但我不知道这么软......
