Jay*_*esh 26 html5 animation png canvas
我今天访问了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
| 归档时间： |
|
| 查看次数： |
4328 次 |
| 最近记录： |