前沿
該文章主要介紹了 Lottie是什么妄壶，如何為 Lottie 制作動(dòng)畫(huà)摔握，以及 Lottie的應(yīng)用場(chǎng)景。適合設(shè)計(jì)師和開(kāi)發(fā)者閱讀以及結(jié)對(duì)實(shí)踐丁寄。
Lottie 介紹
Lottie 是 Airbnb 開(kāi)源的一個(gè)動(dòng)畫(huà)渲染庫(kù)氨淌，同時(shí)支持 Android、iOS伊磺、React Native 平臺(tái)盛正。Lottie 目前只支持渲染播放 After Effects 動(dòng)畫(huà)。 Lottie 使用從 bodymovin (開(kāi)源的 After Effects 插件)導(dǎo)出的json數(shù)據(jù)來(lái)作為動(dòng)畫(huà)數(shù)據(jù)屑埋。所以從動(dòng)畫(huà)制作到動(dòng)畫(huà)使用的整個(gè)工作流程如下：
- 設(shè)計(jì)師使用 After Effects 制作動(dòng)畫(huà)豪筝，并導(dǎo)出json文件給開(kāi)發(fā)者
- 各端的開(kāi)發(fā)者通過(guò) Lottie 渲染播放動(dòng)畫(huà)
截止目前，各平臺(tái)的 Lottie 支持的 After Effects 特性可從下面網(wǎng)頁(yè)獲得：
所以雀彼，設(shè)計(jì)師在使用 After Effects 制作動(dòng)畫(huà)時(shí)壤蚜，建議先預(yù)覽上述網(wǎng)頁(yè)，以知道應(yīng)該使用哪些特性制作動(dòng)畫(huà)徊哑，因?yàn)槿羰褂?Lottie 還不支持的特性袜刷，如3D圖層，則 Lottie 會(huì)無(wú)法正確渲染莺丑。
為了推廣Lottie著蟹，Airbnb 還建立了一個(gè)Lottie動(dòng)畫(huà)網(wǎng)站墩蔓，供網(wǎng)友分享自己制作的動(dòng)畫(huà)。網(wǎng)站地址為：
為 Lottie 制作動(dòng)畫(huà)
為 Lottie 制作動(dòng)畫(huà)萧豆，需要： After Effects + bodymovin奸披。After Effects制作好動(dòng)畫(huà)后，通過(guò)插件 bodymovin 導(dǎo)出一份 json文件涮雷，然后使用 Lottie 進(jìn)行渲染播放阵面。下面將會(huì)介紹如何安裝該插件以及如何導(dǎo)出json文件。
安裝 After Effects
PS： 已經(jīng)安裝好 After Effects 的童鞋可以忽略此環(huán)節(jié)
After Effects 可以從Adobe官網(wǎng)下載安裝試用洪鸭，其目前售價(jià)為：3499￥/年样刷，相對(duì)來(lái)說(shuō)還是很貴的。對(duì)于負(fù)擔(dān)不起的童鞋來(lái)說(shuō)览爵，也可以考慮破解版本置鼻。以下是Mac 的破解版本的下載鏈接：
百度云盤(pán)：https://pan.baidu.com/s/1eRMCL26
提取密碼：xyu5
下載的文件夾中包含安裝文件After Effects CC 2017.dmg以及破解文件Adobe Zii cc2017.app壓縮包。安裝好 After Effects 后蜓竹，解壓運(yùn)行Adobe Zii cc2017.app 即可免費(fèi)使用 After Effects 箕母。但是，建議負(fù)擔(dān)的起的童鞋還是購(gòu)買(mǎi)正版服務(wù)俱济，始終可以得到各種升級(jí)服務(wù)嘶是。
安裝 After Effects 插件 bodymovin
1. 下載插件 bodymovin.zxp
- 下載 bodymovin壓縮文件
- 解壓文件，在目錄 '/build/extension' 找到
bodymovin.zxp
2. 安裝插件
下載 After Effects 插件安裝器 ZXP Installer（有 Windows 和 Mac 版本）
-
運(yùn)行
ZXP Installer姨蝴，按照指示拖動(dòng)bodymovin.zxp到其窗口俊啼，即可安裝完成拖動(dòng)安裝bodymovin.zxp.png安裝成功后，如圖所示：
3. 重啟 After Effects左医，然后修改 AE 的設(shè)置，在 'After Effects CC -> Preferences -> General' 中打開(kāi)
'Allow Scripts to Write Files and Access Network'
現(xiàn)在可以開(kāi)始制作你的動(dòng)畫(huà)了同木，制作完畢后浮梢，需要使用 bodymovin 時(shí)，前往 'window -> extensions' 即可找到 bodymovin：
使用 After Effects 制作動(dòng)畫(huà)
使用 bodymovin 導(dǎo)出 json文件
當(dāng)動(dòng)畫(huà)制作完畢后彤路，運(yùn)行 bodymovin秕硝，選擇你要導(dǎo)出的動(dòng)畫(huà)，以及保存json文件的目錄洲尊，點(diǎn)擊 'Render' 即可導(dǎo)出远豺，具體流程如圖所示：
在線預(yù)覽動(dòng)畫(huà)效果
制作好 After Effects 動(dòng)畫(huà)，導(dǎo)出json文件坞嘀，當(dāng)然要驗(yàn)證一下 Lottie 能否正確渲染播放了躯护。
Airbnb 提供了 iOS APP 、 Android APP 以及 Lottie 動(dòng)畫(huà)在線預(yù)覽網(wǎng)站 供設(shè)計(jì)師進(jìn)行動(dòng)畫(huà)預(yù)覽丽涩。
在網(wǎng)站預(yù)覽的話棺滞，設(shè)計(jì)師只要把導(dǎo)出后的 json 文件裁蚁，拖動(dòng)到網(wǎng)頁(yè)的預(yù)覽框，即可在線看到 Lottie 渲染播放的動(dòng)畫(huà)效果继准。
使用 APP 預(yù)覽的話枉证，則需要上傳 json 文件到服務(wù)端，通過(guò)鏈接進(jìn)行預(yù)覽移必。建議設(shè)計(jì)師上傳文件到 Airbnb 建立的分享網(wǎng)站 lottiefiles.com室谚。
哪些場(chǎng)景適宜使用 Lottie？
Lottie 作為一個(gè)動(dòng)畫(huà)渲染庫(kù)崔泵，在探索過(guò)程中舞萄，筆者認(rèn)為其比較適宜解決以下場(chǎng)景的問(wèn)題：
- 啟動(dòng)(splash)動(dòng)畫(huà)：典型場(chǎng)景是APP logo動(dòng)畫(huà)的播放
- 上下拉刷新動(dòng)畫(huà)：所有APP都必備的功能，利用 Lottie 可以做的更加簡(jiǎn)單酷炫了
- 加載(loading)動(dòng)畫(huà)：典型場(chǎng)景是網(wǎng)絡(luò)請(qǐng)求的loading動(dòng)畫(huà)
- 提示(tips)動(dòng)畫(huà)：典型場(chǎng)景是空白頁(yè)的提示
- 按鈕(button)動(dòng)畫(huà)：典型場(chǎng)景如switch按鈕管削、編輯按鈕倒脓、播放按鈕等按鈕的切換過(guò)渡動(dòng)畫(huà)
- 禮物(gift)動(dòng)畫(huà)：典型場(chǎng)景是直播類APP的高級(jí)動(dòng)畫(huà)播放
- 視圖轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
各場(chǎng)景的示例如下：（以iOS平臺(tái)為例）
接入 Lottie
制作好動(dòng)畫(huà)，導(dǎo)出json文件后含思，iOS崎弃、Android、React Native的開(kāi)發(fā)者們就可以像使用靜態(tài)資源一樣使用動(dòng)畫(huà)了含潘。接入教程可以看官網(wǎng)教程或者 各平臺(tái)的 Lottie 項(xiàng)目的github：
lottie-iOS 的應(yīng)用示例（包括上述所有例子）可訪問(wèn)：
https://github.com/YK-Unit/LottieExample
lottie-ios 極速上手手冊(cè)
安裝 Lottie
可通過(guò) Cocoapods 或者 Carthage 導(dǎo)入 Lottie饲做。
- Cocoapods：
pod 'lottie-ios' - Carthage：
github "airbnb/lottie-ios" "master"
加載 Lottie 動(dòng)畫(huà)
Lottie 動(dòng)畫(huà)支持從本地或者服務(wù)器的json文件加載。
//從本地json加載
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"];
//從本地指定的bundle的json加載
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
//從服務(wù)器的json加載
LOTAnimationView *animationView = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL_TO_JSON]];
animationView.frame = CGRectMake(20, 20, 400, 300);
[self.view addSubview:animationView];
播放 Lottie 動(dòng)畫(huà)
Lottie 動(dòng)畫(huà)的播放控制遏弱，除了常規(guī)的控制盆均，還支持進(jìn)度播放、幀播放漱逸。
-
播放泪姨、暫停、停止
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"]; //從上一次的動(dòng)畫(huà)位置開(kāi)始播放 [animationView play]; ... //暫停動(dòng)畫(huà)播放 [animationView pause]; .... //停止動(dòng)畫(huà)播放饰抒，此時(shí)動(dòng)畫(huà)進(jìn)度重置為0 [animationView stop]; -
控制進(jìn)度播放：可參考示例的上下拉刷新動(dòng)畫(huà)
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"RefreshHeaderAnim"]; //直接播放到指定進(jìn)度 [animationView playToProgress:0.8 withCompletion:^(BOOL animationFinished) { // do something }]; //從進(jìn)度A播放到進(jìn)度B [animationView playFromProgress:0 toProgress:0.8 withCompletion:^(BOOL animationFinished) { // do something }]; //直接設(shè)置當(dāng)前進(jìn)度 animationView.animationProgress = currentProgress; -
控制幀播放：可參考示例的switch按鈕動(dòng)畫(huà)
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Switch"]; //直接播放到指定幀 [animationView playToFrame:@(40) withCompletion:^(BOOL animationFinished) { }]; //從A幀播放到B幀 [animationView playFromFrame:@(20) toFrame:@(40) withCompletion:^(BOOL animationFinished) { }]; -
循環(huán)播放動(dòng)畫(huà)：可參考示例的Play-Pause按鈕動(dòng)畫(huà)
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Play-Pause"]; //設(shè)置循環(huán)播放 animationView.loopAnimation = YES; //設(shè)置自動(dòng)倒退播放 animationView.autoReverseAnimation = YES; [animationView playFromFrame:@(90) toFrame:@(180) withCompletion:^(BOOL animationFinished) { }]; -
編輯某幀的動(dòng)畫(huà)對(duì)象的屬性：可參考示例的switch按鈕動(dòng)畫(huà)
[self.switchButton setValue:[UIColor orangeColor] forKeypath:@"Background 2.Shape 1.Fill 1.Color" atFrame:@(0)]; [self.switchButton setValue:[UIColor blueColor] forKeypath:@"Background 2.Shape 1.Fill 1.Color" atFrame:@(13)];要修改對(duì)象的屬性肮砾，需要知道屬性的路徑（Keypath）。獲取屬性的路徑的方法有：
-
直接打印對(duì)象的所有層級(jí)屬性袋坑，從日志中獲日檀Α：
[animationView logHierarchyKeypaths];logHierarchyKeypaths日志.png -
通過(guò)AE文件獲得：
Background 2.Shape 1.Fill 1.ColorKeypath.png
-
-
視圖控制器轉(zhuǎn)場(chǎng)動(dòng)畫(huà)（View Controller Transitions）：可參考示例的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
Lottie 提供了LOTAnimationTransitionController生成id <UIViewControllerAnimatedTransitioning>對(duì)象。#pragma mark - UIViewControllerTransitioningDelegate - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source { LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1" fromLayerNamed:@"outLayer" toLayerNamed:@"inLayer" applyAnimationTransform:NO]; return animationController; } - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed { LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2" fromLayerNamed:@"outLayer" toLayerNamed:@"inLayer" applyAnimationTransform:NO]; return animationController; }
添加視圖到 Layer 層：可參考“添加 View 到 Layer 示例”
Lottie 除了支持動(dòng)畫(huà)播放枣宫，還支持添加自定義的視圖到指定的 Layer ：
NSArray *layerNames = @[@"Green Solid 1",@"Shape Layer 1",@"Shape Layer 2",@"Shape Layer 3",@"Shape Layer 4"];
for (NSString *layerName in layerNames) {
CGRect subRectViewFrame = CGRectMake(0, 0, 15, 15);
UIView *subRectView = [[UIView alloc] initWithFrame:subRectViewFrame];
subRectViewFrame = [self.rectView convertRect:subRectViewFrame toLayerNamed:layerName];
subRectView.frame = subRectViewFrame;
subRectView.backgroundColor = [UIColor whiteColor];
[self.rectView addSubview:subRectView toLayerNamed:layerName applyTransform:YES];
}
在AE中婆誓，我們一般會(huì)用到2種類型的 Layer 來(lái)制作動(dòng)畫(huà)：Solid Layer（固態(tài)圖層）和 Shape Layer（形狀圖層）。圖中也颤，綠色的視圖元素就是Solid Layer洋幻，藍(lán)色、紅色歇拆、黃色鞋屈、棕色的視圖元素就是 Shape Layer范咨。
細(xì)心的讀者可以發(fā)現(xiàn)，添加同一個(gè) subRectView 到 不同的 Layer 厂庇，subRectView 的繪制位置不一樣渠啊，這是因?yàn)椴煌愋偷?Layer 其坐標(biāo)系統(tǒng)不一樣：
Solid Layer 的坐標(biāo)原點(diǎn)在左上角位置，向右是X軸正方向权旷，向下是Y軸正方向
Shape Layer 的坐標(biāo)原點(diǎn)由
ShapeLayer-Contents-layer-AnchorPoint（內(nèi)容圖層的錨點(diǎn)位置）決定替蛉，X軸和Y軸的正方向則取決于其ShapeLayer-Transform-Scale的值的正負(fù)，具體如圖所示：
在上面演示的Gif圖中拄氯，Shape Layer 1躲查、Shape Layer 2、Shape Layer 3译柏、Shape Layer 4的坐標(biāo)原點(diǎn)都在圖層中心位置镣煮，不同的是其X軸和Y軸的正方向位置。感興趣的同學(xué)鄙麦，可以下載打開(kāi) Demo 里的 RectComp.aep 文件典唇，查看對(duì)應(yīng) Layer 的坐標(biāo)系統(tǒng)數(shù)據(jù)，然后你也可以嘗試編輯修改對(duì)應(yīng)圖層的坐標(biāo)原點(diǎn)位置和XY軸方向胯府，導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)進(jìn)行試驗(yàn)介衔。
總得來(lái)說(shuō)，若你要添加視圖到Layer骂因，在添加前炎咖，最好打開(kāi)AE文件，查看對(duì)應(yīng)的 Layer 的坐標(biāo)系統(tǒng)信息寒波。當(dāng)然乘盼，更好的做法還是和AE設(shè)計(jì)師結(jié)對(duì)開(kāi)發(fā)動(dòng)畫(huà)，這樣可以更方便知道各個(gè)Layer的信息影所。
