目錄：
動畫庫 - Lottie-iOS
動畫庫 - SVGA-iOS
動畫庫 - Keyframes-iOS
APP常見的動畫庫對比：
| 動畫庫 | Lottie | SVGA | Keyframes |
|---|---|---|---|
| 支持平臺 | Android/iOS/Web | Android/iOS/Web | Android/iOS |
| 設(shè)計工具支持 | AfterEffects(AE) | AE&Flash | AE |
| 功能邊界 | 所有 | 部分 | 矢量圖 |
| 導(dǎo)出工具 | 插件 | 插件 | 腳本 |
| 設(shè)計成本 | 需要命名規(guī)范 | 無 | 需要腳本 |
| 資源包大小zip | 2.6M | 767K | |
| 官網(wǎng) | airbnb.design/lottie/ | svga.io/ | git地址 |
簡介
Lottie是一個可以解析使用【bodymovin】插件從 Adobe After Effects 中導(dǎo)出的格式為json的文件披坏，并在 iOS臼朗、Android役电、macOS呵晚、React Native 和 Windows 中進(jìn)行解析使用的開源庫。
設(shè)計師導(dǎo)出流程圖
優(yōu)缺點
優(yōu)點：
- 開發(fā)效率高送讲，設(shè)計滿意度高截型。設(shè)計師導(dǎo)出json + images文件陶冷，開發(fā)幾行代碼就能實現(xiàn)其效果。
- 替換GIF桥嗤，遠(yuǎn)程配置動畫须妻，跨品臺。運營直接在配置設(shè)計師給的json文件和資源文件泛领，就能實現(xiàn)動畫效果荒吏。
- 提升APP性能體驗。比如iOS的GIF圖非常浪費CPU和內(nèi)存渊鞋，但Lottie會好很多绰更。
缺點：(轉(zhuǎn)自知乎博主)
- Lottie不支持任何形式的表達(dá)式瞧挤，如果把表達(dá)式轉(zhuǎn)換為關(guān)鍵幀會降低性能，請自行斟酌
- 對于描邊來說儡湾，由于AE本身不支持內(nèi)外描邊皿伺，lottie只能導(dǎo)出中心描邊。在sketch/ai中請不要使用內(nèi)外描邊盒粮。
- 果動畫中涉及到大量位圖鸵鸥，最終性能會大幅度降低。
demo實例：
-
Pods引入解析庫lottie-ios丹皱。為了快速實現(xiàn)demo妒穴，沒有使用最新版本的庫，如果你開發(fā)用到此功能摊崭，建議學(xué)習(xí)使用最新版本讼油，畢竟Lottie庫越來越完善。
pod 'lottie-ios', '~> 2.5.2'
-
導(dǎo)入資源文件
json + images - 具體實現(xiàn)
LOTAnimationView *calculateView = [[LOTAnimationView alloc] init];
calculateView.frame = self.view.bounds;
[calculateView setContentMode:UIViewContentModeScaleAspectFit];
[calculateView setAnimationNamed:@"xinghe" inBundle:[NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"xinghe" ofType:@"bundle"]]];
[calculateView play];
[calculateView setLoopAnimation:YES];
[self.view addSubview:calculateView];
-
動畫效果
動畫效果
