2

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

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

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

要求：

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

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

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

谢谢你的建议。

4

2 回答 2

1

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

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

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

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

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

于 2012-07-31T14:45:34.993 回答
0

你在寻找这样的东西吗？它使用 SMIL 动画，因此您必须集成fakesmile 之类的东西才能获得 IE 支持。

于 2012-07-31T10:12:50.103 回答