html5 - 这个HTML5截屏动画是如何创建的？

我今天访问了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

之后写一篇关于它的博客文章