gpt4 book ai didi

html - 这个 HTML5 截屏动画是如何创建的?

转载 作者:技术小花猫 更新时间:2023-10-29 11:49:31 26 4
gpt4 key购买 nike

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

此页面上的动画是使用基本 PNG 图像在 HTML5 2D Canvas 上使用纯 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

最佳答案

Jon Skinner,Sublime Text 的创建者写下了这个过程 on his website

他还发表了他写的编码器on GitHub

关于html - 这个 HTML5 截屏动画是如何创建的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11463749/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com