在缩放变化时重新栅格合成合成图层

Chris Harrelson
Chris Harrelson
X GitHub

要点

从 Chrome 53 开始，如果内容没有 will-change: transform CSS 属性，则在其转换比例发生变化时，系统会重新光栅化所有内容。换句话说，will-change: transform 表示“请快速呈现动画”。

这仅适用于通过脚本操作发生的转换缩放，不适用于 CSS 动画或 Web 动画。

这意味着，您的网站上的内容可能会看起来更美观，但如果不进行下面列出的简单更改，网站的速度可能会变慢。

对 Web 开发者的影响

在这种更改下，will-change: transform 可以被视为强制将内容光栅化为固定的位图，该位图在随后的转换更新下永远不会更改。这样，开发者就可以加快对该位图执行的转换动画的速度，例如移动、旋转或缩放该位图。

我们不会区分缩放和平移转换。

当您需要非常快（即 60fps）的转换动画速度时，请在元素上放置 will-change: transform，并且预计在每个帧上以高质量对元素进行光栅化速度不够快。否则，请避免使用 will-change: transform。

为了优化性能与质量之间的权衡，您不妨在动画开始时添加 will-change: transform，并在动画结束时移除它。不过，请注意，添加或移除 will-change: transform 通常会导致一次性性能开销较大。

其他实现注意事项

移除 will-change: transform 会导致内容以清晰的比例重新光栅化，但仅在下一个动画帧（通过 requestAnimationFrame)）中执行此操作。因此，如果您有一个包含 will-change: transform 的图层，并且只想触发重新光栅化，但随后继续进行动画，则必须移除 will-change: transform，然后在 requestAnimationFrame() callback 中重新添加它。

如果您想在动画的任何时间以当前缩放比例进行光栅化，请应用上述方法，在一个帧中移除 will-change: transform，然后在后续帧中重新添加 will-change: transform。

这可能会导致内容失去其合成层，从而导致上述建议的开销较高。如果存在此问题，我们建议您还为内容添加 transform: translateZ(0)，以确保内容在此操作期间保持在复合图层中。

影响摘要

此项变更会影响呈现的内容质量、性能和开发者控制。

  • 呈现的内容质量：默认情况下，对转换比例进行动画处理的元素的呈现输出始终清晰。
  • 性能：当存在 will-change: transform 时，动画转换会非常快。
  • 开发者控制：开发者可以通过添加和移除
    will-change: transform，按元素和动画帧选择质量和速度。

如需了解更多详情，请参阅上面引用的设计文档。

示例

在此示例中，ID 为 remainsBlurry 的元素在进行此更改后仍会保持模糊状态，但 ID 为 noLongerBlurry 的元素会变得清晰。这是因为前者具有 will- change: transform CSS 属性。

真实应用中的转换缩放动画示例