对于类似 Time Machine 的效果，CSS3 动画、SVG 或 Canvas 中的哪一个效果最好？

Question

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

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

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

要求：

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

选项以及我们目前对它们的经验/意见：

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

感谢您的建议。

Answer 1

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

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

Canvas 在浏览器之间几乎没有什么怪癖，因此几乎可以肯定，它比使用 CSS3 或 SVG 更容易在各种浏览器中按预期工作。

我建议用 Canvas 制作一个快速而肮脏的原型，看看它是否能满足您对性能的第一个要求。

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

Answer 2

您是否正在寻找类似this 的内容？它使用 SMIL 动画，因此您必须集成 fakesmile 之类的东西才能获得 IE 支持。