html - 对于类似时间机器的效果，CSS3 动画、SVG 或 Canvas 中的哪一个表现最好？

Question

对于我们的网站，我们正在开发一个“组件”，以类似于 Time Machine 的方式显示图像。 在 Mac OS X 上。因此，当您向前和向后滚动时，会有许多图像相互重叠，位置略有不同，并且动画流畅。

我们有一个带有 CSS3 动画的尖峰实现，但它在 Firefox 中不是很流畅，并且根本不支持 IE9(尽管如果其他选项更差，我们可能会接受它)。

我们正在考虑在 SVG 或 Canvas 中实现，但没有太多经验，所以我想我们应该先问一下。所以:

要求:

1. 一定要快。动画必须流畅，这是硬性要求。
2. 它应该被尽可能多的浏览器支持。
   • 所需的浏览器为 Chrome 20+、Firefox 14+ 和 IE10+。
   • 我们也非常希望获得对 IE9 的支持，但如果绝对必要，也可以没有它。
   • Opera 很不错，但不是必须的。

选项以及我们目前的经验/对它们的看法:

• CSS3 - 似乎是完成这项任务的“合适”技术，但不幸的是，实现效果并不理想。也许我们的原型(prototype)代码效率低下，但目前不同浏览器之间的支持似乎大不相同。
• SVG - 至少是矢量图形/DOM 元素，但我们对此没有任何经验。
• Canvas - 我们希望它应该表现良好，因为它甚至用于游戏，但我们无法想象所有像素重绘如何工作。也许我们应该使用一些库，比如 processingjs ？
• Flash 或其他插件 - 我碰巧非常了解 Flash，而且我知道类似 Time Machine 的效果在那里会是一项非常容易的任务，但我们宁愿远离插件时刻。

感谢您的建议。

Answer 1

如果组件的尺寸不必很大，但可以限制在 800x600 像素左右，那么听起来 Canvas 应该可以胜任。

如果您只将(缩放的)位图绘制到 Canvas，那么根据我的经验，性能非常好，即使在 iPad2 上也是如此。性能只有在更高的分辨率(1920x1080 及以上)才真正开始受到影响，所以如果你将它用于全屏功能，你需要小心!此外，投影等花哨的功能也会大大降低性能。

Canvas 在不同浏览器之间几乎没有差异，因此就让它在各种浏览器中按预期工作而言，它几乎肯定比使用 CSS3 或 SVG 更轻松。

我建议使用 Canvas 快速创建一个原始原型(prototype)，看看它是否能满足您对性能的首要要求。

如果您决定使用 Canvas，我绝对会推荐使用库。由于您非常了解 Flash，因此您可能想看看 EaselJS .它有一个受 Flash 启发的显示列表，在大多数情况下使用它的性能成本可以忽略不计。您还可以获得用于交互的基本事件。此外，如果您使用 EaselJS，如果您决定稍后将代码移植到 Flash 将非常简单。