近期項(xiàng)目出于項(xiàng)目的包體大小縮減和復(fù)雜動(dòng)畫的流暢性與還原度考慮，將序列幀動(dòng)畫根據(jù)在不同動(dòng)畫庫(kù)的表現(xiàn)進(jìn)行替換，主要考慮因素是動(dòng)畫資源大小、動(dòng)畫的還原度以及動(dòng)畫在部分低端機(jī)型的表現(xiàn)。
| 動(dòng)畫庫(kù) | SVGA | Lottie | Spine |
|---|---|---|---|
| 支持平臺(tái) | iOS/Android/Web | iOS/Android/Web | iOS/Android/Web |
| 設(shè)計(jì)工具支持 | AE & Flash | AE | AE |
| 功能邊界 | 部分 | 大部分 | 大部分 |
| 設(shè)計(jì)成本 | 插件 | 插件 | 單獨(dú)的設(shè)計(jì)工具 |
SVGA
設(shè)計(jì)師插件鏈接：
https://svga.io/intro.html
開(kāi)發(fā)者集成鏈接：
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web
在線預(yù)覽鏈接：
http://svga.io/svga-preview.html
動(dòng)畫原理：
- 逐幀渲染，每一幀均為關(guān)鍵幀，只需渲染每個(gè)元素?zé)o需插值計(jì)算
- 播放前一次性上傳紋理到 GPU，并在動(dòng)畫過(guò)程中復(fù)用紋理
設(shè)計(jì)成本
- 不支持復(fù)雜的矢量形狀圖層
- AE自帶的漸變、生成、描邊、擦除等
- 對(duì)圖片動(dòng)畫更加友好
開(kāi)發(fā)成本
- 文件資源較小
- 三端通用
- 每個(gè)動(dòng)畫播放都會(huì)重新解壓，需要重新設(shè)計(jì)一套緩存策略（尤其在列表中使用）
- zlib打包，不方便解壓和追蹤包內(nèi)容
Lottie
設(shè)計(jì)師插件鏈接：
https://github.com/airbnb/lottie-web
開(kāi)發(fā)者集成鏈接:
https://github.com/airbnb/lottie-ios
https://github.com/airbnb/lottie-android
https://github.com/airbnb/lottie-web
動(dòng)畫原理：
- 逐層渲染，完全按照設(shè)計(jì)工具的設(shè)計(jì)思路還原
- 播放解析多個(gè)圖層配置并添加相應(yīng)動(dòng)畫，并在動(dòng)畫過(guò)程中復(fù)用圖層
- 當(dāng)需要解析高階插值，性能相對(duì)差一些
設(shè)計(jì)成本
- 基本滿足所有種類的矢量動(dòng)畫和圖片動(dòng)畫
開(kāi)發(fā)成本
- 三端通用
- 緩存策略可以滿足業(yè)務(wù)需求，不需要二次開(kāi)發(fā)
- 文件資源相對(duì)較大
- 圖片需要重命名 & 偶先播不出來(lái)動(dòng)效
Spine
設(shè)計(jì)師鏈接：
http://zh.esotericsoftware.com/spine-quickstart
開(kāi)發(fā)者集成鏈接:
http://zh.esotericsoftware.com/spine-runtimes
動(dòng)畫原理：
- 通過(guò)控制骨骼的動(dòng)作與貼圖的方式還原動(dòng)畫，使用差值算法計(jì)算中間幀
- 動(dòng)畫之間可以進(jìn)行混合（如一個(gè)角色可以開(kāi)槍射擊，同時(shí)也可以走、跑、跳或者游泳）
設(shè)計(jì)成本
- 學(xué)習(xí)成本相對(duì)較大
開(kāi)發(fā)成本
- 三端通用
- 文件資源較小，復(fù)用率高
- 動(dòng)畫性能較好，可組合動(dòng)畫
- 研發(fā)成本相對(duì)比較大
參考資料：
SVGA官方文檔
Lottie官方文檔
Spine官方文檔
