隨着互聯網的持續發展，H5 頁面作為與用戶直接交互的表現層越來越復雜，呈現的形式也越來越豐富，從而也要求 H5 頁面具有更多的花樣性及動畫效果。那前端實現動畫效果的方式有哪些呢，大致有如下幾種：
一、GIF圖片
GIF圖就直接貼上圖片就好了，使用非常簡單，但GIF圖有時出現問題是沒辦法控制的，比如常見的GIF圖的閃爍現象。
二、序列幀
序列幀其實本質是GIF圖單個幀的鋪開，結合css animation一種實現方式。
具體實現方式如下：
主要用到的就是animation的steps函數，兼容性還是非常不錯的。
序列幀在 H5 開發中手機分辨率的不同，可能有輕微抖動現象，可通過將該dom嵌套到SVG 中解決。
三、css animation
animation 屬性用來指定一組或多組動畫，每組之間用逗號相隔。
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
timing-function
animation-timing-function屬性定義CSS動畫在每一動畫周期中執行的節奏。可能值為一或多個 <timing-function>。
對於關鍵幀動畫來說，timing function作用於一個關鍵幀周期而非整個動畫周期，即從關鍵幀開始開始，到關鍵幀結束結束。
time-function有以下幾種：
ease-in; //加速 ease-out;//減速 ease-in-out;//先加速后減速 linear;//勻速 step-start;//等同於steps(1,start) step-end;//等同於steps(1, end) cubic-bezier(0.1, 0.7, 1.0, 0.1);//貝塞爾曲線 steps(number, end);//從number位置開始，逐步執行
其中steps函數我們在上面序列幀動畫使用過，它其實就是動畫拆成n步，逐步執行的動畫函數。
四、Lottie 動畫
Lottie 是由 Airbnb進行開發一款動畫框架，在各平台都有支持，Window、Android，iOS，Web等。
在Web 端其本質是基於 SVG 或 Canvas，使用 JS 進行開發的動畫實現，由於路徑較為復雜，在日常開發中一般需要配合 UI 設計師輸出相應的動畫路徑文件(json或js格式)進行渲染。
具體調用方式如下，其中data就是動畫的配置文件。
參數說明：
五、WebGL與Canvas
當頁面動畫復雜性較高時，使用dom進行繪制可能會出現性能問題，畫面會出現卡頓，此時可以考慮WebGL或Canvas進行渲染。
WebGL（全寫Web Graphics Library）是一種3D繪圖標准，這種繪圖技術標准允許把JavaScript和OpenGL ES 2.0結合在一起。
通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。
當然3D是只能用WebGL渲染的，我們這里對比WebGL2D 和 Canvas 2D的情況。
1、性能對比
從結果中可見，當需要執行大量繪制任務時，WebGL的性能遠遠超越了Canvas 2D Api，達到了后者的數10倍。
2、兼容性
（1） webGL
（2） canvas
一般情況下如果瀏覽器不支持WebGL，就需要降級到Canvas去處理。
如何檢測WebGL是否支持？
canvas.getContext(“experimental-webgl”)
若返回結果為undefined則表示不支持，否則便可以使用WebGL
3、調用方式
繪制一個簡單的矩形，內部填充顏色為紅色。
使用canvas API 的編寫方式：
使用webGL的編寫方式：
六、游戲動畫引擎
當我們的動畫功能較為復雜，直接使用webGL或canvas API開發成本較大，所以可以選擇一款適用於當前場景的游戲引擎進行開發。
動畫又可以從維度上細分，3D動畫一般采用諸如Three.js的渲染引擎或者別的游戲引擎來實現，2D動畫也有非常優秀的引擎支持。
下面是各游戲動畫引擎的橫向對比：
1、2D，3D，VR 都支持的游戲引擎
（1）Egret
白鷺引擎是企業級游戲引擎，有團隊維護。Egret 在工作流的支持上做的是比較好的，從 Wing 的代碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調試，最后到原生打包（支持 APP 打包），游戲開發過程中的每個環節基本都有工具支撐。
官網上的示例，教程也是比較多。白鷺引擎支持了 WebAssembly ，這對於性能的提升又是一大里程碑。
（圖片來源：白鷺引擎官網 ）
（2）LayaAir
支持Canvas和WebGL模式自適應。支持ActionScript3、TypeScript、JavaScript三種開發語言，適用2D、3D、VR產品研發。
性能媲美原生APP，一次開發HTML5、APP(安卓與iOS)、微信小游戲、QQ玩一玩同時發布。
2、2D、3D游戲引擎
（1） Three.js
（圖片來源：Three.js官網）
Three.js 官方定位並不是游戲引擎，而是一個 JS 3D 庫。Three.js 更傾向於展示型的視覺呈現，也有用戶直接拿 Three.js 來開發 H5 游戲。
（2）Pixi.js
一般來說，WebGL 的渲染速度都會比 Canvas 快，這是由倆者的繪制路徑決定的。Pixi 最大的特點在於，Pixi 具有完整的 WebGL 支持，卻並不要求開發者掌握 WebGL 的相關知識，並在需要時無縫地回退到 Canvas 。
相較於很多同類產品，它的渲染能力是比較強大的。然而，Pixi 也有不足的地方，Pixi 對於動畫的支持是比較缺乏的，在實際開發中，常常需要引進額外的動畫庫，如 GSAP。
（3） Phaser
Phaser 在渲染方面直接封裝了 Pixi；架構方面，Phaser 內嵌了3個物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系統、動畫、預下載和設備適配方案；兼容性方面，Phaser 的焦點是放在移動端瀏覽器上的；API 方面，Phaser 能實現豐富的游戲功能，適合復雜度高的游戲開發。
（4）CreateJs
（圖片來源：CreateJs官網）
CreateJS 官方提供了 TweenJS 支持動畫開發，同時通過 SoundJS 和 PreLoadJS 提供了音頻和預下載的支持，對於 H5 游戲基礎功能的支持是足夠的。在兼容性方面，CreateJS 支持 PC 端和移動端幾乎所有的瀏覽器。此外，CreateJS 還支持用 flash CC 開發導出由 CreateJS 渲染的 H5 游戲。
（5） Hilo
Hilo 是阿里團隊推出的一個開源項目，包括Hilo.js（2D）和Hilo3D 支持模塊化開發，同時提供了多種模塊范式的包裝版本和跨終端解決方案，Hilo.js適合用來開發營銷小游戲。其體積也是比較輕量的，只有70kb左右。
主要特性：
- 多種渲染方式, 提供DOM，Canvas，Flash，WebGL等多種渲染方案。
- 極簡內核：Hilo核心模塊極精簡，保留了2D游戲引擎最必要的模塊，同時采用模塊化管理。
- 物理引擎支持——Chipmunk，支持自擴展物理實現；骨骼動畫支持——DragonBones。
- 案例豐富：支持天貓，手淘多次大型和日常活動，如雙十一，年中大促等。代表產品如狂歡城。
案例：
（圖片來源：Hilo Github）
官方Examples：
(圖片來源：Hilo Github)
Hilo.js游戲引擎基本滿足日常的2d動畫的開發需求。兼容性好，支持4個渲染方式，一般選擇canvas，經過實踐android4.4渲染無問題，操作輕微卡頓。組件庫非常的輕量，hilo-standalone.min.js只有70k，對比Phaser(946k)，hilo在代碼體積這塊是極其的友好了。
七、參考文獻
作者：Luo Ran