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

前端之家收集整理的这篇文章主要介绍了这个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

猜你在找的HTML5相关文章