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

Chris Harrelson
Chris Harrelson
X GitHub

要点

从 Chrome 53 开始，如果内容的转换比例发生变化，并且没有 will-change: transform CSS 属性，那么所有内容都会重新光栅化。换句话说，will-change: transform 表示“请快速添加动画效果”。

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

这意味着您的网站可能会获得更美观的内容，但如果没有下文所列的一些简单更改，也可能会变慢。

对 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。

这可能会导致内容丢失其合成层，从而造成上述建议的开销有些增加。如果这是一个问题，我们建议也将 transform: translateZ(0) 添加到内容中，以确保在此操作期间它仍保留在合成层中。

影响摘要

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

  • 渲染内容质量：默认情况下，为转换缩放添加动画效果的元素渲染输出始终清晰。
  • 性能：在存在 will-change: transform 的情况下为转换添加动画效果将很快。
  • 开发者控制：开发者可以通过添加和移除
    will-change: transform，按元素和动画帧选择质量和速度。

如需了解详情，请参阅上文的参考设计文档。

示例

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

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