幀動畫的多種實現方式與效能對比

迅雷前端發表於2019-03-05
動畫

作者: 前端向朔 from 迅雷前端

原文地址：幀動畫的多種實現方式與效能對比

本文目錄

Web動畫形式
應用場景
素材準備
實現方案
    一、GIF圖
    二、CSS3幀動畫
    三、JS幀動畫
方案總結
注意事項
總結
複製程式碼

Web動畫形式

首先我們來了解一下Web有哪些動畫形式

1. CSS3動畫
    Transform（變形）
    Transition（過渡）
    Animation（動畫）
2. JS動畫（操作DOM、修改CSS屬性值）
3. Canvas動畫
4. SVG動畫
5. 以Three.js為首的3D動畫
複製程式碼

以上各種動畫形式都可以製作出一種型別的動畫，那就是幀動畫，也叫序列幀動畫，定格動畫，逐幀動畫等，這裡我們統一用幀動畫來表述。

這裡寫圖片描述

應用場景

幀動畫一般用來實現稍微複雜一點的動畫效果，同時希望動畫更細膩，設計師更自由的發揮。他可以定義到每一個時間刻度上的展現內容，我們一般用幀動畫來做頁面的Loading，小人物，小物體元素的簡單動畫。我們想象中的幀動畫應該有以下幾個特點：

  1. 可以自由控制播放、暫停和停止
  2. 可以控制播放次數，播放速度
  3. 可以新增互動，在播放完成後新增事件
  4. 瀏覽器相容性好

素材準備

幀動畫的素材一般是先由設計師在PS中的時間軸上設計好了，然後匯出圖片給前端人員，PS製作時間軸動畫一般是用來製作稍微簡單的動畫，操作簡單，方便。

或者是由設計師在AE的時間軸進行設計，因為AE內建了更豐富的動作效果，比如轉換，翻轉之類的，AE可以幫助我們實現更復雜的效果，然後再匯出圖片給前端人員。

這裡幀動畫素材的要求，每一幀的圖片最好是偶數寬高，偶數張，最好周圍能有一些留白。

實現方案

將目前想到的解決方案梳理如下圖，同時我們將對每種方案進行詳細介紹。

這裡寫圖片描述

一、GIF圖

我們可以將上面製作的幀動畫匯出成GIF圖，GIF圖會連續播放，無法暫停，它往往用來實現小細節動畫，成本較低、使用方便。但其缺點也是很明顯的：

  1. 畫質上，gif 支援顏色少(最大256色)、Alpha 透明度支援差，影象鋸齒毛邊比較嚴重；
  2. 互動上，不能直接控制播放、暫停、播放次數，靈活性差；
  3. 效能上，gif 會引起頁面週期性的繪畫，效能較差。

二、CSS3幀動畫

CSS3幀動畫是我們今天需要重點介紹的方案，最核心的是利用CSS3中Animation動畫，確切的說是使用animation-timing-function 的階梯函式 steps(number_of_steps, direction) 來實現逐幀動畫的連續播放。

幀動畫的實現原理是不斷切換視覺內圖片內容，利用視覺滯留生理現象來實現連續播放的動畫效果，下面我們來介紹製作CSS3幀動畫的幾種方案。

（1）連續切換動畫圖片地址src（不推薦）

我們將圖片放到元素的背景中（background-image），通過更改 background-image 的值實現幀的切換。但是這種方式會有以下幾個缺點，所以該方案不推薦。

  • 多張圖片會帶來多個 HTTP 請求
  • 每張圖片首次載入會造成圖片切換時的閃爍
  • 不利於檔案的管理

（2）連續切換雪碧圖位置（推薦）

我們將所有的幀動畫圖片合併成一張雪碧圖，通過改變 background-position 的值來實現動畫幀切換。分兩步進行：

步驟一： 將動畫幀合併為雪碧圖，雪碧圖的要求可以看上面素材準備，比如下面這張幀動畫雪碧圖，共20幀。

這裡寫圖片描述

步驟二： 使用steps階梯函式切換雪碧圖位置

先看寫法一：

<div class="sprite"></div>

.sprite {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(1,end) both infinite;
}
@keyframes frame {
    0% {background-position: 0 0;}
    5% {background-position: -300px 0;}
    10% {background-position: -600px 0;}
    15% {background-position: -900px 0;}
    20% {background-position: -1200px 0;}
    25% {background-position: -1500px 0;}
    30% {background-position: -1800px 0;}
    35% {background-position: -2100px 0;}
    40% {background-position: -2400px 0;}
    45% {background-position: -2700px 0;}
    50% {background-position: -3000px 0;}
    55% {background-position: -3300px 0;}
    60% {background-position: -3600px 0;}
    65% {background-position: -3900px 0;}
    70% {background-position: -4200px 0;}
    75% {background-position: -4500px 0;}
    80% {background-position: -4800px 0;}
    85% {background-position: -5100px 0;}
    90% {background-position: -5400px 0;}
    95% {background-position: -5700px 0;}
    100% {background-position: -6000px 0;}
}
複製程式碼

針對以上動畫有疑問？

問題一：既然都詳細定義關鍵幀了，是不是可以不用steps函式了，直接定義linear變化不就好了嗎？

animation: frame 10s linear both infinite;

如果我們定義成這樣，動畫是不會階梯狀，一步一步執行的，而是會連續的變化背景圖位置，是移動的效果，而不是切換的效果，如下圖：

這裡寫圖片描述

問題二：不是應該設定為20步嗎，怎麼變成了1？

這裡我們先來了解下animation-timing-function屬性。

CSS animation-timing-function屬性定義CSS動畫在每一動畫週期中執行的節奏。對於關鍵幀動畫來說，timing function作用於一個關鍵幀週期而非整個動畫週期，即從關鍵幀開始開始，到關鍵幀結束結束。

timing-function 作用於每兩個關鍵幀之間，而不是整個動畫。

接著我們來了解下steps() 函式：

  • steps 函式指定了一個階躍函式，它接受兩個引數。
  • 第一個引數接受一個整數值，表示兩個關鍵幀之間分幾步完成。
  • 第二個引數有兩個值< start > or < end >。預設值為< end > 。
  • step-start 等同於 step(1, start)。step-end 等同於 step(1, end)。

綜上我們可以知道，因為我們詳細定義了一個關鍵幀週期，從開始到結束，每兩個關鍵幀之間分 1 步展示完，也就是說0% ~ 5%之間變化一次，5% ~ 10%變化一次，所以我們這樣寫才能達到想要的效果。

再看寫法二：

<div class="sprite"></div>

.sprite {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {
    0% {background-position: 0 0;}//可省略
    100% {background-position: -6000px 0;}
}
複製程式碼

這裡我們定義了關鍵幀的開始和結束，也就是定義了一個關鍵幀週期，但因為我們沒有詳細的定義每一幀的展示，所以我們要將0%~100%這個區間分成20步來階段性展示。

也可以換成關鍵字的寫法，還可以只定義最後一幀，因為預設第一幀就是初始位置。

@keyframes frame {
    from {background-position: 0 0;}//可省略
    to {background-position: -6000px 0;}
}
複製程式碼

（3）連續移動雪碧圖位置（移動端推薦）

跟第二種基本一致，只是切換雪碧圖的位置過程換成了transform:translate3d()來實現，不過要加多一層overflow: hidden;的容器包裹，這裡我們以只定義初始和結束幀為例，使用transform可以開啟GPU加速，提高機器渲染效果，還能有效解決移動端幀動畫抖動的問題。

<div class="sprite-wp">
    <div class="sprite"></div>
</div>

.sprite-wp {
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {
    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {
	0% {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-6000px,0,0);}
}
複製程式碼

三、JS幀動畫

（1）通過JS來控制img的src屬性切換（不推薦）

和上面CSS3幀動畫裡面切換元素background-image屬性一樣，會存在多個請求等問題，所以該方案我們不推薦，但是這是一種解決思路。

（2）通過JS來控制Canvas影象繪製

通過Canvas製作幀動畫的原理是用drawImage方法將圖片繪製到Canvas上，不斷擦除和重繪就能得到我們想要的效果。

<canvas id="canvas" width="300" height="300"></canvas>

(function () {
    var timer = null,
        canvas = document.getElementById("canvas"),
        context = canvas.getContext('2d'),
        img = new Image(),
        width = 300,
        height = 300,
        k = 20,
        i = 0;
    img.src = "frame.png";

    function drawImg() {
        context.clearRect(0, 0, width, height);
        i++;
        if (i == k) {
            i = 0;
        }
        context.drawImage(img, i * width, 0, width, height, 0, 0, width, height);
        window.requestAnimationFrame(drawImg);
    }
    img.onload = function () {
        window.requestAnimationFrame(drawImg);
    }
})();
複製程式碼

上面是通過改變裁剪影象的X座標位置來實現動畫效果的，也可以通過改變畫布上放置影象的座標位置實現，如下： context.drawImage(img, 0, 0, width*k, height,-i*width,0,width*k,height);。

（3）通過JS來控制CSS屬性值變化

這種方式和前面CSS3幀動畫一樣，有三種方式，一種是通過JS切換元素背景圖片地址background-image，一種是通過JS切換元素背景圖片定位background-position，最後一種是通過JS移動元素transform:translate3d()，第一種不做介紹，因為同樣會存在多個請求等問題，不推薦使用，這裡實現後面兩種。

  • 切換元素背景圖片位置 background-position
.sprite {
    width: 300px;
    height: 300px;
    background: url(frame.png) no-repeat 0 0;
}

<div class="sprite" id="sprite"></div>

(function(){
    var sprite = document.getElementById("sprite"),
	    picWidth = 300,
	    k = 20,
	    i = 0,
	    timer = null;
    // 重置背景圖片位置
    sprite.style = "background-position: 0 0";
    // 改變背景圖位置
    function changePosition(){
        sprite.style = "background-position: "+(-picWidth*i)+"px 0";
        i++;
        if(i == k){
            i = 0;
        }
        window.requestAnimationFrame(changePosition);
    }
    window.requestAnimationFrame(changePosition);
})();
複製程式碼
  • 移動元素背景圖片位置 transform:translate3d()
.sprite-wp {
   width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {
    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
}

<div class="sprite-wp">
    <div class="sprite" id="sprite"></div>
</div>

(function () {
    var sprite = document.getElementById("sprite"),
        picWidth = 300,
        k = 20,
        i = 0,
        timer = null;
    // 重置背景圖片位置
    sprite.style = "transform: translate3d(0,0,0)";
    // 改變背景圖移動
    function changePosition() {
        sprite.style = "transform: translate3d(" + (-picWidth * i) + "px,0,0)";
        i++;
        if (i == k) {
            i = 0;
        }
        window.requestAnimationFrame(changePosition);
    }
    window.requestAnimationFrame(changePosition);
})();
複製程式碼

方案總結

總結以上幾種方案，我們可以看到GIF圖有一定的優點同時缺點和侷限性也比較明顯，所以這種方案看情況選擇使用。

其他實現方案的效能如何呢，我們來比較一下，如果測試結果出現偏差，可能與測試環境變化有關。

測試環境：

系統：Windows 10 專業版
處理器：Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz 3.41GHz
RAM: 8.00GB
瀏覽器：Chrome 72.0
複製程式碼

CSS `transform:translate3d()` 方案效能資料

CSS transform:translate3d() 方案效能資料

如上圖，我們通過Chrome瀏覽器的各種工具，檢視了每種方案的 FPS、CPU佔用率、GPU佔用、Scripting、Rendering、Painting、記憶體的使用情況，得到以下資料：

效能-方案 cssbackground-position csstransform:translate3d() JS Canvas JSbackground-position JStransform:translate3d()
FPS 60 51 60 60 60
CPU 5%-6.2% 0.3%-1% 7%-8% 6%-8% 6%-8%
GPU 3.8MB 4-10MB 0 3.8MB 4-11MB
Scripting 0 0 2.51% 2.61% 3.18%
Rendering 1.17% 0.141% 0.84% 1.65% 2.71%
Painting 1.58% 0.01% 1.63% 1.75% 1.05%
記憶體 20112K 21120K 21588K 20756K 21576K

通過分析以上資料我們可以得出以下幾點：

  1. 除了css transform:translate3d() 方案，其他方案的FPS都能達到60FPS的流暢程度，但該方案的FPS也不是很低。
  2. CPU佔用率最低的方案是 css transform:translate3d() 方案。
  3. GPU佔用最低的方案是 JS Canvas 繪製方案。
  4. CSS 方案沒有指令碼開銷
  5. Rendering 最少的是 css transform:translate3d() 方案。
  6. Painting 最少的是 css transform:translate3d() 方案。
  7. 各方案記憶體佔用區別不大。

結論：我們看到，在7個指標中，css transform:translate3d() 方案將其中的4個指標做到了最低，從這點看，我們完全有理由選擇這種方案來實現CSS幀動畫。

至於其他方案的絕對比較暫時沒法給出結論，看具體情況來選擇，也看開發者對哪個效能指標的追求。

延伸來看我們的Web動畫，每種形式的動畫都有其各自的有點，比如大量的粒子效果用Canvas繪製方案肯定要比DOM+CSS實現要好的，大量的CSS屬性值變換，使用 transform 實現效能是要更好的。

注意事項

素材：動畫圖片寬高最好是偶數，總幀數最好是偶數，圖片拼接處最好有一定的留白。

適配：移動端適配最好不用rem，因為rem的計算會造成小數四捨五入，造成一定的抖動效果，建議直接用px作為單位，同時輔助以scale（zoom）媒體查詢進行適配。如果使用rem適配，試試使用transform的方案，抖動問題可以得到優化解決。

對於幀與幀之間的盈虧互補現象導致動畫抖動，想要了解更多，可以閱讀《CSS技巧：逐幀動畫抖動解決方案》。

tips：使用 will-change 可以在元素屬性真正發生變化之前提前做好對應準備。

總結

本文我們主要梳理了目前實現幀動畫的幾種方案，同時對各種方案進行效果實現，優劣討論，效能對比，同時簡單介紹了幀動畫實現過程的注意事項，最後我們得出結論，css transform:translate3d() 方案在實現和效能上都明顯優於其他方案。

參考來源：

  1. 《CSS3動畫之逐幀動畫》
  2. 《指尖上行》

掃一掃關注迅雷前端公眾號

幀動畫的多種實現方式與效能對比

相關文章