前端動畫實現以及原理淺析

袋鼠雲數棧UED發表於2022-05-19
前端動畫

背景

如今的前端是一個涉獵領域很廣的職業。作為一名前端，我們不僅要開發管理系統、資料中臺、還要應對年報開發、節日活動等場景。不僅要會增刪改查，編寫表單，還要具備開發動畫、H5 遊戲等能力。能做出很 Cool 的動畫效果，也是一種前端特有的成就感。所以，我們從動畫的實現方法入手，瞭解瀏覽器的渲染，以及如何提升動畫的效能。

我們先來看 2 個 H5 案例 ：
【一鏡到底】

filefile<->手機掃碼體驗

【年報】

file
file
file

【其他 H5 優秀案例】
https://www.h5anli.com

第一部分 常見的動畫實現手段

1.1 gif 實現

file

定義：
GIF 檔案的資料是一種基於 LZW 演算法的連續色調的無失真壓縮格式，gif 格式的特點是一個 gif 檔案可以存多幅彩色影像，當資料逐幅讀出並展示都在螢幕上，就可以構成一個簡單的動畫。
最高支援 256 種顏色。由於這種特性，GIF 比較適用於色彩較少的圖片，比如頁面卡通 icon、標誌等等。

使用：

![file](/img/bVcZPme)

優點：
1.製作的成本很低；
2.相容性好；
3.方便開發使用。

缺點：
1.畫質上：色彩支援少，影像毛邊嚴重；
2.互動上：不能控制動畫的播放暫停，沒有靈活性；
3.大小上：由於是無失真壓縮，每幀被完整的儲存下來，導致檔案很大。

1.2 css3 補幀動畫

1.2.1 transition 過渡動畫

使用：

.box {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: #0000ff;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #ffcccc;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}

場景：

常與 :hover, :active 等偽類使用,實現相應等動畫效果。

1.2.2 animation 關鍵幀動畫

使用：

.bounce1 {
    left: -40px;
    animation: bouncy1 1.5s infinite;
}
.bounce2 {
    left: 0;
    animation: bouncy2 1.5s infinite;
}
.bounce3 {
    left: 40px;
    animation: bouncy3 1.5s infinite;
}
@keyframes bouncy1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    50% {
        transform: translate(0px, 0px) rotate(180deg);
    }
    100% {
        transform: translate(40px, 0px) rotate(-180deg);
    }
}

場景：
比如：loading 展示，程式碼如上。

優點：
1、無需每一幀都被記錄，通過關鍵幀設定，方便開發；
2.實現簡單，通常 UI 可以直接給到 css 檔案，前端只需要匯入即可【移動端注意螢幕適配】。

缺點：
1.css 沒法動畫互動，無法得知當前動畫執行階段；
2.transition: 需要觸發，無法自動播放；
3.animation 相容性需要加字首，導致程式碼量成倍增長；
4.對於複雜動畫的實現，匯入的 css 檔案過大，影響頁面的渲染樹生成，從而阻塞渲染。比如實現一個搖錢樹的效果，css 檔案達到百 kb，就要採取一些必要的壓縮手段，縮減檔案大小。

1.3 js 逐幀動畫

JS 動畫的原理是通過 setTimeout 或 requestAnimationFrame 方法繪製動畫幀，從而動態地改變
網頁中圖形的顯示屬性(如 DOM 樣式，canvas 點陣圖資料，SVG 物件屬性等)，進而達到動畫的目的。

demo1:
------- js 實現一個正方形從左到右的移動動畫 -----

  1. setTimeout 實現

    const element2 = document.getElementById('raf2');
const btn2 = document.getElementById('btn2');
let i = 0;
let timerId;
function move () {   
 element2.style.marginLeft = i + 'px'
 timerId = setTimeout(move, 0)
 i++;
 if (i > 200) {
     clearTimeout(timerId)
 }
}
btn2.addEventListener('click',function () {
 move()
})

  2. requestAnimationFrame 實現

    const element = document.getElementById('raf');
const btn1 = document.getElementById('btn1');
let r = 0;
let rafId;
function step () {
 element1.style.marginLeft = r+ 'px';
 rafId = window.requestAnimationFrame(step);
 r++;
 if (r > 200) { // 在兩秒後停止動畫
     cancelAnimationFrame(rafId);
 }
}
btn1.addEventListener('click', function () {
 step();
})

可以看出，實現的方式都是控制 dom 的 margin-left 樣式，執行動畫。

問題 1.1:demo1 中看出 setTimeout 的執行很快。這是為什麼呢？請接著往後看～

第二部分 瀏覽器如何渲染與動畫的渲染

2.1 瀏覽器的幀原理

問題 2：當 url 輸入到一個頁面展示出來經過了哪些過程？

這裡我們忽略 http 請求靜態檔案之前的步驟，著重看瀏覽器渲染幀是怎麼做的，從而找到瀏覽器是如何渲染動畫的。

file

藉助 chrome-performance【執行 raf.html】 同樣可以看出上圖不同階段在 performance 裡面的標註。⚠️注意：不是每幀都總是會經過管道每個部分的處理。實際上，不管是使用 JavaScript、CSS 還是網路動畫，在實現視覺變化時，管道幀對指定幀的執行通常有三種方式:

【以下截圖是以時間線為主軸，進行繪製】

file

-當修改一些會觸發 layout 的屬性，則會導致後面的同樣被更新。

file

  • 當修改只改變 paint 的屬性， 則不會重新 layout。

    file

  • 如果改一些不涉及佈局也不涉及重繪的資料，則可以直接進行合成渲染。

像 CSS 屬性具體可以查詢這個網站 ,去查閱哪些屬性會引起怎樣的幀管道：https://csstriggers.com/

例如：transform 變換，它是一個不會觸釋出局與繪製的變化的，所以使用它的時候，直接進入第三種狀態，在合成之後，直接進入 Composite 階段，是一個很好的優化手段。

file

問題 3: 控制檯上顯示出 requestAnimationFrame（rAF）的執行，那麼這個 rAF 執行與瀏覽器幀有什麼關係呢？我們接著往下看。

2.2 requestAnimationFrame 執行

我們還是執行 demo1 的程式碼：

可以看到 rAF 執行在 layout 與 paint 之前，在每幀只執行了一次 rAF，呼叫回撥函式執行動畫。

從 rAF 的執行時機，可以看出 setTimeout 的執行時機與 rAF 的不同。

我們通過對不同方式實現方塊移動動畫的 performance 抓取，可以看到：

  • setTimeout 單位幀截圖：
  • file
  • rAF 單位幀截圖：

file

對比兩者可以看出，在 16.7ms 的時間裡，seTimeout 執行了 4 次，導致此時設定的 marginLeft 和上一次渲染前 marginLeft 的差值要大於 1px 的。

而 raf 可以看出 marginLeft 和上一次渲染前 marginLeft 的差值要等於 1px 的。

從 rAf 的效能，可以看出 setTimeout 的效能會較差一點

那麼如果 JS 執行的時間過長，導致在本該繪製一幀的時候，沒有繪製，延遲到下一幀的執行繪製的時候，就會造成動畫的卡頓。【這裡可以跳到第三部分效能問題，就知道直觀的看到卡頓】

從而可以總結出：

1.setTimeout 時間不準確，因為他的執行取決於主執行緒執行的時間。

2.如果計時器頻率高於瀏覽器重新整理的頻率，即使程式碼執行了，瀏覽器沒有重新整理，也是沒有顯示的，出現掉幀情況，不流暢。

而 raf 解決了 setTimeout 動畫帶來的問題：

1.瀏覽器重新整理螢幕時自動執行，無需設定時間間隔
和 setTimeout 一樣是 n 毫秒之後再執行，但這個 n 毫秒，自動設定成瀏覽器重新整理頻率，瀏覽器重新整理一次，執行一次，不需要手動設定；
瀏覽器不重新整理，就不執行，沒有排隊掉幀的情況。

2.高頻函式節流
對於 resize、scroll 高頻觸發事件來說，使用 requestAnimationFrame 可以保證在每個繪製區間內，函式只被執行一次，節省函式執行的開銷。
如果使用 setTimeout、setInterval 可能會在瀏覽器重新整理間隔中有無用的回撥函式呼叫，浪費資源。

第三部分 效能分析以及高效能的動畫

3.1 效能分析

通過 chrome-performance 可以看整體的 fps、GPU 的情況，也可以逐幀去分析影響 scripting\rendering\painting 時間的因素，從而有針對性的提高動畫的效能。

demo3:
----- 小方塊的上下運動 -----

demo 的線上地址：https://googlechrome.github.io/devtools-samples/jank/

原始碼截圖：

file

未優化【每個方塊都需要強制 layout 去計算 position】：

file

點選 Optimize 按鈕優化後【只讀一次，並存在 pos 變數中】：

file

再次優化【新增 transform:translateZ(0)，提高層級】：

file

以上就是一個動畫逐步優化的小案例：具體操作可以檢視原文：
https://developer.chrome.com/docs/devtools/evaluate-performance/

3.2 如何優化動畫效能

根據上文的渲染機制的討論，我們可以看出，影響動畫渲染的因素就是幀管道所經歷的各個階段，從中我們可以總結一些用來優化動畫效能的手段：

  1. 提升每一幀的效能
  2. 避免頻繁的重排
  3. 避免大面積的重繪
  4. 優化 JS 的效能
  5. fps 穩定，避免掉幀，跳幀的情況
  6. 不在連續動畫中，新增高耗能的操作
  7. 如果無法避免，看可以在動畫的開頭或者結尾進行操作
  8. 開啟 GUP 加速

第四部分 常用的動畫庫

綜上的實現方式可以支援部分的動畫開發，比如點選互動，輪播器、以及純動畫的展示，比如搖錢樹、煙花等。

如果需要強互動，或者是需要一個重力世界的時候，原生 JS 的實現相對於困難。可以利用一些動畫庫，來進行開發，這些動畫基於 canvas 與 webGL 實現的。

  1. Pixi.js
  2. 新增場景
  3. 新增玩家
  4. 新增自身動作
  5. 新增互動
  6. phaser.js
    物理系統、重力系統
    可以模仿下落狀態
  7. 其他：
    create.js、three.js 3d 渲染、layaAir、Egret 3d 遊戲引擎等，可以根據不同的場景需要，選擇不同的框架使用。

總結

  1. 動畫的實現手段

file

  1. 瀏覽器渲染的簡單流程

file

  1. 開發動畫分析效能參考 performance 的使用

鳴謝

非常感謝木杪、千尋對本文的校正與建議，同時感謝琉易、霜序等夥伴在業務產品技術上幫助與支援。

相關文章