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

背景

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

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

<->手機掃碼體驗

【年報】

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

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

1.1 gif 實現

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

使用：

![file](https://img2022.cnblogs.com/other/2332333/202205/2332333-20220519101607717-1405608413.png)

優點：
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 請求靜態檔案之前的步驟，著重看瀏覽器渲染幀是怎麼做的，從而找到瀏覽器是如何渲染動畫的。

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

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

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

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

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

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

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

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

2.2 requestAnimationFrame 執行

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

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

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

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

• setTimeout 單位幀截圖：

• rAF 單位幀截圖：

對比兩者可以看出，在 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/

原始碼截圖：

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

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

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

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

3.2 如何優化動畫效能

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

1. 提升每一幀的效能

• 避免頻繁的重排
• 避免大面積的重繪
• 優化 JS 的效能

2. fps 穩定，避免掉幀，跳幀的情況

• 不在連續動畫中，新增高耗能的操作
• 如果無法避免，看可以在動畫的開頭或者結尾進行操作

3. 開啟 GUP 加速

第四部分 常用的動畫庫

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

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

1. Pixi.js

• 新增場景
• 新增玩家
• 新增自身動作
• 新增互動

2. phaser.js
   物理系統、重力系統
   可以模仿下落狀態

3. 其他：
   create.js、three.js 3d 渲染、layaAir、Egret 3d 遊戲引擎等，可以根據不同的場景需要，選擇不同的框架使用。

總結

1. 動畫的實現手段

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

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

鳴謝

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