一、原因
- 前端動畫場景需求多
- 對眾多動畫場景的技術實現方案選擇上比較模糊
- 各動畫方案的優劣及適用場景認識模糊
- 現有動畫庫太多，不知道選哪個
- 主流動畫庫的適用場景認識模糊
二、分類
動畫用途
- 展示型的動畫，類似於一張GIF圖，或者一段視訊
- 互動型的動畫：使用者自已參與的
繪製技術
- Canvas
- div
- SVG
PS:為了簡單也可以用視訊，但除非動畫的播放場景固定，不然移動端視訊在不同app、不同機型、不同系統的播放顯示都不太一樣，容易踩不少坑。
動畫型別
- Tween動畫
- 序列幀動畫
- 骨骼動畫
- SVG動畫
- 3D動畫
維度
- 2D
- 3D
三、繪製技術的差異
不管採用什麼方式來製作動畫，最終呈現到前端頁面的無非三種形式：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 引擎的速度。
四、動畫實現方式
前端動效開發，首先應該確定的是動畫用途->確認動畫型別->確認繪製技術->確認動畫的實現方式。
雖然最終呈現動畫的載體（繪製技術）就三種，但實現動畫的方式卻很多，得從動畫型別出發討論動畫的實現方式：
- Tween。補間動畫，涉及到一些緩動函式（如：常用的緩動函式）
- CSS實現（transition、animation等）
- Js實現
- 序列幀動畫
- CSS實現（animation）
- JS+DOM實現
- JS+canvas實現
- 骨骼動畫
- 一般採用Spine、DragonBones等工具匯出相應資源圖片和JSON動畫配置資源後使用。
- SVG動畫
- 使用 XML 格式定義圖形
- 可以用AI等SVG編輯工具生成SVG圖片後，配合anime.js等現有庫進行動畫製作
- 3D動畫
- DOM操作用CSS 3D實現。（
perspective屬性等） - 場景搭建用webGL(Three.js等)
- 3D模型動畫用Blender或maya等製作完成後匯出使用
- DOM操作用CSS 3D實現。（
上面列出的動畫型別對應的實現策略，從開發角度來講，可以：
- 自己實現
- 選擇現有輪子：
- 動畫庫
- 遊戲引擎、渲染引擎
自己實現
為了減少外部依賴，簡單的不復雜的動畫一般選擇自己實現。可參考下面的實現方式選擇思路：
動畫庫
這邊儘可能的收集了網上的動畫庫，並對其資訊進行了簡單介紹，篇幅問題，另起一篇文章：可能是最全的前端動效庫彙總
遊戲引擎/渲染引擎
動畫從維度上分，3D動畫一般採用諸如Three.js的渲染引擎或者遊戲引擎來實現。2D動畫在某些場景也會採用引擎。
現在都有些什麼遊戲框架可以看這裡：遊戲/渲染框架導航
五、主流動畫解決方案
-
Tween動畫
- 比較簡單，一般自己實現。
- Tween.js（提供了一些常見的緩動函式）
- Animate.css(一個跨瀏覽器的動效基礎庫，是許多基礎動效的解決方案。)
-
序列幀動畫
-
骨骼動畫
-
SVG動畫
-
3D動畫
- DOM操作的話自己用CSS 3D實現
- Three.js
-
常用動畫庫(適用、強大)
-
常用渲染引擎：
六、主流產品動畫方案
- 網易噠噠工作室H5：序列幀動畫->cavans實現
- 各種“一鏡到底”類H5:序列幀動畫->canvas實現