前沿
該文章主要介紹了 Lottie是什么，如何為 Lottie 制作動畫，以及 Lottie的應(yīng)用場景。適合設(shè)計師和開發(fā)者閱讀以及結(jié)對實踐。
Lottie 介紹
Lottie 是 Airbnb 開源的一個動畫渲染庫，同時支持 Android、iOS、React Native 平臺。Lottie 目前只支持渲染播放 After Effects 動畫。 Lottie 使用從 bodymovin (開源的 After Effects 插件)導(dǎo)出的json數(shù)據(jù)來作為動畫數(shù)據(jù)。所以從動畫制作到動畫使用的整個工作流程如下：
- 設(shè)計師使用 After Effects 制作動畫，并導(dǎo)出json文件給開發(fā)者
- 各端的開發(fā)者通過 Lottie 渲染播放動畫
截止目前，各平臺的 Lottie 支持的 After Effects 特性可從下面網(wǎng)頁獲得：
所以，設(shè)計師在使用 After Effects 制作動畫時，建議先預(yù)覽上述網(wǎng)頁，以知道應(yīng)該使用哪些特性制作動畫，因為若使用 Lottie 還不支持的特性，如3D圖層，則 Lottie 會無法正確渲染。
為了推廣Lottie，Airbnb 還建立了一個Lottie動畫網(wǎng)站，供網(wǎng)友分享自己制作的動畫。網(wǎng)站地址為：
為 Lottie 制作動畫
為 Lottie 制作動畫，需要： After Effects + bodymovin。After Effects制作好動畫后，通過插件 bodymovin 導(dǎo)出一份 json文件，然后使用 Lottie 進(jìn)行渲染播放。下面將會介紹如何安裝該插件以及如何導(dǎo)出json文件。
安裝 After Effects
PS： 已經(jīng)安裝好 After Effects 的童鞋可以忽略此環(huán)節(jié)
After Effects 可以從Adobe官網(wǎng)下載安裝試用，其目前售價為：3499￥/年，相對來說還是很貴的。對于負(fù)擔(dān)不起的童鞋來說，也可以考慮破解版本。以下是Mac 的破解版本的下載鏈接：
百度云盤：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)的起的童鞋還是購買正版服務(wù)，始終可以得到各種升級服務(wù)。
安裝 After Effects 插件 bodymovin
1. 下載插件 bodymovin.zxp
- 下載 bodymovin壓縮文件
- 解壓文件，在目錄 '/build/extension' 找到
bodymovin.zxp
2. 安裝插件
下載 After Effects 插件安裝器 ZXP Installer（有 Windows 和 Mac 版本）
-
運(yùn)行
ZXP Installer，按照指示拖動bodymovin.zxp到其窗口，即可安裝完成拖動安裝bodymovin.zxp.png安裝成功后，如圖所示：
3. 重啟 After Effects，然后修改 AE 的設(shè)置，在 'After Effects CC -> Preferences -> General' 中打開
'Allow Scripts to Write Files and Access Network'
現(xiàn)在可以開始制作你的動畫了，制作完畢后，需要使用 bodymovin 時，前往 'window -> extensions' 即可找到 bodymovin：
使用 After Effects 制作動畫
使用 bodymovin 導(dǎo)出 json文件
當(dāng)動畫制作完畢后，運(yùn)行 bodymovin，選擇你要導(dǎo)出的動畫，以及保存json文件的目錄，點(diǎn)擊 'Render' 即可導(dǎo)出，具體流程如圖所示：
在線預(yù)覽動畫效果
制作好 After Effects 動畫，導(dǎo)出json文件，當(dāng)然要驗證一下 Lottie 能否正確渲染播放了。
Airbnb 提供了 iOS APP 、 Android APP 以及 Lottie 動畫在線預(yù)覽網(wǎng)站 供設(shè)計師進(jìn)行動畫預(yù)覽。
在網(wǎng)站預(yù)覽的話，設(shè)計師只要把導(dǎo)出后的 json 文件，拖動到網(wǎng)頁的預(yù)覽框，即可在線看到 Lottie 渲染播放的動畫效果。
使用 APP 預(yù)覽的話，則需要上傳 json 文件到服務(wù)端，通過鏈接進(jìn)行預(yù)覽。建議設(shè)計師上傳文件到 Airbnb 建立的分享網(wǎng)站 lottiefiles.com。
哪些場景適宜使用 Lottie？
Lottie 作為一個動畫渲染庫，在探索過程中，筆者認(rèn)為其比較適宜解決以下場景的問題：
- 啟動(splash)動畫：典型場景是APP logo動畫的播放
- 上下拉刷新動畫：所有APP都必備的功能，利用 Lottie 可以做的更加簡單酷炫了
- 加載(loading)動畫：典型場景是網(wǎng)絡(luò)請求的loading動畫
- 提示(tips)動畫：典型場景是空白頁的提示
- 按鈕(button)動畫：典型場景如switch按鈕、編輯按鈕、播放按鈕等按鈕的切換過渡動畫
- 禮物(gift)動畫：典型場景是直播類APP的高級動畫播放
- 視圖轉(zhuǎn)場動畫
各場景的示例如下：（以iOS平臺為例）
接入 Lottie
制作好動畫，導(dǎo)出json文件后，iOS、Android、React Native的開發(fā)者們就可以像使用靜態(tài)資源一樣使用動畫了。接入教程可以看官網(wǎng)教程或者 各平臺的 Lottie 項目的github：
lottie-iOS 的應(yīng)用示例（包括上述所有例子）可訪問：
https://github.com/YK-Unit/LottieExample
lottie-ios 極速上手手冊
安裝 Lottie
可通過 Cocoapods 或者 Carthage 導(dǎo)入 Lottie。
- Cocoapods：
pod 'lottie-ios' - Carthage：
github "airbnb/lottie-ios" "master"
加載 Lottie 動畫
Lottie 動畫支持從本地或者服務(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 動畫
Lottie 動畫的播放控制，除了常規(guī)的控制，還支持進(jìn)度播放、幀播放。
-
播放、暫停、停止
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"]; //從上一次的動畫位置開始播放 [animationView play]; ... //暫停動畫播放 [animationView pause]; .... //停止動畫播放，此時動畫進(jìn)度重置為0 [animationView stop]; -
控制進(jìn)度播放：可參考示例的上下拉刷新動畫
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按鈕動畫
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Switch"]; //直接播放到指定幀 [animationView playToFrame:@(40) withCompletion:^(BOOL animationFinished) { }]; //從A幀播放到B幀 [animationView playFromFrame:@(20) toFrame:@(40) withCompletion:^(BOOL animationFinished) { }]; -
循環(huán)播放動畫：可參考示例的Play-Pause按鈕動畫
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Play-Pause"]; //設(shè)置循環(huán)播放 animationView.loopAnimation = YES; //設(shè)置自動倒退播放 animationView.autoReverseAnimation = YES; [animationView playFromFrame:@(90) toFrame:@(180) withCompletion:^(BOOL animationFinished) { }]; -
編輯某幀的動畫對象的屬性：可參考示例的switch按鈕動畫
[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)];要修改對象的屬性，需要知道屬性的路徑（Keypath）。獲取屬性的路徑的方法有：
-
直接打印對象的所有層級屬性，從日志中獲?。?br>
[animationView logHierarchyKeypaths];logHierarchyKeypaths日志.png -
通過AE文件獲得：
Background 2.Shape 1.Fill 1.ColorKeypath.png
-
-
視圖控制器轉(zhuǎn)場動畫（View Controller Transitions）：可參考示例的轉(zhuǎn)場動畫
Lottie 提供了LOTAnimationTransitionController生成id <UIViewControllerAnimatedTransitioning>對象。#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 除了支持動畫播放，還支持添加自定義的視圖到指定的 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中，我們一般會用到2種類型的 Layer 來制作動畫：Solid Layer（固態(tài)圖層）和 Shape Layer（形狀圖層）。圖中，綠色的視圖元素就是Solid Layer，藍(lán)色、紅色、黃色、棕色的視圖元素就是 Shape Layer。
細(xì)心的讀者可以發(fā)現(xiàn)，添加同一個 subRectView 到 不同的 Layer ，subRectView 的繪制位置不一樣，這是因為不同類型的 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é)，可以下載打開 Demo 里的 RectComp.aep 文件，查看對應(yīng) Layer 的坐標(biāo)系統(tǒng)數(shù)據(jù)，然后你也可以嘗試編輯修改對應(yīng)圖層的坐標(biāo)原點(diǎn)位置和XY軸方向，導(dǎo)出動畫數(shù)據(jù)進(jìn)行試驗。
總得來說，若你要添加視圖到Layer，在添加前，最好打開AE文件，查看對應(yīng)的 Layer 的坐標(biāo)系統(tǒng)信息。當(dāng)然，更好的做法還是和AE設(shè)計師結(jié)對開發(fā)動畫，這樣可以更方便知道各個Layer的信息。
