Lottie介紹
“Lottie is a library for Android, iOS, Web, and Windows that parse Adobe After Effects animations exported as json with bodymovin and renders them natively on mobile and on the web!” - 自官網(wǎng)：http://airbnb.io/lottie/#/
大致意思是：Lottie是一個可以解析使用【bodymovin】插件從 Adobe After Effects 中導(dǎo)出的格式為 json 的文件灯萍，并在 iOS届宠、Android攒岛、macOS耍属、React Native 和 Windows 中進(jìn)行解析使用的開源庫态鳖。
這個庫由 Airbnb 開發(fā)并在2017年2月份左右開源的。
看一下官方實現(xiàn)的一部分效果：
是不是很cool院塞！看到此庫我是非常喜歡開心的函卒！為什么呢？
先來腦補(bǔ)一些場景：
場景一：在開發(fā) app 過程中钉稍，需要在 app 中實現(xiàn)設(shè)計師提供的效果動畫涤躲，都是通過代碼來實現(xiàn)，針對復(fù)雜的動畫贡未，開發(fā)同學(xué)更是會花費很長時間去實現(xiàn)种樱，如果是處女座的設(shè)計師，還會坐在開發(fā)同學(xué)旁邊“折磨”開發(fā)同學(xué)一起調(diào)細(xì)節(jié)羞秤，做過的同學(xué)一定深有體會缸托。
場景二：還有一些情況，因為實現(xiàn)動畫的開發(fā)成本比較高瘾蛋，比如需要1～2天去實現(xiàn)一個動畫效果俐镐，但是因為版本周期比較緊，會在無奈中砍掉或者簡化動畫哺哼，那么原本想提升用戶體驗的佩抹，卻打了折扣叼风。
總的來說，動畫要實現(xiàn)棍苹，需要設(shè)計師通過設(shè)計出來无宿，然后開發(fā)同學(xué)再通過代碼實現(xiàn)。開發(fā)完成后枢里，再和設(shè)計同學(xué)一起對代碼實現(xiàn)的效果進(jìn)行微調(diào)孽鸡，達(dá)到滿意效果。
那么對一些炫酷的栏豺、體驗非常好的動畫設(shè)計彬碱，開發(fā)的成本很高，雖然現(xiàn)在一些第三方的開源動畫可以參考奥洼，但是要做的有自己的特色巷疼，還是需要花時間去理解分析、實現(xiàn)灵奖、調(diào)試嚼沿。對一些迭代周期短的app來說，花那么多時間去做一個動畫瓷患，基本會被kill骡尽，設(shè)計同學(xué)一定很無奈和郁悶。
但是現(xiàn)在不同了Ｎ疚病１住！
Airbnb 開源的這個庫沙咏，應(yīng)該可以讓設(shè)計師和開發(fā)同學(xué)喜笑顏開了辨图。通過bodymovin 這個AE的插件，可以將AE設(shè)計好的動畫導(dǎo)出為json格式的文件肢藐。交給開發(fā)同學(xué)故河，開發(fā)同學(xué)通過集成Lottie庫，就可以讀取設(shè)計同學(xué)給到的json文件吆豹，在程序中通過幾行代碼就可以實現(xiàn)原本要花費1天甚至更久的時間來實現(xiàn)的動畫啦鱼的。是不是很cool？大大降低了開發(fā)同學(xué)的開發(fā)成本痘煤，而在客戶端上展示的動畫效果是和AE中的一樣的凑阶，不需要花額外時間和開發(fā)一起微調(diào)了，這樣一來衷快，開發(fā)同學(xué)就把時間和精力放在動畫以外的事情上就好了宙橱。boss開心了、設(shè)計同學(xué)開心了、開發(fā)同學(xué)也開心了师郑、用戶使用的也開心了环葵，皆大歡喜是不是??。
事事都不是完美的宝冕，通過對這個開源庫的初步了解來看张遭，大概可以看到以下的優(yōu)點和不足：
優(yōu)點：
1、開發(fā)成本低地梨。設(shè)計師導(dǎo)出 json 文件后菊卷，扔給開發(fā)同學(xué)即可。原本要1天甚至更久的動畫實現(xiàn)宝剖，現(xiàn)在只要不到一小時甚至更少時間了的烁。
2、動畫的實現(xiàn)成功率高了诈闺。設(shè)計師的成果可以最大程度得到實現(xiàn)，試錯成本也低了铃芦。
3雅镊、支持服務(wù)端 URL 方式創(chuàng)建。所以可以通過服務(wù)端配置 json 文件刃滓，隨時替換客戶端的動畫仁烹，不用通過發(fā)版本就可以做到了。比如 app 啟動動畫可以根據(jù)活動需要進(jìn)行變換了咧虎。
4卓缰、性能∨樗校可以替代原來需要使用幀圖完成的動畫征唬。節(jié)省了客戶端的空間和加載的內(nèi)存。對硬件性能好一些茁彭。
5总寒、跨平臺。iOS理肺、安卓平臺可以使用一套文件摄闸。省時省力，動畫一致妹萨。不用設(shè)計師跑去兩邊去跟著微調(diào)確認(rèn)了年枕。
6、支持轉(zhuǎn)場動畫乎完。 PresentViewController／DismissViewController 時可以做轉(zhuǎn)場效果熏兄。（Demo 里有）
不足：
1、對一些AE的屬性支持不夠完全。
2霍弹、對系統(tǒng)平臺版本限制毫别，如 iOS8 及以上，安卓 API14 及以上典格。
3岛宦、對可交互的動畫暫時還不行。主要是以播放類型動畫耍缴。
因為開源時間不久砾肺，所以還存在一些不足和問題，希望 Airbnb 和大家能一起完善這個開源庫防嗡，讓更多酷炫变汪、體驗更好的動畫得以實現(xiàn)。給用戶帶來絕佳的體驗蚁趁。
Lottie支持的平臺：
支持：Android, iOS, Web, and Windows
當(dāng)然swift也支持Ｈ苟堋！他嫡！
注意：iOS 支持的版本是 iOS8 及以上番官，安卓需要 API14 及以上。
上面說了這么多钢属，Lottie是否是你需要的呢徘熔？如果是，那么請繼續(xù)向下看淆党！使用方法見下面??
因為我是做蘋果開發(fā)的酷师，所以我就說說針對蘋果的使用吧。
安裝插件
****bodymovin是一個AE的開源的插件染乌，我們需要先安裝這個插件到AE中山孔。****
1、下載bodymovin插件慕匠。https://github.com/bodymovin/bodymovin
2饱须、下載插件安裝器工具：http://aescripts.com/learn/zxp-installer/
打開http://aescripts.com/learn/zxp-installer/(zxp-installer安裝文件Mac+windows 鏈接: https://pan.baidu.com/s/1hrQaKPA 密碼: r3ni)，看到下面的界面台谊，選自對應(yīng)的系統(tǒng)即可蓉媳，見下圖：
3、插件安裝器下載成功后锅铅，根據(jù)上圖的提示進(jìn)行插件安裝即可：將第一步下載的 bodymovin.zxp 文件拖到安裝器界面酪呻，看到下面安裝成功的提示就代表安裝成了。
安裝插件成功
4盐须、安裝成功后打開AE玩荠，設(shè)置在首選項 ->常規(guī) ，將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項勾選上。否則后面導(dǎo)出時會報錯阶冈。設(shè)置頁面見下圖：
5闷尿、設(shè)置好以后，我們使用一個已經(jīng)制作好的 .aep 文件為例女坑，****使用bodymovin AE 導(dǎo)出 json ****文件填具。
狀態(tài)欄上選擇窗口 -> 擴(kuò)展 -> Bodymovin，見下圖：
到剛剛設(shè)置的導(dǎo)出目錄中找到文件匆骗，給到開發(fā)同學(xué)就可以了劳景。設(shè)計同學(xué)的工作基本OK了。
開發(fā)同學(xué)拿到j(luò)son文件怎么做呢碉就？接往下著看盟广！
Lottie集成到項目
到 https://github.com/airbnb/lottie-ios下載最新版本源碼，其中自帶了 Demo瓮钥，可運(yùn)行方便學(xué)習(xí)筋量。
集成的方法可以使用 cocoapods 方式集成，也可以使用 Carthage 方式集成碉熄。集成方法見官網(wǎng)說明毛甲。
pod install 安裝成功后，在需要使用的文件中加入頭文件的引用
#import <Lottie/Lottie.h>
下面??一段簡單說明了一下 Lottie 庫里用到的方法和屬性具被。可以自行看官方的Demo只损，可以忽略一姿。
在 LOTAnimationView.h 中：
//創(chuàng)建視圖的幾個方法
+ (instancetype)animationNamed:(NSString *)animationName NS_SWIFT_NAME(init(name:));
+ (instancetype)animationNamed:(NSString *)animationName inBundle:(NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
+ (instancetype)animationFromJSON:(NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
- (instancetype)initWithContentsOfURL:(NSURL *)url;
//可用屬性
@property(nonatomic,readonly)BOOLisAnimationPlaying; //是否正在動畫
@property(nonatomic,assign)BOOLloopAnimation; //是否循環(huán)播放動畫
@property(nonatomic,assign)CGFloatanimationProgress; //動畫執(zhí)行進(jìn)度
@property(nonatomic,assign)CGFloatanimationSpeed; //動畫速度
@property(nonatomic,readonly)CGFloatanimationDuration; //動畫時間
//實例方法
- (void)playWithCompletion:(LOTAnimationCompletionBlock)completion;//動畫結(jié)束后可以執(zhí)行一個block
- (void)play; //播放
- (void)pause; //暫停
- (void)addSubview:(LOTView *)view toLayerNamed:(NSString *)layer;
#if !TARGET_OS_IPHONE && !TARGET_IPHONE_SIMULATOR
@property(nonatomic) LOTViewContentMode contentMode;//非iOS的contentMode
#endif
ViewController.m
設(shè)置 present／dismiss controller 轉(zhuǎn)場動畫
在需要轉(zhuǎn)場效果的 viewcontroller 中實現(xiàn) UIViewControllerTransitioningDelegate代理中的下面兩個方法，就可以設(shè)置 controller 轉(zhuǎn)場動畫了跃惫，animationName ：“vcTransition1” “vcTransition2” 就是 AE 導(dǎo)出的動畫 json 文件名叮叹。
#pragma mark -- View Controller Transitioning
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting
sourceController:(UIViewController *)source {
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}
以上代碼頭文件中提供的方法和屬性，具體見源代碼爆存◎韧纾可以具體運(yùn)行 Demo 體驗一下。
最后：
以上是對 Lottie 開源庫的初步介紹和使用集成方法介紹先较。示例是以 iOS 為例携冤。希望對有需要的朋友有所幫助。
如果要了解 windows 下安裝插件的方法以及安卓平臺集成闲勺，可以參考以下博客和文章曾棕。??
以上菜循。
