Lottie 應(yīng)用于iOS、MacOS(以及Android 和React Native)
- 本文由CRAnimation團(tuán)隊(duì)翻譯
- 本項(xiàng)目iOS版本原地址：airbnb/lottie-ios
- 本文譯文地址：CRAnimation/lottie-ios
- 翻譯：小9
- 校正：熊熊
- 術(shù)語指導(dǎo)：西西
- QQ群：547897182（iOS動(dòng)效特工隊(duì)）
Lottie 是一個(gè)可應(yīng)用于Andriod和iOS的動(dòng)畫庫【術(shù)1】，它通過bodymovin插件來解析Adobe After Effects 動(dòng)畫并導(dǎo)出為json文件，通過手機(jī)端原生的方式或者通過React Native的方式渲染出矢量動(dòng)畫。
這是前所未有的方式，設(shè)計(jì)師可以創(chuàng)作并且運(yùn)行優(yōu)美的動(dòng)畫而不需要工程師煞費(fèi)苦心地通過手動(dòng)調(diào)整的方式來重現(xiàn)動(dòng)畫。由于動(dòng)畫是通過json來加載的，使得動(dòng)畫源文件只需占用極小的空間就能完成相當(dāng)復(fù)雜的效果！Lottie可以用于播放動(dòng)畫、調(diào)整尺寸、循環(huán)播放、加速、減速、甚至是精致的交互。
Lottie 也創(chuàng)造性地支持原生的UIViewController 的轉(zhuǎn)場動(dòng)畫。
這里僅僅列出了強(qiáng)大的Lottie一些小小的例子：
使用Lottie
Lottie支持iOS 8 及其以上系統(tǒng)。當(dāng)我們把動(dòng)畫需要的images資源文件添加到Xcode的目標(biāo)工程的后，Lottie 就可以通過JSON文件或者包含了JSON文件的URL來加載動(dòng)畫。
最簡單的方式是用LOTAnimationView來使用它
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
如果你使用到了多個(gè)bundle文件，你可以這么做：
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
或者你可以用代碼通過NSURL來加載
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie 支持iOS中的UIViewContentModes的 aspectFit, aspectFill 和 scaleFill這些屬性。
你可以控制動(dòng)畫的進(jìn)度
CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;
想要任意視圖來給Lottie View中的動(dòng)畫圖層做遮罩嗎 ？只要你知道After Effects中對應(yīng)的圖層的名字，那就是小菜一碟的事了：
UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];
Lottie 帶有一個(gè)UIViewController動(dòng)畫控制器，可以用來自定義轉(zhuǎn)場動(dòng)畫！
#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;
}
如果你的動(dòng)畫會很頻繁地重用，LOTAnimationView有一個(gè)內(nèi)置的LRU緩存策略。
Swift 支持
Lottie 在Swift下也表現(xiàn)的很好！在你的swift 類上方簡單地improt Lottie，然后就可以按照下面的方式使用Lottie了：
let animationView = LOTAnimationView.animationNamed("hamburger")
self.view.addSubview(animationView!)
animationView?.play(completion: { (finished) in
// Do Something
})
支持的After Effects 的特性
關(guān)鍵幀插值（Keyframe Interpolation）
- 線性插值(Linear Interpolation)
- 貝塞爾插值(Bezier Interpolation)
- 凍結(jié)關(guān)鍵幀插值(Hold Interpolation)
- 漂浮穿梭時(shí)間(根據(jù)前后關(guān)鍵幀，自動(dòng)調(diào)整時(shí)間點(diǎn)，以保持一致速率) [Rove Across Time]
- 空間貝塞爾曲線(Spatial Bezier)【術(shù)2】
固態(tài)(Solids)
- 錨點(diǎn)變換(Transform Anchor Point)
- 位置變換(Transform Position)
- 縮放變換(Transform Scale)
- 旋轉(zhuǎn)變換(Transform Rotation)
- 透明度變換(Transform Opacity)
遮罩(Masks)
- 路徑(Path)
- 透明度(Opacity)
- 多個(gè)遮罩(疊加的) [Multiple Masks (additive)]
軌道遮罩(Track Mattes)
- Alpha蒙版(Alpha Matte)
父子級關(guān)系(Parenting)
- 多個(gè)父子級關(guān)系(Multiple Parenting)
- 無父子級關(guān)系(Nulls)
形狀圖層(Shape Layers)
- 錨點(diǎn)(Anchor Point)
- 位置(Position)
- 縮放(Scale)
- 旋轉(zhuǎn)(Rotation)
- 透明度(Opacity)
- 路徑(Path)
- 組變換(錨點(diǎn)、位置、比例等) [Group Transforms (Anchor point, position, scale etc)]
- 矩形(所有屬性) [Rectangle (All properties)]
- 橢圓(所有屬性）[Elipse (All properties)]
- 多條路徑的組合 (Multiple paths in one group)
描邊(shape layer) ［Stroke (shape layer)］
- 描邊顏色(Stroke Color)
- 描邊透明度(Stroke Opacity)
- 描邊寬度(Stroke Width)
- 描邊接頭樣式(Line Cap)
- 虛線(Dashes)
填充(shape layer)
- 填充顏色(Fill Color)
- 填充透明度(Fill Opacity)
裁切路徑(shape layer) [Trim Paths (shape layer)]
- 裁切路徑的起始點(diǎn)(Trim Paths Start)
- 裁切路徑的終點(diǎn)(Trim Paths End)
- 裁切路徑的偏移(Trim Paths Offset)
圖層特性(Layer Features)
- 預(yù)合成(Precomps)
- 圖像圖層(Image Layers)
- 形狀圖層(Shape Layers)
- 空圖層(Null Layers)
- 固態(tài)層(Solid Layers)
- 父子級關(guān)系圖層Layers(Parenting Layers)
- Alpha蒙板圖層(Alpha Matte Layers)
目前還不支持的After Effects 特性
- 形狀圖層填充規(guī)則（奇偶/非零纏繞）[Even-Odd winding paths]【術(shù)3】
- 合并形狀(Merge Shapes)
- 裁切路徑中的個(gè)別裁切形狀功能(Trim Shapes Individually feature of Trim Paths)
- 表達(dá)式(Expressions)
- 3D圖層(3d Layer support)
- 圖層樣式漸變(Gradients)
- 多邊形形狀（有一種臨時(shí)方案是通過轉(zhuǎn)換為矢量路徑來解決）[Polystar shapes (Can convert to vector path as a workaround)]
- 反相Alpha蒙板(Alpha inverted mask)
安裝Lottie
CocoaPods
在你的podfile中添加：
pod 'lottie-ios'
運(yùn)行
pod install
Carthage
安裝Carthage() 向你的Cartfile添加Lottie：
github "airbnb/lottie-ios" "master"
運(yùn)行
carthage update
試試看
Lottie入駐了Cocoapods！通過Cocoapod獲取或克隆這個(gè)倉庫,下載完成后導(dǎo)入Lottie#import <Lottie / Lottie.h>，并嘗試使用示例代碼。
用Carthage嘗試。 在應(yīng)用程序目標(biāo)“常規(guī)”選項(xiàng)卡部分，從Carthage新生成的Carthage / Build / iOS目錄中將lottie-ios.framework 拖放“Linked Frameworks and Libraries”下。
社區(qū)貢獻(xiàn)
替補(bǔ)方案
- 手動(dòng)地創(chuàng)建動(dòng)畫。手動(dòng)創(chuàng)建動(dòng)畫對于設(shè)計(jì)師以及iOS、Android工程師而言意味著付出巨額的時(shí)間。通常很難，甚至不可能證明花費(fèi)這么多時(shí)間來獲得動(dòng)畫是正確的。
- Facebook Keyframes。 Keyframes是專門用來構(gòu)建用戶界面的， 是FaceBook的一個(gè)很棒，很新的庫。但是Keyframes不支持一些Lottie所能支持的特性，比如： 遮罩，蒙版，裁切路徑，虛線樣式還有很多。
- Gifs。Gifs 占用的大小是bodymovin生成的JSON大小的2倍還多，并且渲染的尺寸是固定的，并不能放大來適應(yīng)更大更高分辨率的屏幕。
- Png序列楨動(dòng)畫。 Png序列楨動(dòng)畫 甚至比gifs更糟糕，它們的文件大小通常是 bodymovin json文件大小的30-50倍，并且也不能被放大。
為什么叫Lottie？
Lottie以德國電影導(dǎo)演(剪影動(dòng)畫的最早的開拓者)命名。 她最著名的電影是“阿赫邁德王子歷險(xiǎn)記”（1926年） - 最古老的長篇?jiǎng)赢嬰娪啊１热A特迪士尼的長篇電影白雪公主和七個(gè)小矮人（1937）早十多年The art of Lotte Reineger
貢獻(xiàn)
貢獻(xiàn)者是非常受歡迎的。 只需上傳項(xiàng)目并且包含您的更改說明。
如果你想添加更多的JSON文件，隨意這樣做！
問題或者功能需求？
可以在github的issues專欄上提出任何超乎預(yù)期崩潰問題。如果After Effects 文件并沒有起作用的話，請?jiān)趇ssue上附上它。沒有源文件來排除故障是相當(dāng)困難的。
技術(shù)路線(沒有特別的順序)
- 添加了對交互轉(zhuǎn)場動(dòng)畫的支持
- 添加了對父類自動(dòng)添加子類，移動(dòng)／縮放的支持
- 通過代碼來改變動(dòng)畫的行為
- 動(dòng)畫 斷點(diǎn)/查找點(diǎn)
- 漸變
- LOTAniamtedButton
- 重復(fù)創(chuàng)建對象機(jī)制
術(shù)語解釋
術(shù)1
動(dòng)畫庫：
此處的動(dòng)畫庫意指Lottie動(dòng)畫框架。
術(shù)2
空間貝塞爾曲線：
在AE中，對于兩個(gè)關(guān)鍵幀（keyframes）之間的插值（interpolation）來說，有空間插值（spatial interpolation）和時(shí)間插值（temporal interpolation）2種屬性基本上，時(shí)間差值是必有的，就是我們平時(shí)調(diào)時(shí)間曲線用到的，空間插值是對某些屬性的關(guān)鍵幀可選的，比如位移（position），有位移就有路徑，那個(gè)路徑就可以做貝塞爾插值，此時(shí)就是空間插值。
- 對scale的關(guān)鍵幀，查看插值選項(xiàng)，空間插值那里是不可選的
- 對position調(diào)出這個(gè)面板，就是可選的了
- AE曲線概念圖
術(shù)3
“形狀圖層填充規(guī)則（奇偶/非零纏繞）”：
-
在AE中，目前是默認(rèn)支持的非零纏繞
-
所以本文中的“Even-Odd winding paths”應(yīng)指的是“形狀圖層填充規(guī)則（奇偶/非零纏繞）”
