近期項(xiàng)目出于項(xiàng)目的包體大小縮減和復(fù)雜動(dòng)畫的流暢性與還原度考慮期犬，將序列幀動(dòng)畫根據(jù)在不同動(dòng)畫庫的表現(xiàn)進(jìn)行替換溺忧，主要考慮因素是動(dòng)畫資源大小微渠、動(dòng)畫的還原度以及動(dòng)畫在部分低端機(jī)型的表現(xiàn)霎苗。
圖片來源于Lottie官網(wǎng)
| 動(dòng)畫庫 | 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
開發(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)畫過程中復(fù)用紋理
設(shè)計(jì)成本
- 不支持復(fù)雜的矢量形狀圖層
- AE自帶的漸變、生成哩掺、描邊凿叠、擦除等
- 對(duì)圖片動(dòng)畫更加友好
開發(fā)成本
- 文件資源較小
- 三端通用
- 每個(gè)動(dòng)畫播放都會(huì)重新解壓，需要重新設(shè)計(jì)一套緩存策略（尤其在列表中使用）
- zlib打包，不方便解壓和追蹤包內(nèi)容
Lottie
設(shè)計(jì)師插件鏈接：
https://github.com/airbnb/lottie-web
開發(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)畫過程中復(fù)用圖層
- 當(dāng)需要解析高階插值，性能相對(duì)差一些
設(shè)計(jì)成本
- 基本滿足所有種類的矢量動(dòng)畫和圖片動(dòng)畫
開發(fā)成本
- 三端通用
- 緩存策略可以滿足業(yè)務(wù)需求履恩，不需要二次開發(fā)
- 文件資源相對(duì)較大
- 圖片需要重命名 & 偶先播不出來動(dòng)效
Spine
設(shè)計(jì)師鏈接：
http://zh.esotericsoftware.com/spine-quickstart
開發(fā)者集成鏈接:
http://zh.esotericsoftware.com/spine-runtimes
動(dòng)畫原理：
- 通過控制骨骼的動(dòng)作與貼圖的方式還原動(dòng)畫锰茉，使用差值算法計(jì)算中間幀
- 動(dòng)畫之間可以進(jìn)行混合（如一個(gè)角色可以開槍射擊呢蔫，同時(shí)也可以走切心、跑、跳或者游泳）
設(shè)計(jì)成本
- 學(xué)習(xí)成本相對(duì)較大
開發(fā)成本
- 三端通用
- 文件資源較小片吊，復(fù)用率高
- 動(dòng)畫性能較好绽昏，可組合動(dòng)畫
- 研發(fā)成本相對(duì)比較大
參考資料：
SVGA官方文檔
Lottie官方文檔
Spine官方文檔
