前端動畫調研-V1

時間 2019-11-07

標籤前端動畫調研 v1 简体版

原文原文鏈接

動畫調研-V1

前言：動畫從用途上能夠分爲兩種，一種是展現型的動畫，相似於一張GIF圖，或者一段視頻，另外一種就是交互性的動畫。這兩種都有具體的應用場景，好比在咱們信息流業務中，從下拉頁面到進入活動頁這個過程當中，咱們徹底能夠用一個展現型的入場動畫代替本來可能只有一個小圓圈的的loading頁。javascript

展現型動畫： css

交互性動畫（能夠看到屏幕那個小手勢）： html

一. 展現型動畫 VS 交互性動畫

展現型動畫在實際使用的場景中，實現的方法不少，好比用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能夠在移動端中更流暢的展現動畫.java

三. 相關技術的兼容性

對於CSS3的animation，兼容性以下:
canvas 兼容性以下：
WebGL 兼容性以下：

能夠看到,CSS3的animation和canvas支持性比較好，只有WebGL在Android 4.4 Browser 徹底不支持，後續咱們會提到PixiJs庫，能夠採用WebGL渲染，也能夠優雅降級採用canvas渲染css3

四. 現有的幾種方案

1. AE + bodymovin + Lottie

適用場景：主要仍是展現型動畫git

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

官方文檔：airbnb.io/lottie/ codepen倉庫：codepen.io/collection/…web

優勢：json

跨平臺，一次繪製、一次轉換、隨處可用
文件更小，獲取AE導出的JSON，最後經過lottie渲染爲canvas/svg/html格式
能夠經過api操縱動畫的一些屬性，好比動畫速度；添加動畫各個狀態的回調函數
動畫都是在After Effects中建立的，使用Bodymovin導出，而且本機渲染無需額外的工程工做。
解放前端工程師的生產力,提升設計師作動效的自由度

缺點：

Bodymovin插件待完善，仍然有部分 AE 效果沒法成功導出
對於交互方面支持的還不是很好，更多的是用來展現動畫
Lottie 對 json 文件的支持待完善，目前有部分能成功導出成 json文件的效果在移動端上沒法很好的展示
不少AE的效果是不支持的查看支持的特性：Supported Features

2. Anime.js

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

簡介：Anime.js是一個輕量級的js驅動的動畫庫，主要的功能有 - 支持keyframes，鏈接多個動畫 - 支持Timeline，爲實現更爲複雜的動畫提供了可能 - 支持動畫狀態的控制playback control，播放，暫停，從新啓動，搜索動畫或時間線。 - 支持動畫狀態的callback，在動畫開始，執行中，結束時提供回調函數 - 支持svg動畫 - 能夠自定義貝塞爾曲線 - 任何包含數值的DOM屬性均可以設置動畫

GitHub：github.com/juliangarni… codepen倉庫：codepen.io/collection/… 文檔演示：animejs.com/documentati…

功能介紹：

必定程度上，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就不是頗有優點了。

3. PixiJs

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

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

Github: github.com/pixijs/pixi… 官方文檔： pixijs.download/release/doc… 官方網站：www.pixijs.com/ Examples：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

六.動畫性能分析參考

七. 參考連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。