假设一个简单的产品演示，例如在http://www.sublimetext.com/上找到的演示。
也就是说，这不是传统的高分辨率视频，可以通过以下方式合理实现：
- 动画gif
- 视频（可以嵌入YouTube、自定义HTML5播放器或任何最具竞争力的内容）
- 画布
问题是哪种方式对用户来说更好？无论是：
- 用户必须下载的文件大小以查看“产品演示”
- 以显示“产品演示”所需的处理能力要求
如果您认为有更好的技术来完成此任务或其他可用性评估标准，请告诉我，我会相应地进行调整。
动态GIF vs 视频 vs 画布 - 关于速度和文件大小
10
- jon
2个回答
11
我知道这个问题已经被回答了，但由于你特别提到了Sublime Text动画，我认为你想要创建类似的东西？
如果是这样，那么这篇文章解释了Sublime Text作者本人如何创建它：
这篇文章的有趣之处在于他如何减小文件大小 - 我相信这就是你的问题所在。
- Jarrod
1
1这是他制作的动画编码器，托管在Github上 - 似乎正在积极开发中：https://github.com/sublimehq/anim_encoder - jon
3
通过一个简单的动画，例如你引用链接中的动画，使用非常低的帧率，简单的动态PNG或动态GIF可能是最好的解决方案。
但是，你需要考虑带宽因素。如果GIF或PNG的最终大小很大，那么缓冲视频可能更好。
这是因为在显示之前需要下载整个gif/png文件（尽管我不确定包含动画的交错PNG如何工作）。
视频可能会更大，但由于通常是缓冲的，你将能够几乎立即显示动画。
使用像YouTube或其他外部主机一样的服务对你的网站也有益处，因为带宽来自这些站点而不是你的服务器（如果你使用限制或以各种方式收费的提供商）。
有关动态PNG或APNG（因为这不是很出名）的更多信息，请查看：
https://en.wikipedia.org/wiki/APNG 其中的画布只是一个显示设备，不是必需的（图像容器可以执行相同的任务，并且还可以动画GIF/PNG，而画布则无法）。
如果您使用大量矢量图形，则可以考虑使用canvas。
对于演示幻灯片等东西，CSS3动画也是一种选择。
但是，你需要考虑带宽因素。如果GIF或PNG的最终大小很大，那么缓冲视频可能更好。
这是因为在显示之前需要下载整个gif/png文件（尽管我不确定包含动画的交错PNG如何工作）。
视频可能会更大，但由于通常是缓冲的，你将能够几乎立即显示动画。
使用像YouTube或其他外部主机一样的服务对你的网站也有益处，因为带宽来自这些站点而不是你的服务器（如果你使用限制或以各种方式收费的提供商）。
有关动态PNG或APNG（因为这不是很出名）的更多信息，请查看：
https://en.wikipedia.org/wiki/APNG 其中的画布只是一个显示设备，不是必需的（图像容器可以执行相同的任务，并且还可以动画GIF/PNG，而画布则无法）。
如果您使用大量矢量图形，则可以考虑使用canvas。
对于演示幻灯片等东西，CSS3动画也是一种选择。
- user1693593
1
那么，动态PNG在IE、Safari或Chrome上不受支持？ - Seanonymous
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接