強大的CSS3/JS:幀動畫的多種實現方式與性能對比

時間 2019-12-05

標籤強大 css3 css 動畫多種實現方式性能對比欄目 CSS 简体版

原文原文鏈接

Web動畫形式

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

1\. CSS3動畫
    Transform（變形）
    Transition（過渡）
    Animation（動畫）
2\. JS動畫（操做DOM、修改CSS屬性值）
3\. Canvas動畫
4\. SVG動畫
5\. 以Three.js爲首的3D動畫

以上各類動畫形式均可以製做出一種類型的動畫，那就是幀動畫，也叫序列幀動畫，定格動畫，逐幀動畫等，這裏咱們統一用幀動畫來表述。前端

應用場景

幀動畫通常用來實現稍微複雜一點的動畫效果，同時但願動畫更細膩，設計師更自由的發揮。他能夠定義到每個時間刻度上的展示內容，咱們通常用幀動畫來作頁面的Loading，小人物，小物體元素的簡單動畫。咱們想象中的幀動畫應該有如下幾個特色：canvas

能夠自由控制播放、暫停和中止
能夠控制播放次數，播放速度
能夠添加交互，在播放完成後添加事件
瀏覽器兼容性好

素材準備

幀動畫的素材通常是先由設計師在PS中的時間軸上設計好了，而後導出圖片給前端人員，PS製做時間軸動畫通常是用來製做稍微簡單的動畫，操做簡單，方便。瀏覽器

或者是由設計師在AE的時間軸進行設計，由於AE內置了更豐富的動做效果，好比轉換，翻轉之類的，AE能夠幫助咱們實現更復雜的效果，而後再導出圖片給前端人員。函數

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

實現方案

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

1、GIF圖

咱們能夠將上面製做的幀動畫導出成GIF圖，GIF圖會連續播放，沒法暫停，它每每用來實現小細節動畫，成本較低、使用方便。但其缺點也是很明顯的：測試

畫質上，gif 支持顏色少(最大256色)、Alpha 透明度支持差，圖像鋸齒毛邊比較嚴重；
交互上，不能直接控制播放、暫停、播放次數，靈活性差；
性能上，gif 會引發頁面週期性的繪畫，性能較差。

2、CSS3幀動畫

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

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

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

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

多張圖片會帶來多個 HTTP 請求
每張圖片首次加載會形成圖片切換時的閃爍
不利於文件的管理

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

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

步驟一： 將動畫幀合併爲雪碧圖，雪碧圖的要求能夠看上面素材準備，好比下面這張幀動畫雪碧圖，共20幀。

[圖片上傳失敗...(image-91f7b7-1556627487319)]

步驟二： 使用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);}
}

3、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() 方案性能數據

如上圖，咱們經過Chrome瀏覽器的各類工具，查看了每種方案的 FPS、CPU佔用率、GPU佔用、Scripting、Rendering、Painting、內存的使用狀況，獲得如下數據：

性能-方案	css`background-position`	css`transform:translate3d()`	JS Canvas	JS`background-position`	JS`transform: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