AV久草在线,美女小穴啪啪视频,免费视频五区

Lottie 應(yīng)用于iOS、MacOS(以及Android 和React Native)

本文由CRAnimation團(tuán)隊(duì)翻譯
本項(xiàng)目iOS版本原地址：airbnb/lottie-ios
本文譯文地址：CRAnimation/lottie-ios
翻譯：小9
校正：熊熊
術(shù)語(yǔ)指導(dǎo)：西西
QQ群：547897182（iOS動(dòng)效特工隊(duì)）

Lottie 是一個(gè)可應(yīng)用于Andriod和iOS的動(dòng)畫庫(kù)【術(shù)1】，它通過(guò)bodymovin插件來(lái)解析Adobe After Effects 動(dòng)畫并導(dǎo)出為json文件，通過(guò)手機(jī)端原生的方式或者通過(guò)React Native的方式渲染出矢量動(dòng)畫。

這是前所未有的方式，設(shè)計(jì)師可以創(chuàng)作并且運(yùn)行優(yōu)美的動(dòng)畫而不需要工程師煞費(fèi)苦心地通過(guò)手動(dòng)調(diào)整的方式來(lái)重現(xiàn)動(dòng)畫。由于動(dòng)畫是通過(guò)json來(lái)加載的，使得動(dòng)畫源文件只需占用極小的空間就能完成相當(dāng)復(fù)雜的效果！Lottie可以用于播放動(dòng)畫、調(diào)整尺寸、循環(huán)播放、加速、減速、甚至是精致的交互。

Lottie 也創(chuàng)造性地支持原生的UIViewController 的轉(zhuǎn)場(chǎng)動(dòng)畫。

這里僅僅列出了強(qiáng)大的Lottie一些小小的例子：

使用Lottie

Lottie支持iOS 8 及其以上系統(tǒng)。當(dāng)我們把動(dòng)畫需要的images資源文件添加到Xcode的目標(biāo)工程的后，Lottie 就可以通過(guò)JSON文件或者包含了JSON文件的URL來(lái)加載動(dòng)畫。

最簡(jiǎn)單的方式是用LOTAnimationView來(lái)使用它

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
}];

或者你可以用代碼通過(guò)NSURL來(lái)加載

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;

想要任意視圖來(lái)給Lottie View中的動(dòng)畫圖層做遮罩嗎？只要你知道After Effects中對(duì)應(yīng)的圖層的名字，那就是小菜一碟的事了：

UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];

Lottie 帶有一個(gè)UIViewController動(dòng)畫控制器，可以用來(lái)自定義轉(zhuǎn)場(chǎng)動(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)畫會(huì)很頻繁地重用，LOTAnimationView有一個(gè)內(nèi)置的LRU緩存策略。

Swift 支持

Lottie 在Swift下也表現(xiàn)的很好！在你的swift 類上方簡(jiǎn)單地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)

父子級(jí)關(guān)系(Parenting)

多個(gè)父子級(jí)關(guān)系(Multiple Parenting)
無(wú)父子級(jí)關(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)
空?qǐng)D層(Null Layers)
固態(tài)層(Solid Layers)
父子級(jí)關(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í)方案是通過(guò)轉(zhuǎn)換為矢量路徑來(lái)解決）[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！通過(guò)Cocoapod獲取或克隆這個(gè)倉(cāng)庫(kù),下載完成后導(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)

Xamarin bindings
NativeScript bindings
Appcelerator Titanium bindings
由 Alex Pawlowski添加的對(duì)MacOS的支持

替補(bǔ)方案

手動(dòng)地創(chuàng)建動(dòng)畫。手動(dòng)創(chuàng)建動(dòng)畫對(duì)于設(shè)計(jì)師以及iOS、Android工程師而言意味著付出巨額的時(shí)間。通常很難，甚至不可能證明花費(fèi)這么多時(shí)間來(lái)獲得動(dòng)畫是正確的。
Facebook Keyframes。 Keyframes是專門用來(lái)構(gòu)建用戶界面的，是FaceBook的一個(gè)很棒，很新的庫(kù)。但是Keyframes不支持一些Lottie所能支持的特性，比如：遮罩，蒙版，裁切路徑，虛線樣式還有很多。
Gifs。Gifs 占用的大小是bodymovin生成的JSON大小的2倍還多，并且渲染的尺寸是固定的，并不能放大來(lái)適應(yīng)更大更高分辨率的屏幕。
Png序列楨動(dòng)畫。 Png序列楨動(dòng)畫甚至比gifs更糟糕，它們的文件大小通常是 bodymovin json文件大小的30-50倍，并且也不能被放大。

為什么叫Lottie？

Lottie以德國(guó)電影導(dǎo)演(剪影動(dòng)畫的最早的開(kāi)拓者)命名。她最著名的電影是“阿赫邁德王子歷險(xiǎn)記”（1926年） - 最古老的長(zhǎng)篇?jiǎng)赢嬰娪?。比華特迪士尼的長(zhǎng)篇電影白雪公主和七個(gè)小矮人（1937）早十多年The art of Lotte Reineger

貢獻(xiàn)

貢獻(xiàn)者是非常受歡迎的。只需上傳項(xiàng)目并且包含您的更改說(shuō)明。
如果你想添加更多的JSON文件，隨意這樣做！

問(wèn)題或者功能需求？

可以在github的issues專欄上提出任何超乎預(yù)期崩潰問(wèn)題。如果After Effects 文件并沒(méi)有起作用的話，請(qǐng)?jiān)趇ssue上附上它。沒(méi)有源文件來(lái)排除故障是相當(dāng)困難的。

技術(shù)路線(沒(méi)有特別的順序)

添加了對(duì)交互轉(zhuǎn)場(chǎng)動(dòng)畫的支持
添加了對(duì)父類自動(dòng)添加子類，移動(dòng)／縮放的支持
通過(guò)代碼來(lái)改變動(dòng)畫的行為
動(dòng)畫斷點(diǎn)/查找點(diǎn)
漸變
LOTAniamtedButton
重復(fù)創(chuàng)建對(duì)象機(jī)制

術(shù)語(yǔ)解釋

術(shù)1

動(dòng)畫庫(kù)：
此處的動(dòng)畫庫(kù)意指Lottie動(dòng)畫框架。

術(shù)2

空間貝塞爾曲線：
在AE中，對(duì)于兩個(gè)關(guān)鍵幀（keyframes）之間的插值（interpolation）來(lái)說(shuō)，有空間插值（spatial interpolation）和時(shí)間插值（temporal interpolation）2種屬性基本上，時(shí)間差值是必有的，就是我們平時(shí)調(diào)時(shí)間曲線用到的，空間插值是對(duì)某些屬性的關(guān)鍵幀可選的，比如位移（position），有位移就有路徑，那個(gè)路徑就可以做貝塞爾插值，此時(shí)就是空間插值。

對(duì)scale的關(guān)鍵幀，查看插值選項(xiàng)，空間插值那里是不可選的

對(duì)position調(diào)出這個(gè)面板，就是可選的了

AE曲線概念圖

術(shù)3

“形狀圖層填充規(guī)則（奇偶/非零纏繞）”：

在AE中，目前是默認(rèn)支持的非零纏繞
所以本文中的“Even-Odd winding paths”應(yīng)指的是“形狀圖層填充規(guī)則（奇偶/非零纏繞）”

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Lottie-iOS中文翻譯

Lottie-iOS中文翻譯

Lottie 應(yīng)用于iOS、MacOS(以及Android 和React Native)

使用Lottie

Swift 支持

支持的After Effects 的特性

關(guān)鍵幀插值（Keyframe Interpolation）

固態(tài)(Solids)

遮罩(Masks)

軌道遮罩(Track Mattes)

父子級(jí)關(guān)系(Parenting)

形狀圖層(Shape Layers)

描邊(shape layer) ［Stroke (shape layer)］

填充(shape layer)

裁切路徑(shape layer) [Trim Paths (shape layer)]

圖層特性(Layer Features)

目前還不支持的After Effects 特性

安裝Lottie

CocoaPods

Carthage

試試看

社區(qū)貢獻(xiàn)

替補(bǔ)方案

為什么叫Lottie？

貢獻(xiàn)

問(wèn)題或者功能需求？

技術(shù)路線(沒(méi)有特別的順序)

術(shù)語(yǔ)解釋

術(shù)1

術(shù)2

術(shù)3

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Lottie-iOS中文翻譯

Lottie 應(yīng)用于iOS、MacOS(以及Android 和React Native)

使用Lottie

Swift 支持

支持的After Effects 的特性

關(guān)鍵幀插值（Keyframe Interpolation）

固態(tài)(Solids)

遮罩(Masks)

軌道遮罩(Track Mattes)

父子級(jí)關(guān)系(Parenting)

形狀圖層(Shape Layers)

描邊(shape layer) ［Stroke (shape layer)］

填充(shape layer)

裁切路徑(shape layer) [Trim Paths (shape layer)]

圖層特性(Layer Features)

目前還不支持的After Effects 特性

安裝Lottie

CocoaPods

Carthage

試試看

社區(qū)貢獻(xiàn)

替補(bǔ)方案

為什么叫Lottie？

貢獻(xiàn)

問(wèn)題或者功能需求？

技術(shù)路線(沒(méi)有特別的順序)

術(shù)語(yǔ)解釋

術(shù)1

術(shù)2

術(shù)3

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Lottie 應(yīng)用于iOS、MacOS(以及Android 和React Native)

為什么叫Lottie？

問(wèn)題或者功能需求？