当将图像调整大小与动画移动结合时，浏览器的性能如何？

Question

4

我被指派将Flash动画转换为HTML。这个动画相当复杂，需要将多个图像 (9) 从位置 (x,y) 移动到位置 (x2,y2)，同时将图像大小从215px宽增加到930px宽。

当我最初测试这个动画时，只用了1-2张图片，我注意到在Firefox中处理这个动画时会有很多卡顿。为了试图隔离问题，我删除了动画的动态调整大小，只是将其从点A移动到点B。

有趣的是，当我只是移动一个930像素的图像，并将其通过CSS宽度或内联宽度属性调整为215像素时，我看到了同样的行为。

当我尝试使用一个实际上宽度为215像素的不同图像进行相同的动画时，它表现得很流畅。然后我尝试使用原始的930像素宽图像(没有调整大小)，它也表现得很好。

这让我想知道浏览器是否每次移动图像时都必须将其“调整”为215像素，这导致了卡顿。这个假设是否正确？如果是，是否有其他方法来优化动画，以允许同时调整图像大小和移动图像？

注： 1) 我已经优化了定位图像的绝对位置，以最小化重新流动的过程。 2) 我已经使用jQuery和fX动画框架测试了动画。

- Steve Reichgut

你能在 JSBin 或其他类似的服务上展示一些示例代码吗？ - epascarello

1

我也遇到了这个问题，具体来说是当我试图水平移动图像时。我知道这不是一个解决方案 - 我很想听到一个好的解决方案 - 当我使用传统滚动条（即动画滚动本身）使图像垂直滚动时，图像会非常平滑地动画化。 - matt

你能解决这个问题吗？我发现在MSIE上非常慢。 - rustyx

1

使用Canvas不是一个选项吗？ - Tigraine

1

同意Tigraine的观点，我认为Canvas/WebGL是您需要的唯一路线。 - Riyad Kalla

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bjornd · Answer 1

使用元素很难实现平滑的动画效果。解决问题的最佳方式是使用多种技术的组合：对于基于 WebKit 的浏览器，使用 CSS 动画；对于其他现代浏览器（如 ff3-4、ie9），使用；如果需要支持 ie 6-8，则可能需要使用 filter: transform()。