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

Chris Harrelson
Chris Harrelson

要点

从 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 属性。

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