如何選取合適的前端動效方案？

1、緣由

• 前端動畫場景需求多
• 對衆多動畫場景的技術實現方案選擇上比較模糊
  • 各動畫方案的優劣及適用場景認識模糊
• 現有動畫庫太多，不知道選哪一個
  • 主流動畫庫的適用場景認識模糊

2、分類

動畫用途

1. 展現型的動畫，相似於一張GIF圖，或者一段視頻
2. 交互型的動畫：用戶自已參與的

繪製技術

1. Canvas
2. div
3. SVG

PS:爲了簡單也能夠用視頻，但除非動畫的播放場景固定，否則移動端視頻在不一樣app、不一樣機型、不一樣系統的播放顯示都不太同樣，容易踩很多坑。

動畫類型

1. Tween動畫
2. 序列幀動畫
3. 骨骼動畫
4. SVG動畫
5. 3D動畫

維度

1. 2D
2. 3D

3、繪製技術的差別

無論採用什麼方式來製做動畫，最終呈現到前端頁面的無非三種形式：canvas、div、SVG。

特色比較

• canvas
  • 效率高、性能好、可控性高，只能處理位圖，內存佔用恆定
  • 依賴分辨率
  • 不支持事件處理器
  • 弱的文本渲染能力
  • 可以以 .png 或 .jpg 格式保存結果圖像
  • 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
• SVG
  • 處理矢量圖，不失真
  • 不依賴分辨率
  • 支持事件處理器
  • 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
  • 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
  • 不適合遊戲應用
• div
  • 包括CSS控制的DOM動畫、JS控制的DOM動畫
  • 比較適合簡單的數量較少的複雜度較低的動畫

性能差別

• 通常狀況下：JS+Canvas > CSS + DOM > JS + DOM

示例代碼（直觀效果）

• canvas和svg比較：
  • 通常狀況下，隨着屏幕大小的增大，canvas將開始降級，由於須要繪製更多的像素。
  • 隨着屏幕上的對象數目增多，SVG 將開始降級，由於咱們正不斷將這些對象添加到 DOM 中。
  • 這些度量不必定準確，如下方面的不一樣必定會引發變化：實現和平臺、是否使用徹底硬件加速的圖形，以及 JavaScript 引擎的速度。

4、動畫實現方式

前端動效開發，首先應該肯定的是動畫用途->確認動畫類型->確認繪製技術->確認動畫的實現方式。

雖然最終呈現動畫的載體（繪製技術）就三種，但實現動畫的方式卻不少，得從動畫類型出發討論動畫的實現方式：

• Tween。補間動畫，涉及到一些緩動函數（如：經常使用的緩動函數）
  1. CSS實現（transition、animation等）
  2. Js實現
• 序列幀動畫
  1. CSS實現（animation）
  2. JS+DOM實現
  3. JS+canvas實現
• 骨骼動畫
  1. 通常採用Spine、DragonBones等工具導出相應資源圖片和JSON動畫配置資源後使用。
• SVG動畫
  1. 使用 XML 格式定義圖形
  2. 能夠用AI等SVG編輯工具生成SVG圖片後，配合anime.js等現有庫進行動畫製做
• 3D動畫
  1. DOM操做用CSS 3D實現。（perspective屬性等）
  2. 場景搭建用webGL(Three.js等)
  3. 3D模型動畫用Blender或maya等製做完成後導出使用

上面列出的動畫類型對應的實現策略，從開發角度來說，能夠：

1. 本身實現
2. 選擇現有輪子：
   • 動畫庫
   • 遊戲引擎、渲染引擎

本身實現

爲了減小外部依賴，簡單的不復雜的動畫通常選擇本身實現。可參考下面的實現方式選擇思路：

動畫庫

這邊儘量的收集了網上的動畫庫，並對其信息進行了簡單介紹，篇幅問題，另起一篇文章：多是最全的前端動效庫彙總

遊戲引擎/渲染引擎

動畫從維度上分，3D動畫通常採用諸如Three.js的渲染引擎或者遊戲引擎來實現。2D動畫在某些場景也會採用引擎。

• 常見遊戲引擎
  1. Cocos
  2. Egret
  3. LayaAir
  4. Phaser
• 常見渲染引擎
  1. Pixi.js(2D動畫渲染引擎)
  2. Three.js(3D渲染引擎)
  3. Babylon.js(3D渲染引擎)

如今都有些什麼遊戲框架能夠看這裏：遊戲/渲染框架導航

5、主流動畫解決方案

• Tween動畫

  • 比較簡單，通常本身實現。
  • Tween.js（提供了一些常見的緩動函數）
  • Animate.css(一個跨瀏覽器的動效基礎庫，是許多基礎動效的解決方案。)

• 序列幀動畫

  • 本身實現（CSS、JS+canvs、JS+DOM）
  • SVGA
  • Lottie（AE製做完動畫後經過Bodymovin導出使用）
  • apng配合控制庫(如：apng-js)

• 骨骼動畫

  • Spine
  • DragonBones

• SVG動畫

  • snap.svg
  • GSAP
  • anime.js

• 3D動畫

  • DOM操做的話本身用CSS 3D實現
  • Three.js

• 經常使用動畫庫(適用、強大)

  • Animate.css
  • GSAP
  • anime.js
  • snap.svg

• 經常使用渲染引擎：

  • Pixi.js

6、主流產品動畫方案

• 網易噠噠工做室H5：序列幀動畫->cavans實現
• 各類「一鏡到底」類H5:序列幀動畫->canvas實現

參考文檔

1. W3school--HTML 5 Canvas vs. SVG
2. 前端動畫技術的研究和比較
3. 阿里巴巴 前端專家金擘(渚薰) - 漸進式動畫解決方案
4. canvas和svg性能方面選擇