摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。

前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如在我們信息流業務中，從下拉頁面到進入活動頁這個過程中，我們完全可以用一個展示型的入場動畫代替原本可能只有一個小圓圈的的loading頁。

展示型動畫：

交互性動畫（可以看到屏幕那個小手勢）：

展示型動畫在實際使用的場景中，實現的方法很多，比如用gif圖，canvas，css3動畫等，但是最終輸出的結果是不帶有交互的，也就是從動畫起始狀態到結束狀態一氣呵成，這個過程用戶可以感知，但是無法參與。對于交互性動畫而言，我們可以在動畫播放的某個時間節點觸發相應的操作，進而讓用戶參與到其中，最常見的例子比如紅包雨，或者是我們世界杯踢足球的動畫，不僅僅能提升用戶的體驗，還能提升我們的產品的多元性。然而交互性動畫經常面臨的一個問題就是，通過原生代碼實現交互動畫是很復雜的，同時性能和兼容性是不得不認真考慮的問題，比較好的解決方案還是尋求相關的框架。

CSS3 Animation

canvas

SVG

WebGL

利用JavaScript驅動的動畫

伴隨著CSS3的發展，利用CSS3的transform和動畫的@keyframes就可以完成很多酷炫的動畫，但是CSS3的動畫應用場景僅僅是展示型動畫，只要動畫開始，我們就無法控制動畫的狀態，而且對于復雜的動畫，CSS3就顯得很無力了。對于JavaScript驅動的動畫，在一定程度上就可以彌補這些缺點，比如anime.js增加的timeline的概念，通過將各部分動畫鏈式執行，從而完成更為復雜的動畫，同時動畫執行的各個階段提供的回調函數也能讓我們更方便的控制動畫執行的狀態，為交互提供了可能。對于canvas，在 canvas 上繪制的圖形自身不支持 DOM 事件，只有 canvas 標簽自身支持 DOM 事件監聽。因此需要對 canvas 容器的事件進行處理，實現相對應事件的監聽及處理。WebGL可以為canvas提供硬件GPU加速渲染，借助使用系統GPU可以在移動端中更流暢的展示動畫.

對于CSS3的animation，兼容性如下:

canvas 兼容性如下：

WebGL 兼容性如下：

可以看到,CSS3的animation和canvas支持性比較好，只有WebGL在Android 4.4 Browser 完全不支持，后續我們會提到PixiJs庫，可以采用WebGL渲染，也可以優雅降級采用canvas渲染

適用場景：主要還是展示型動畫

簡介：通過 AE 上的 Bodymovin 插件將 AE 中制作好的動畫導出成一個 json 文件，通過Lottie對JSON進行解析，最后以SVG/canvas/html的方式渲染動畫。

官方文檔：http://airbnb.io/lottie/
codepen倉庫：https://codepen.io/collection...

優點：

跨平臺，一次繪制、一次轉換、隨處可用

文件更小，獲取AE導出的JSON，最后通過lottie渲染為canvas/svg/html格式

可以通過api操縱動畫的一些屬性，比如動畫速度；添加動畫各個狀態的回調函數

動畫都是在After Effects中創建的，使用Bodymovin導出，并且本機渲染無需額外的工程工作。

解放前端工程師的生產力,提高設計師做動效的自由度

缺點：

Bodymovin 插件待完善，仍然有部分 AE 效果無法成功導出

對于交互方面支持的還不是很好，更多的是用來展示動畫

Lottie 對 json 文件的支持待完善，目前有部分能成功導出成 json 文件的效果在移動端上無法很好的展現

很多AE的效果是不支持的 查看支持的特性：Supported Features

適用場景： 強展示+弱交互性動畫

簡介：Anime.js是一個輕量級的js驅動的動畫庫，主要的功能有

- 支持keyframes，連接多個動畫
- 支持Timeline，為實現更為復雜的動畫提供了可能
- 支持動畫狀態的控制playback control，播放，暫停，重新啟動，搜索動畫或時間線。
- 支持動畫狀態的callback，在動畫開始，執行中，結束時提供回調函數
- 支持svg動畫
- 可以自定義貝塞爾曲線
- 任何包含數值的DOM屬性都可以設置動畫

GitHub：https://github.com/juliangarn...
codepen倉庫：https://codepen.io/collection...
文檔演示：http://animejs.com/documentat...

功能介紹：

一定程度上，anime.js也是一個CSS3動畫庫，適用所有的CSS屬性，并且實現的@keyframes能更方便的實現幀動畫，替代CSS3復雜的定義方式。使用對象數組的形式定義每一幀
戳我：keyframes實例

anime({
    targets: "div",
    translateX: [
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一幀
        { value: 0, duration: 1000, delay: 500, elasticity: 0 }    //第二幀
    ]
})  //這個例子實現了目標元素在兩幀中實現水平位移

提供的Timeline能實現更為復雜的動畫效果，通過這個Timeline，我們可以維護不同的動畫之間的關系，進而通過多個不同的動畫組成一個更為復雜的動畫。
戳我：Timeline實例

var myTimeline = anime.timeline();
//通過.add()方法添加動畫
myTimeline
.add({
    targets: ".square",
    translateX: 250
})
.add({
    targets: ".circle",
    translateX: 250
})
.add({
    targets: ".triangle",
    translateX: 250
});

動畫播放的控制，常見的有暫停，重播，繼續，動畫狀態的跟蹤，自動播放，循環次數，抖動效果
戳我：playback controls實例

為動畫提供了回調函數，在動畫或時間線完成的開始，期間或之時執行回調函數。
戳我：callback實例

var myAnimation = anime({
    targets: "#begin .el",
    translateX: 250,
    delay: 1000,

    begin: function(anim) {   //        callback
        console.log(anim.began); //     true after 1000ms
    }
});

支持promise，動畫結束后，調用anime.finished會返回一個promise對象。
戳我：promise實例

支持svg繪制路徑，目前不支持canvas繪制
戳我：SVG實例

對于input這樣帶有數值的元素標簽，也可以通過anime實例來設置動畫
戳我：DOM ATTRIBUTES實例

anime({
    targets: input,
    value: 1000, // Animate the input value to 1000
    round: 1 // Remove decimals by rounding the value
});

優點：

顯而易見，anime.js不僅實現了CSS3動畫的深度封裝，更多的是通過js驅動來實現操作動畫的狀態，timeline實現了對于多個分支動畫的管理，對于實現更為復雜的動畫提供了可能

通過anime.js提供的playback controls和callback，同時對于promise的支持，讓我們對于動畫的簡單交互有了操作的空間

雖然不支持canvas，但是支持svg繪制路徑，我對svg還不是很了解，待之后深入學習后，在做一個補充。

瀏覽器兼容性比較好，Android 4以上全部支持

缺點與不足：

anime.js做展示型動畫是可以勝任的，在做交互性動畫方面還是需要看場景，它更多適合做一些小型的交互動畫，類似于通過觸摸屏幕踢足球這種強交互的，anime.js就不是很有優勢了。

適用場景：交互性動畫，動畫小游戲

簡介：PixiJS是一個2D 渲染引擎， Pixi 主要負責渲染畫面。可以創建豐富的交互式圖形，動畫和游戲，而無需深入了解WebGL API或處理瀏覽器和設備兼容性的問題。與此同時，PixiJS具有完整的WebGL支持，如果需要，可以無縫地回退到HTML5的canvas。PixiJs默認使用WebGL渲染，也可以通過聲明指定canvas渲染，WebGL在移動端Android 4.4 browser并不支持，不過可以使用canvas優雅降級。

Github: https://github.com/pixijs/pix...
官方文檔： http://pixijs.download/releas...
官方網站：http://www.pixijs.com/
Examples：https://pixijs.io/examples/#/...

特性（摘自官方DOCS）：

支持WebGL渲染

支持canvas 渲染（官方稱PixiJS在canvas渲染方面現在是最快的）

非常簡單易用的API

豐富的交互事件，比如完整的鼠標和移動端的觸控事件

Pixi使用和 Canvas Drawing幾乎一致的 api，但不同于 Canvas 的繪畫 api，使用 Pixi 繪制的圖形是通過 WebGL 在 GPU 上渲染

還有一系列特性需要在學習PixiJs之后了解

優勢：

最大優勢莫過于通過WebGL來調用GPU渲染動畫，這樣極大的提升了性能

無需深入了解WebGL API或者是瀏覽器兼容性（因為下面這條原因）

支持canvas回退，當前設備不支持WebGL時，PixiJs會使用canvas渲染動畫

完整的DOCS，比較活躍的社區，有利于深入的學習。不過我感覺PixiJs學習成本相對來說還是很高的

缺點：

首先是兼容的問題，WebGL在Android 4.4 是不支持的，只能使用canvas進行降級

Pixi 主要負責渲染畫面，很多其它功能開發者得自己寫或搭配其它庫來使用，不過按照目前來看，是滿足我們的需求的。

性能：

對于手機版本Android4.4 以上的手機，除了代碼層面造成的性能不足，通過WebGL調用GPU渲染，性能還是有保障的。然而對于Android4.4只能使用canvas渲染，性能還是要看動畫的復雜度，以及代碼的優化

針對不同的動畫需求，我總結了三種不同場景下的動畫庫。對于展示性的動畫，我們完全可以使用第一種方案，讓設計同學提供動畫，我們利用動畫導出的JSON，將動畫還原為svg/canvas/html。如果場景是交互型或者需要做一個小游戲，可以采用第三種方案PixiJs，通過WebGL來渲染，利用硬件資源，極大的提升性能，在兼容性方面，對于不支持WebGL的瀏覽器，可以使用canvas渲染來平穩回退。最后一種場景就是弱交互強展示，這種場景往往就是用戶點擊一下暫停執行相應操作，待操作完成繼續播放動畫，交互方面比較偏弱，這種場景下可以采用第二種方案 Anime.js，Anime.js不僅僅支持所有的css 屬性，而且可以通過Timeline，callback， playback controls來控制動畫執行的各個狀態。而且兼容性滿足我們的需求，在性能方面，只要不過多的造成頁面回流，多使用transform操作復合層，性能還是可以的（待多多嘗試，就我看的幾個例子性能還是不錯的）。最后，從需求角度分析之后，從學習成本做個簡單的小排名：PixiJs > Anime.js > lottie

實現達到 60FPS 的高性能交互動畫

requestAnimationFrame 性能更好

使用瀏覽器開發者工具檢測 CSS 動畫性能【工具】

使用 CSS3 實現 60FPS 動畫

CSS 動畫之硬件加速

Web 動畫性能指南

Canvas 與 SVG 的主要區別

Canvas 做游戲實踐分享

漸進式動畫解決方案

手淘互動動效的探索

SegmentFault 技術周刊 Vol.20 - 用 Canvas 畫個星空

調節貝塞爾曲線【工具】

不會做動畫的前端不是好開發

游戲實踐分享系列