Lottie介紹
“Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovinand renders the vector animations natively on mobile and through React Native!” - 官網(wǎng)：https://github.com/airbnb/lottie-ios
大意：Lottie 是一個可應(yīng)用于Andriod和iOS的動畫庫，它通過bodymovin插件來解析Adobe After Effects 動畫并導(dǎo)出為json文件，通過手機(jī)端原生的方式或者通過React Native的方式渲染出矢量動畫。在 iOS、Android、macOS、React Native 中都可以進(jìn)行解析。
這個庫是由 Airbnb 開發(fā)，并在2017年2月份左右開源的
以下是官方實現(xiàn)的一部分效果：
開發(fā)人員有了這個框架，再也不用去苦惱各種動畫的實現(xiàn)了。這個框架，UI設(shè)計人員將動畫圖制作好了后，利用工具轉(zhuǎn)為json文件，開發(fā)人員通過框架提供的方法加載json就可以實現(xiàn)各種精彩的動畫，但是有一個缺點，這個框架的動畫效果只能作為展示，不能產(chǎn)生交互行為。
一、集成（通過cocoapods）。
1.在podfile中pod引入：
pod 'lottie-ios'
2.cd到podfile文件所在目錄下，運(yùn)行
pod install
- 假如項目之前集成過其他第三方庫，比如Masonry，這個時候你編譯項目，可能會報code1錯誤，當(dāng)然沒報錯最好。稍安勿躁，人家官方文檔說了，還得安裝Carthage。
二、安裝Carthage
1、安裝 Homebrew
- 將以下命令粘貼至終端即可
第一步：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
第二步：
brew update
2、安裝 Carthage
brew install carthage
可通過下面這條命令來查看版本。
carthage version
3、使用 Carthage 安裝依賴
第一步：
cd ~/路徑/項目文件夾
第二步：創(chuàng)建一個空的 Carthage 文件 Cartfile
touch Cartfile
第三步：使用 Xcode 打開 Cartfile 文件
open -a Xcode Cartfile
第四步：在cartfile里面加一行代碼
github "airbnb/lottie-ios" "master"
第五步：終端執(zhí)行更新命令
carthage update --platform iOS
OK,你再編譯項目試試，，這個時候code1錯誤沒有了。是不是很驚喜。注意：項目名字最好為英文，因為這個框架是國外的，假如項目名字包含中文也會出現(xiàn)想像不到的錯誤。
那么問題來了，這個時候可能會出現(xiàn)這種情況：導(dǎo)入頭文件還有索引，但是導(dǎo)入后總是報錯，報找不到那個頭文件，這種時候，只需多重啟幾次Xcode。就能OK
三、lottie的使用
Lottie支持iOS 8 及其以上系統(tǒng)。當(dāng)我們把動畫需要的images資源文件添加到Xcode的目標(biāo)工程的后，Lottie 就可以通過JSON文件或者包含了JSON文件的URL來加載動畫。
- 最簡單的方式是用LOTAnimationView來使用它,這也是最常用的一種方式。
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
- 如果你使用到了多個bundle文件，你可以這么做：
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
- 或者你可以用代碼通過NSURL來加載，這種情況一般是將動畫效果保存在服務(wù)器，動態(tài)加載。
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie 支持iOS中的UIViewContentModes的 aspectFit, aspectFill 和 scaleFill這些屬性。
- 你可以控制動畫的進(jìn)度
CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;
- 想要任意視圖來給Lottie View中的動畫圖層做遮罩嗎 ？只要你知道After Effects中對應(yīng)的圖層的名字，那就是小菜一碟的事了：
UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];
- Lottie 帶有一個UIViewController動畫控制器，可以用來自定義轉(zhuǎn)場動畫！
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting
sourceController:(UIViewController *)source {
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}
Airbnb 開源的這個庫，可以將AE設(shè)計好的動畫導(dǎo)出為json格式的文件。交給開發(fā)同學(xué)，開發(fā)同學(xué)通過集成Lottie庫，就可以讀取設(shè)計同學(xué)給到的json文件，在程序中通過幾行代碼就可以輕松實現(xiàn)動畫啦。大大降低了開發(fā)同學(xué)的開發(fā)成本，而在客戶端上展示的動畫效果是和AE中的一樣的，不需要花額外時間和開發(fā)一起微調(diào)了，這樣一來，開發(fā)同學(xué)就把時間和精力放在動畫以外的事情上就好了。
這個開源庫大概可以看到以下的優(yōu)點和不足：
優(yōu)點：
1、開發(fā)成本低。設(shè)計師導(dǎo)出 json 文件后，開發(fā)人員使用這個第三庫加載出來json就可以。只要不到幾分鐘時間。
2、動畫的實現(xiàn)成功率高了。設(shè)計師的成果可以最大程度得到實現(xiàn)，試錯成本也低了。
3、支持服務(wù)端 URL 方式創(chuàng)建。所以可以通過服務(wù)端配置 json 文件，隨時替換客戶端的動畫，不用通過發(fā)版本就可以做到了。比如 app 啟動動畫可以根據(jù)活動需要進(jìn)行變換了。
4、性能?？梢蕴娲瓉硇枰褂脦瑘D完成的動畫。節(jié)省了客戶端的空間和加載的內(nèi)存。對硬件性能好一些。
5、跨平臺。iOS、安卓平臺可以使用一套文件。省時省力，動畫一致。不用設(shè)計師跑去兩邊去跟著微調(diào)確認(rèn)了。
6、支持轉(zhuǎn)場動畫。 PresentViewController／DismissViewController 時可以做轉(zhuǎn)場效果。
不足：
1、對一些AE的屬性支持不夠完全。
2、對系統(tǒng)平臺版本限制，如 iOS8 及以上，安卓 API14 及以上。
3、對可交互的動畫暫時還不行。主要是以播放類型動畫。
因為開源時間不久，所以還存在一些不足和問題，希望 Airbnb 和大家能一起完善這個開源庫，讓更多酷炫、體驗更好的動畫得以實現(xiàn)。給用戶帶來絕佳的體驗。
