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

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

從 Chrome 53 版開始，如果內容沒有 will-change: transform CSS 屬性，則在變形縮放比例變更時，所有內容都會重新轉成點陣圖。換句話說，will-change: transform 表示「請快速執行動畫」。

這項設定僅適用於透過指令碼操作而產生的轉換縮放，不適用於 CSS 動畫或 Web Animations。

這表示你的網站可能會獲得外觀更佳的內容，但如果未進行下列簡單的變更，網站可能會變慢。

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

在這個變更下，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，以便選擇品質和速度。

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

範例

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

實際應用程式中的轉換縮放動畫示例