縮放時重新光柵化複合圖層

Chris Harrelson
Chris Harrelson
X GitHub

重點摘要

自 Chrome 53 版起，如果內容沒有 will-change: transform CSS 屬性，當其轉換縮放比例有所變更時，系統會將內容重新光柵。換句話說，will-change: transform 表示「請快速製作動畫」。

這僅適用於透過指令碼操縱進行的變形，不適用於 CSS 動畫或網頁動畫。

也就是說，您可以讓網站看起來更賞心悅目，但如果沒有進行以下簡單調整，速度可能還慢。

對網頁程式開發人員的影響

在此變更下，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() c 回呼。

如果您在動畫播放期間的任何時候都想以目前的縮放比例進行光柵化，請套用上述技術以移除單一影格，然後在後續影格中重新新增 will-change: transform。

這可能會導致內容的副作用失去了合成圖層，導致上述建議的成本稍微高一點。如果有問題，我們建議您在內容中加入 transform: translateZ(0)，以確保這項作業在這項作業期間保留在複合圖層中。

影響摘要

這項變更會影響算繪的內容品質、效能和開發人員控制項。

  • 算繪內容品質：以動畫縮放比例呈現元素的算繪輸出內容，預設一律保持清晰。
  • 效能：在 will-change: transform 出現時為轉換建立動畫效果很快。
  • 開發人員控制項：開發人員可以新增及移除
    will-change: transform，藉此選擇每個元素和每個動畫影格在品質和速度之間。

詳情請參閱上方的參考設計文件。

示例

在此範例中，變更完成後，具有 remainsBlurry ID 的元素會變得模糊，但含有 noLongerBlurry ID 的元素會變得清晰。這是因為前者包含 will- change: transform CSS 屬性。

從實際應用程式轉換縮放動畫的範例