硬體加速動畫功能更新

Una Kravets

摘要：Chromium 正針對 SVG 動畫、百分比轉換，以及即將推出的背景色彩和剪輯路徑動畫，自動更新硬體加速功能。

談到網頁動畫效能，系統可能會顯示「硬體加速」和「GPU 加速」動畫。但這些優勢究竟是什麼？硬體加速樣式是使用 GPU (圖形處理器) 而非 CPU (中央處理器) 來算繪視覺樣式的樣式。這是因為 GPU 在網頁上轉譯視覺變更的速度比 CPU 快。

使用 GPU 卸載大量圖形轉換的轉場效果和動畫，意味著更流暢的視覺效果，也不會卡頓，因為這些動畫不會受到主執行緒的影響。將動畫提取至主執行緒後，動畫就能略過在網頁上執行的其他使用中指令碼的信任，進而減慢視覺速度並產生卡頓。

啟用硬體加速動畫

硬體加速動畫是合成圖層，可協助開發人員達到順暢的 60 FPS (每秒影格數) 動畫，提升視覺算繪效能。目前有多種方法可以指定並啟用網路上的硬體加速動畫和轉換功能：

• 使用 CSS transform 函式或轉換 opacity 或 filter 值
• 在元素中加入 will-change 屬性。
• 透過 OffscreenCanvas 製作動畫畫布繪圖
• 建立 WebGL 3D 繪圖

Chromium 中還預設的硬體加速功能是什麼？管道推進後還有幾種功能，包括 SVG 動畫，而開發人員一直都很積極要求。

硬體加速可擴充向量圖形動畫

SVG 是任何網站的絕佳選擇，現在與 SVG 的互動，都能帶來更出色的成效。自 Chromium 89 起，Chrome 將加入 Firefox，將 SVG 動畫依預設啟用硬體加速功能。開發人員需要你做些什麼？什麼都不用，在 Chromium 89 以上版本中，系統會自動為 SVG 動畫套用這項設定。

範例

接著來看看 SVG 動畫在啟用和未開啟硬體加速功能時有何差異。載入指標是常用的 UI 元素，例如 facebook.com 所顯示的這個元素。 這些指標可提示使用者正在伺服器中作業，同時等待回應。在這種情況下，回應就是在側欄中載入其他結果。

開啟開發人員工具後，我們就能開始剖析，並確實看到 CPU 和 GPU 加速動畫體驗之間的差異。

您可以看到左側的 (Chromium 87) 會在每次旋轉圖示進行動畫時 (持續進行) 重新繪製。右側不會有重新繪製作業 (Chromium 89 和 Firefox)。開啟繪製閃爍功能時，可以在開發人員工具轉譯面板中測試這項功能。

仔細查看「效能」面板，就能再次看到這項影響，以及該效果對網站資源整體成效的影響。可避免動畫完全轉譯和繪製時間，這表示動畫更流暢、效能較佳的應用程式。雖然 Facebook 要在硬體加速可擴充向量圖形的瀏覽器支援方面更為嚴格，但 Facebook 無法推送這個 SVG 型載入程式，但在主題設定、資源調度和解析度需求方面享有更大的彈性，以及簡化的維護工作。

百分比動畫

在 Chromium 89 中，Interactions 團隊也支援百分比轉換動畫。以百分比為基礎的動畫描述包含百分比動作的互動。舉例來說，您可以放大 20% 的內容，也可以使用 translateX: -100% 之類的程式碼從螢幕外滑動回應式側欄選單。

這些類型的 UI 動畫相對常見，但由於我們先前無法合成這類動畫，因此目前並未利用硬體加速功能。轉換中的百分比取決於方塊大小 (例如版面配置)，但現在只要版面配置大小不會變更每個影格的大小，瀏覽器就可以預先計算絕對轉換值，並像開發人員已提供像素值一樣執行這些值。好消息是 Chromium 團隊正在努力開發這項功能，不久之後，系統就會自動將這些類型的動畫合併並硬體加速完成。

接下來呢？

這些新動畫可讓網頁樣式更順暢。正如前所述 團隊一直在觀察即將浮現的網路需求目前我們已簡化轉換 background-color 和 clip-path，以便在日後的 Chromium 版本中自動使用硬體加速功能。

由於轉換和效果的用量次數偏高，因此是優先考量，而 clip-path 可為網路帶來更高效能的轉換效果。background-color當效能與互動性相輔相成 人人皆大歡喜

封面圖片：適用於 Unsplash 的 Siora Photography。