微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

这个HTML5屏幕截图动画如何创建?

我今天访问了 http://www.sublimetext.com,并对网站在其开幕页面上的截屏动画感兴趣。它看起来像是视频和幻灯片间的混搭。我也看过他们在其他现代网站,但我认为这是一些HTML5视频标签欺骗。但是当我看到sublimetext网页的来源时,我感到困惑。

页面上的动画在HTML5 2D画布上使用基本的PNG图像使用简单的JavaScript创建。每个幻灯片都是从PNG文件加载的。该动画通过仅从图像中修改少量像素来实现。动画JavaScript会定期在原始PNG上应用这些更改。您将在脚本中找到存储在* _timeline变量中的这些增量。

我的问题是什么工具可以产生这样的三角洲?怎么能记录一个桌面屏幕并创建这样的基础PNG动画三角洲?

我喜欢这种方法,因为它似乎是屏幕录像的最有效的格式,连续帧的变化是最小的。

更新1我知道有使用GIF(Check http://askubuntu.com/q/107726)实现这一点的技术,但是很酷的工具可以生成这个可以将PNG变量转换为动画的JavaScript代码。谷歌没有帮助我找到它。

更新2屏幕录像(和sublimetext)的作者在sublimetext论坛上回答了我的问题。他使用一个自定义的python脚本,并计划在http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252某个时候写一篇博文

解决方法

Sublime Text的创始人Jon Skinner撰写了关于 on his website的过程

他还出版了他编写的编辑器on GitHub

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。