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

Posted 2023-03-05

【中文标题】这个 HTML5 截屏动画是如何创建的？

【英文标题】：How was this HTML5 screencast animation created?

【发布时间】：2012-07-12 21:45:28

【问题描述】：

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

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

我的问题是什么工具可以生成这样的增量？如何记录自己的桌面屏幕并创建这样的基础 PNG + 动画增量？

我喜欢这种方法，因为它似乎是最有效的截屏格式，连续帧的变化很小。

更新 1 我知道有一些技术可以使用 GIF（检查 https://askubuntu.com/q/107726）来实现这一点，但是有什么很酷的工具可以生成这个可以将 PNG delta 转换为动画的 javascript 代码。谷歌搜索并没有帮助我找到它。

更新 2 截屏视频（和 sublimetext）的作者在 sublimetext 论坛上回答了我的问题。他使用自定义 python 脚本完成了这项工作，并计划在某个时候写一篇关于它的博客文章http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252

【问题讨论】：

你考虑过GIFs吗？它们也比画布更受支持。

@Truth 是的，GIF 可能很棒，但我仍然很想了解这种基于画布的技术

@Jongware 也许你是对的。

@Jongware 然后我将删除 sublimetext 标签。

【参考方案1】：

Sublime Text 的创建者 Jon Skinner 写了关于这个过程的文章on his website

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

【参考方案2】：

看看他们的一张图片，你就会明白它是如何工作的：

http://www.sublimetext.com/anim/command_palette_packed.png

他们只是将图像的适当部分剪切并插入到画布元素的适当位置，但如果您的问题是如何制作这样的图像，我不知道。 我猜是用一些软件，不是手动的，但我不知道这么软......

【讨论】：

我的问题是什么工具可以生成这样的增量？如何记录自己的桌面屏幕并创建这样的基本 PNG + 动画增量？

对不起，我没有很好地阅读你的问题。我认为即使是相对简单的图像处理应用程序也可以具有从图像中提取增量的功能，我的意思是对 Photoshop 来说相对简单:) 但我不确定 Photoshop 是否具有这样的功能

@haynar 很棒的观察。我没有注意到那些图像是包装好的。但现在我越来越好奇哪些软件可以让你创建这样的图像和相应的 javascript 代码。

我认为它不会生成显示代码，只会生成有关打包数据的信息以及它被覆盖的时间/位置。看起来增量检测/打包和显示代码也是自定义的，除非你能找到一个库，否则你可能不得不自己编写这种东西。