performance - 动画 gif 与视频与画布 - 速度和文件大小

Question

假设一个简单的产品演示，例如在http://www.sublimetext.com/上找到的那个

即这不是传统的高分辨率视频，可以通过以下方式合理完成：

• 动画 gif
• 视频（可以嵌入 youtube，自定义 html5 播放器，任何最有竞争力的）
• 帆布

问题是，哪个对用户表现更好？两者都在：

1. 用户必须下载文件的大小才能查看“产品演示”
2. 显示“产品演示”的处理能力要求

如果您觉得有一种卓越的技术可以完成这个或另一个指标来判断它的有用性，请告诉我，我会做出相应的调整。

Answer 1

我知道它已经回答了，但是当您特别提到 Sublime Text 动画时，我假设您想要创建类似的东西？

如果是这样的话，那么这里有一篇文章解释了它是如何由 Sublime Text 作者自己创建的：

• http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

这篇文章有趣的部分是他如何减小文件大小——我相信这是你的问题。

Answer 2

使用简单的动画，例如您所指的链接中的动画，帧速率非常低，动画 GIF 的简单动画 PNG 可能是最好的解决方案。

但是，您需要在此考虑带宽因素。如果 GIF 或 PNG 的最终大小很大，那么缓冲视频可能会更好。

这是因为在显示之前需要下载整个 gif/png 文件（但我不确定交错的 PNG 在包含动画时如何工作）。

视频的文件大小可能较大，但由于它通常是缓冲的，因此您几乎可以立即显示动画。

使用外部主机（如 YouTube 或其他主机）可能对您的网站有益，并且带宽来自这些网站而不是来自您的服务器（如果您使用以各种方式限制或收费的提供商）。

有关动画 PNG 或 APNG 的更多信息（因为这不是那么知名）：
https ://en.wikipedia.org/wiki/APNG

这里的画布只是一个显示设备，并不是真正需要的（图像容器做同样的工作，也可以为 GIF/PNG 制作动画，而画布不能）。

如果您使用大量矢量，则可以考虑使用画布。

CSS3 动画也是演示幻灯片之类的选项。