適用於 iOS、macOS 的 Lottie

==公告==：自 3.0 版本起，Lottie 已完全以 Swift 4.2 重寫！對於 Objective-C 的支援，請使用 Lottie 2.5.3。請閱讀此處的遷移文件這裡。

Lottie 是一個適用於 Android 和 iOS 的行動函式庫，可以即時原生渲染向量動畫和美術圖，程式碼極少。

Lottie 會載入並渲染以 bodymovin JSON 格式匯出的動畫和向量。Bodymovin JSON 可以使用 bodymovin 從 After Effects 建立和匯出，使用 Lottie Sketch Export 從 Sketch 建立和匯出，以及從 Haiku 建立和匯出。

設計師第一次可以建立並發佈精美的動畫，而無需工程師費力地手工重新建立。由於動畫是以 JSON 為基礎，它們的尺寸非常小，但複雜度卻可以很高！動畫可以播放、調整大小、循環、加速、減速、倒轉，甚至可以互動式地擦洗。Lottie 也可以播放或循環動畫的其中一部分，可能性是無限的！動畫甚至可以在執行時以各種方式變更！變更顏色、位置或任何可設定關鍵影格的值！Lottie 還支援開箱即用的原生 UIViewController 過場效果！

以下僅是 Lottie 強大功能的一小部分範例

Example1 Example2

Example3

Abcs

安裝 Lottie
快速開始
動畫模型
- 載入動畫
動畫視圖
影像提供者
- BundleImageProvider
- FilepathImageProvider
動畫快取
- LRUAnimationCache
值提供者
- 基本類型
- 預先建置的提供者
動畫控制項
動畫開關
動畫按鈕
範例
- 在執行時變更動畫
支援的 After Effects 功能
替代方案
為什麼稱為 Lottie？
參與貢獻
問題或功能請求？

安裝 Lottie

Lottie 支援 CocoaPods 和 Carthage（動態和靜態）。Lottie 是以 Swift 4.2 編寫的。

Github 儲存庫

您可以提取 Lottie Github 儲存庫，並包含 Lottie.xcodeproj 來建置動態或靜態函式庫。

CocoaPods

將 pod 新增至您的 Podfile

pod 'lottie-ios'

然後執行

pod install

將 cocoapod 安裝到您的專案中後，請使用下列程式碼匯入 Lottie

import Lottie

Carthage

將 Lottie 新增至您的 Cartfile

github "airbnb/lottie-ios" "master"

然後執行

carthage update

在您的應用程式目標的「一般」索引標籤中，於「連結的框架和函式庫」區段下，從 carthage update 產生的 Carthage/Build/iOS 目錄中，拖放 lottie-ios.framework。

回到目錄

快速開始

Lottie-iOS 查看 UIImageView 的 API。基本 API 分為兩個部分

Animation - 從 json 檔案還原序列化的動畫的基礎模型。
AnimationView - 負責載入和渲染 Animation 的 UIView 子類別。

您可以快速載入 Lottie 動畫，如下所示

let starAnimationView = AnimationView(name: "StarAnimation")

此外，您可以選擇載入沒有任何動畫的 AnimationView，並在稍後設定動畫

let starAnimationView = AnimationView()
/// Some time later
let starAnimation = Animation.named("StarAnimation")
starAnimationView.animation = starAnimation

您可以從特定套件組合、檔案路徑載入動畫，甚至可以從 URL 非同步載入。請在此處閱讀更多關於載入動畫的資訊這裡

載入動畫後，可以使用下列程式碼播放

starAnimationView.play { (finished) in
/// Animation finished
}

請在此處閱讀更多關於播放動畫的資訊這裡

回到目錄

動畫模型

Animation 模型是 Lottie 中的頂層模型物件。Animation 會保留支援 Lottie 動畫的所有動畫資料。Animations 是從 JSON 還原序列化的。可編碼；請參閱此處的 JSON 結構描述這裡。

Animation 也完全可以 codable。==動畫可以解碼和編碼為 JSON!==

載入動畫

有多種方法可以單獨載入 Animation。此外，您可以透過 AnimationView 上便利的初始化器之一，在配置 AnimationView 時載入動畫。

動畫可以儲存在 AnimationCacheProvider 中，以減少重複還原序列化相同動畫的額外負荷。請在此處閱讀更多資訊這裡。

從套件組合載入

Animation.named(_ name: String, bundle: Bundle, subdirectory: String?, animationCache: AnimationCacheProvider?) -> Animation?

依名稱從套件組合載入動畫模型。如果找不到動畫，則傳回 nil。

參數：：name：json 檔案的名稱，不含 json 副檔名。例如「StarAnimation」：bundle：動畫所在的套件組合。預設為 Bundle.main：subdirectory：套件組合中動畫所在的子目錄。選用。：animationCache：用於保存已載入動畫的快取。選用。

範例

/// Load from the main bundle.
let animation = Animation("StarAnimation")
/// Load from a specific bundle/
let animation = Animation("StarAnimation", bundle: myBundle)
/// Load from a subdirectory in a bundle.
let animation = Animation("StarAnimation", subdirectory: "Animations")
/// Load with an animation cache.
let animation = Animation("StarAnimation", animationCache: LRUAnimationCache.sharedCache)

從檔案路徑載入

Animation.filepath(_ filepath: String, animationCache: AnimationCacheProvider?) -> Animation?

從絕對檔案路徑載入動畫模型。如果找不到動畫，則傳回 nil。

參數：：filepath：要載入之動畫的絕對檔案路徑。例如「/User/Me/starAnimation.json」：animationCache：用於保存已載入動畫的快取。選用。

範例

let animation = Animation(filepathURL.path, animationCache: LRUAnimationCache.sharedCache)

回到目錄

動畫視圖

AnimationView 是一個 UIView (macOS 上為 NSView) 子類別，會顯示動畫內容。AnimationView 提供多種方法來載入、播放，甚至變更動畫。

建立動畫視圖

可以使用或不使用動畫資料來配置動畫視圖。有一些便利的初始化器可讓您使用動畫進行初始化。

提供影像

AnimationView 使用 AnimationImageProvider 來擷取動畫的影像。可以在初始化動畫視圖時提供影像提供者，或者在之後設定其 imageProvider 屬性。若要強制 AnimationView 重新載入其影像，請在 AnimationView 上呼叫 reloadImages()。

請在此處閱讀更多關於 AnimationImageProvider 的資訊這裡

播放動畫

時間

有多種方法可以播放動畫和動畫的一部分。Lottie 會以三種方式描述時間

影格時間 - 以每秒影格格式描述時間。(秒數 * 影格速率) 例如：當影格速率為 24 時，0.5 秒是影格時間 12。
進度時間 - 以從 0 (動畫時間軸的開頭) 到 1 (動畫時間軸的結尾) 的進度描述時間。
時間 - 以秒為單位描述時間。

所有三種時間都可以用來在 AnimationView 上播放和設定時間

基本播放

AnimationView.play(completion: LottieCompletionBlock?)

從動畫的目前狀態播放到時間軸的結尾。動畫停止時，會呼叫完成區塊。

參數：：completion：動畫完成時呼叫的完成區塊。如果動畫完成，則該區塊會傳遞 true，如果動畫中斷，則傳遞 false。選用。

範例

starAnimationView.play { (finished) in
/// Animation stopped
}

使用進度時間播放

AnimationView.play(fromProgress: AnimationProgressTime?, toProgress: AnimationProgressTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

使用選項，從 進度時間 播放動畫到 進度時間。

參數：：fromProgress：動畫的開始進度。如果 nil，動畫將從目前的進度開始。(選用) ：toProgress：動畫的結束進度。：loopMode：動畫的循環行為。如果 nil，將使用視圖的 loopMode 屬性。(選用) ：completion：動畫停止時呼叫的選用完成閉包。(選用)

範例

/// Play only the last half of an animation.
animationView.play(fromProgress: 0.5, toProgress: 1)

使用影格時間播放

AnimationView.play(fromFrame: AnimationProgressTime?, toFrame: AnimationFrameTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

使用選項，從 影格時間 播放動畫到 影格時間。

參數：：fromFrame：動畫的開始影格。如果 nil，動畫將從目前的影格開始。(選用) ：toFrame：動畫的結束影格。：loopMode：動畫的循環行為。如果 nil，將使用視圖的 loopMode 屬性。(選用) ：completion：動畫停止時呼叫的選用完成閉包。(選用)

範例

/// Play from frame 24 to 48 of an animation.
animationView.play(fromFrame: 24, toFrame: 48)

使用標記名稱播放

AnimationView.play(fromMarker: String?, toMarker: String, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)

從具名標記播放動畫到另一個標記。標記是編碼到動畫資料中並指派名稱的時間點。請在此處閱讀更多關於標記的資訊這裡 ==注意==：如果找不到標記，播放命令將會結束。

參數：：fromMarker：動畫播放的開始標記。如果 nil，動畫將從目前的進度開始。(選用) ：toMarker：動畫播放的結束標記。：loopMode：動畫的循環行為。如果 nil，將使用視圖的 loopMode 屬性。(選用) ：completion：動畫停止時呼叫的選用完成閉包。(選用)

範例

/// Play from frame 24 to 48 of an animation.
animationView.play(fromMarker: "ftue1_begin", toMarker: "ftue1_end")

停止

AnimationView.stop()

停止目前正在播放的動畫 (如果有的話)。動畫視圖會重設為其開始影格。先前的動畫完成區塊將以 false 關閉。範例

animationView.stop()

暫停

AnimationView.pause()

在其目前狀態下暫停動畫。先前的動畫完成區塊將以 false 關閉。範例

animationView.pause()

動畫設定

AnimationView 具有多種設定，可用於控制播放和視覺狀態。

內容模式

/// iOS
var AnimationView.contentMode: UIViewContentMode { get set }
/// MacOS
var AnimationView.contentMode: LottieContentMode { get set }

描述 AnimationView 應如何調整大小並縮放其內容。

選項：：scaleToFill：動畫會縮放以填滿 AnimationView 的範圍。如果 AnimationView 的長寬比與動畫不同，則動畫會被拉伸。：scaleAspectFit：動畫會縮放以符合 AnimationView，同時保留其長寬比。：scaleAspectFill：動畫會縮放以填滿 AnimationView，同時保留其長寬比。：topLeft：動畫不會縮放。

背景行為

var AnimationView.backgroundBehavior: LottieBackgroundBehavior { get set }

描述應用程式移至背景時，AnimationView 的行為。(僅限 iOS)

預設為 .pause

選項：：stop：停止動畫並將其重設為目前播放時間的開頭。會呼叫完成區塊。：pause：在其目前狀態下暫停動畫。會呼叫完成區塊。：pauseAndRestore：暫停動畫，並在應用程式移回前景時重新啟動。完成區塊會儲存，並在動畫完成時呼叫。

循環模式

var AnimationView.loopMode: LottieLoopMode { get set }

設定 play 呼叫的循環行為。預設為 playOnce。選項：：playOnce：動畫播放一次然後停止。：loop：動畫會從結束到開始循環播放，直到停止。：autoReverse：動畫會向前播放，然後向後播放，並循環播放，直到停止。

動畫是否正在播放

var AnimationView.isAnimationPlaying: Bool { get set }

如果動畫目前正在播放，則傳回 true，如果沒有播放，則傳回 false。

閒置時是否應點陣化

var AnimationView.shouldRasterizeWhenIdle: Bool { get set }

當為 true 時，動畫視圖會在非動畫播放時將其內容光柵化。光柵化將改善靜態動畫的效能。 ==注意：== 在高於動畫原始解析度的情況下，這將無法產生清晰的結果。

預設值為 false

遵循動畫影格率

var AnimationView.respectAnimationFrameRate: Bool { get set }

當為 true 時，動畫將以 Animation 模型中編碼的影格率播放。當為 false 時，動畫將以裝置的影格率播放。

預設值為 false

動畫速度

var AnimationView.animationSpeed: CGFloat { get set }

設定動畫播放的速度。速度越高，時間越快。預設值為 1

目前進度

var AnimationView.currentProgress: AnimationProgressTime { get set }

使用進度時間設定目前的動畫時間。傳回目前的進度時間，如果動畫正在進行中，則傳回最終的進度時間。==注意==：設定此值將停止目前的動畫（如果有的話）。

目前時間

var AnimationView.currentTime: TimeInterval { get set }

使用時間間隔設定目前的動畫時間。傳回目前的時間間隔，如果動畫正在進行中，則傳回最終的時間間隔。==注意==：設定此值將停止目前的動畫（如果有的話）。

目前影格

var AnimationView.currentFrame: AnimationFrameTime { get set }

使用影格時間設定目前的動畫時間。傳回目前的影格時間，如果動畫正在進行中，則傳回最終的影格時間。==注意==：設定此值將停止目前的動畫（如果有的話）。

即時影格

var AnimationView.realtimeAnimationFrame: AnimationFrameTime { get }

傳回 AnimationView 在動畫播放時的即時影格時間。

即時進度

var AnimationView.realtimeAnimationProgress: AnimationProgressTime { get }

傳回 AnimationView 在動畫播放時的即時進度時間。

強制顯示更新

func AnimationView.forceDisplayUpdate()

強制 AnimationView 重新繪製其內容。

使用標記

標記是一種透過鍵名稱描述時間點的方式。標記會編碼到動畫 JSON 中。透過使用標記，設計師可以標記播放點，供開發人員使用，而無需擔心追蹤動畫影格。如果更新動畫檔案，開發人員無需更新播放程式碼。

標記可用於播放動畫的區段，或可直接讀取以進行更進階的使用。Animation 和 AnimationView 都有讀取標記時間的方法。

讀取標記時間

/// Animation View Methods
AnimationView.progressTime(forMarker named: String) -> AnimationProgressTime?
AnimationView.frameTime(forMarker named: String) -> AnimationFrameTime?
/// Animation Model Methods
Animation.progressTime(forMarker named: String) -> AnimationProgressTime?
Animation.frameTime(forMarker named: String) -> AnimationFrameTime?

每個方法都會傳回指定名稱的標記時間。如果找不到標記，則傳回 nil。

動態動畫屬性

幾乎所有 Lottie 動畫的屬性都可以在執行階段使用動畫關鍵路徑和值提供器的組合來變更。在關鍵路徑上設定 ValueProvider 將導致動畫更新其內容並讀取新的 Value Provider。此外，可以使用 動畫關鍵路徑讀取動畫屬性。

設定動態屬性

AnimationView.setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath)

為指定的關鍵路徑設定 ValueProvider。值提供器將設定在所有符合關鍵路徑的屬性上。

參數：valueProvider：屬性的新值提供器。：keypath：用於搜尋屬性的關鍵路徑。

範例

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

讀取動畫屬性

AnimationView.getValue(for keypath: AnimationKeypath, atFrame: AnimationFrameTime?) -> Any?

讀取關鍵路徑指定的屬性值。如果找不到屬性，則傳回 nil。

參數：for：用於搜尋屬性的關鍵路徑。：atFrame：要查詢值的影格時間。如果為 nil，則使用目前影格。

範例

/// A keypath that finds the Position of `Group 1` in `Layer 1`
let fillKeypath = AnimationKeypath(keypath: "Layer 1.Group 1.Transform.Position")
let position = animationView.getValue(for: fillKeypath, atFrame: nil)
/// Returns Vector(10, 10, 0) for currentFrame.

記錄關鍵路徑

AnimationView.logHierarchyKeypaths()

將動畫的所有子關鍵路徑記錄到主控台中。

將視圖新增至動畫

自訂視圖可以新增至 AnimationView。這些視圖會與動畫一起產生動畫。

新增子視圖

AnimationView.addSubview(_ subview: AnimationSubview, forLayerAt keypath: AnimationKeypath)

搜尋最靠近第一個關鍵路徑的子圖層，並將子視圖新增到該圖層。子視圖將隨子圖層移動並產生動畫。此外，子視圖將位於子圖層的座標空間中。==注意==：如果找不到關鍵路徑的圖層，則不會發生任何事。

參數：subview：要新增到找到的動畫圖層的子視圖。：keypath：用於尋找動畫圖層的關鍵路徑。

範例

/// A keypath that finds `Layer 1`
let layerKeypath = AnimationKeypath(keypath: "Layer 1")

/// Wrap the custom view in an `AnimationSubview`
let subview = AnimationSubview()
subview.addSubview(customView)

/// Set the provider on the animationView.
animationView.addSubview(subview, forLayerAt: layerKeypath)

將 CGRect 和 CGPoint 轉換為圖層

/// Converts a rect
AnimationView.convert(_ rect: CGRect, toLayerAt keypath: AnimationKeypath) -> CGRect?
/// Converts a point
AnimationView.convert(_ point: CGPoint, toLayerAt keypath: AnimationKeypath) -> CGPoint?

這兩個方法用於將幾何圖形從 AnimationView 的座標空間轉換為在關鍵路徑找到的圖層的座標空間。

如果找不到圖層，則傳回 nil

參數：point 或 rect：AnimationView 座標空間中要轉換的 CGPoint 或 CGRect。：keypath：用於尋找圖層的關鍵路徑。

回到目錄

影像提供者

圖像提供器是一種用於向 AnimationView 提供圖像的協定。

某些動畫需要參照圖像。圖像提供器會載入這些圖像並將其提供給 AnimationView。Lottie 包含幾個預先建立的圖像提供器，這些提供器從套件或檔案路徑提供圖像。

此外，可以建立自訂圖像提供器，從 URL 載入圖像或快取圖像。

BundleImageProvider

public class BundleImageProvider: AnimationImageProvider

AnimationImageProvider 會從特定套件按名稱提供圖像。BundleImageProvider 使用套件和可選的搜尋路徑初始化。

/// Create a bundle that loads images from the Main bundle in the subdirectory "AnimationImages"
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "AnimationImages")
/// Set the provider on an animation.
animationView.imageProvider = imageProvider

FilepathImageProvider

public class FilepathImageProvider: AnimationImageProvider

AnimationImageProvider 會從特定的本機檔案路徑按名稱提供圖像。

/// Create a bundle that loads images from a local URL filepath.
let imageProvider = AnimationImageProvider(filepath: url)
/// Set the provider on an animation.
animationView.imageProvider = imageProvider

回到目錄

動畫快取

AnimationCacheProvider 是一種描述動畫快取的協定。動畫快取用於載入 Animation 模型。多次載入動畫時，使用動畫快取可以提高效能。

Lottie 隨附預先建立的 LRU 動畫快取。

LRUAnimationCache

動畫快取會儲存最多 cacheSize 的動畫。一旦達到 cacheSize，最近最少使用的動畫就會被逐出。快取的預設大小為 100。

LRUAnimationCache 有一個全域 sharedCache，用於儲存動畫。

您也可以呼叫 LRUAnimationCache.sharedCache.clearCache() 來清除快取。

回到目錄

值提供者

AnyValueProvider 是一種協定，會傳回指定時間的屬性動畫資料。每個影格 AnimationView 都會查詢其所有屬性，並詢問其 ValueProvider 是否有更新。如果有的話，AnimationView 會讀取屬性並更新動畫的該部分。

值提供器可用於在執行階段動態設定動畫屬性。

基本類型

值提供器適用於幾種基本資料類型。

色彩：一種基本類型，描述 R G B A (0-1) 中的色彩
Vector1D：單一浮點值。
Vector3D：一個三維向量。(X, Y, Z)

預先建置的提供者

Lottie 隨附了適用於每個基本類型的幾個預先建立的提供器。每個提供器都可以使用單一值或逐影格呼叫的區塊來初始化。

範例

/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

/// Later...
/// Changing the value provider will update the animation.
redValueProvider.color = Color(r: 0, g: 0.2, b: 1, a: 1)

回到目錄

動畫關鍵路徑

AnimationKeypath 是一個物件，描述動畫 JSON 中節點的關鍵路徑搜尋。AnimationKeypath 會將 AnimationView 內部的視圖和屬性，依照名稱比對至其後備的 Animation 模型。

關鍵路徑可用於在現有的動畫上設定屬性，或可以使用現有的 Animation 來驗證。AnimationKeypath 可以描述特定的物件，也可以使用萬用字元來模糊比對物件。可接受的萬用字元為「*」（星號）或「**」（雙星號）。單星號會搜尋單一深度以尋找下一個物件。雙星號會搜尋任何深度。

可以使用以點分隔的關鍵路徑或按鍵陣列來初始化 AnimationKeypath。

關鍵路徑範例

/// Represents a specific color node on a specific stroke.
@"Layer.Shape Group.Stroke 1.Color"

/// Represents the color node for every Stroke named "Stroke 1" in the animation.
@"**.Stroke 1.Color"

程式碼範例

/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath =  AnimationKeypath(keypath:  "**.Fill 1.Color")

回到目錄

動畫控制項

Lottie 預先封裝了兩個動畫控制項，AnimatedSwitch 和 AnimatedButton。這兩個控制項都建立在 AnimatedControl 的基礎上

AnimatedControl 是 UIControl 的子類別，提供互動機制，以回應使用者動作來控制動畫的視覺狀態。

AnimatedControl 會根據控制項目前的 UIControl.State 來顯示和隱藏圖層。

AnimationControl 的使用者可以為每個 UIControl.State 設定圖層名稱。當狀態變更時，AnimationControl 會變更其圖層的能見度。

回到目錄

動畫開關

SwitchButton

一個具有「開啟」和「關閉」狀態的互動式開關。當使用者點選開關時，狀態會切換，並播放適當的動畫。

「開啟」和「關閉」都有與其狀態相關聯的動畫播放範圍。

若要變更每個狀態的播放範圍，請使用

/// Sets the play range for the given state. When the switch is toggled, the animation range is played.
public func setProgressForState(fromProgress: AnimationProgressTime,
        toProgress: AnimationProgressTime,
        forState onState: Bool)

回到目錄

動畫按鈕

HeartButton

一個在按下時播放動畫的互動式按鈕。AnimatedButton 可以針對不同的 UIControl.Event 播放各種時間範圍。使用下列其中一種方式設定播放範圍

/// Set a play range with Progress Time.
public func setPlayRange(fromProgress: AnimationProgressTime,
        toProgress: AnimationProgressTime,
        event: UIControl.Event)
/// Set a play range with Marker Keys.
public func setPlayRange(fromMarker fromName: String,
        toMarker toName: String,
        event: UIControl.Event)

設定後，當事件觸發時，動畫將自動播放。

範例

/// Create a button.
let twitterButton = AnimatedButton()
twitterButton.translatesAutoresizingMaskIntoConstraints = false
/// Set an animation on the button.
twitterButton.animation = Animation.named("TwitterHeartButton", subdirectory: "TestAnimations")
/// Turn off clips to bounds, as the animation goes outside of the bounds.
twitterButton.clipsToBounds = false
/// Set animation play ranges for touch states
twitterButton.setPlayRange(fromMarker: "touchDownStart", toMarker: "touchDownEnd", event: .touchDown)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpCancel", event: .touchUpOutside)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpEnd", event: .touchUpInside)
view.addSubview(twitterButton)

回到目錄

範例

在執行時變更動畫

Lottie 不僅可以播放漂亮的動畫，還可以讓您在執行階段變更動畫。

假設我們要建立 4 個切換開關。

Toggle

建立四個開關並播放它們很容易

let animationView = AnimationView(name: "toggle");
self.view.addSubview(animationView)
animationView.play()

let animationView2 = AnimationView(name: "toggle");
self.view.addSubview(animationView2)
animationView2.play()

let animationView3 = AnimationView(name: "toggle");
self.view.addSubview(animationView3)
animationView3.play()

let animationView4 = AnimationView(name: "toggle");
self.view.addSubview(animationView4)
animationView4.play()

現在讓我們變更它們的顏色

Recolored Toggle

/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// A Color Value provider that returns a reddish color.
let orangeValueProvider = ColorValueProvider(Color(r: 1, g: 1, b: 0, a: 1))
/// A Color Value provider that returns a reddish color.
let greenValueProvider = ColorValueProvider(Color(r: 0.2, g: 1, b: 0.3, a: 1))



let keypath = AnimationKeypath(keypath: "BG-On.Group 1.Fill 1.Color")
animationView2.setValueProvider(greenValueProvider, keypath: keypath)

animationView3.setValueProvider(redValueProvider, keypath: keypath)

animationView4.setValueProvider(orangeValueProvider, keypath: keypath)

keyPath 是 After Effects 中圖層和屬性名稱的點分隔路徑。AnimationView 提供 func logHierarchyKeypaths()，它會以遞迴方式記錄動畫的所有可設定關鍵路徑。

"BG-On.Group 1.Fill 1.Color"

現在讓我們變更一些屬性

Multiple Colors

Lottie 可讓您變更 After Effects 中任何可動畫化的屬性。

回到目錄

支援的 After Effects 功能

形狀	2.5.2	3.0
形狀	👍	👍
橢圓形	👍	👍
矩形	👍	👍
圓角矩形	👍	👍
多星形	👍	👍
群組	👍	👍
重複器	👍	⛔️
修剪路徑（個別）	⛔️	🎉
修剪路徑（同時）	❗️	🎉
可渲染	2.5.2	3.0
填色	👍	👍
筆劃	👍	👍
放射性漸層	👍	👍
線性漸層	👍	👍
漸層筆劃	⛔️	🎉
變形	2.5.2	3.0
位置	👍	👍
位置（分隔 X/Y）	❗️	👍
縮放	👍	👍
傾斜	⛔️	🎉
旋轉	👍	👍
錨點	👍	👍
不透明度	👍	👍
父子關係	👍	👍
自動定向	⛔️	⛔️
內插	2.5.2	3.0
線性內插	❗️	🎉
貝茲內插	👍	👍
保持內插	👍	👍
空間貝茲內插	❗️	🎉
跨時間移動	👍	👍
遮罩	2.5.2	3.0
遮罩路徑	👍	👍
遮罩不透明度	👍	👍
新增	👍	👍
減去	❗️	🎉
相交	⛔️	🎉
變亮	⛔️	⛔️
變暗	⛔️	⛔️
差異	⛔️	⛔️
擴展	⛔️	⛔️
羽化	⛔️	⛔️
遮罩	2.5.2	3.0
Alpha 遮罩	👍	👍
反轉 Alpha 遮罩	⛔️	🎉
亮度遮罩	⛔️	⛔️
反轉亮度遮罩	⛔️	⛔️
合併路徑	2.5.2	3.0
合併	⛔	⛔
新增	⛔	⛔
減去	⛔	⛔
相交	⛔	⛔
排除相交	⛔	⛔
圖層效果	2.5.2	3.0
填色	⛔️	⛔️
筆劃	⛔️	⛔️
色調	⛔️	⛔️
三色調	⛔️	⛔️
個別控制等級	⛔️	⛔️
文字	2.5.2	3.0
字形	⛔️	⛔️
字型	⛔️	🎉
變形	⛔️	🎉
填色	⛔️	🎉
筆劃	⛔️	🎉
追蹤	⛔️	🎉
錨點分組	⛔️	⛔️
文字路徑	⛔	⛔️
逐字元 3D	⛔	⛔️
範圍選取器 (單位)	⛔	⛔️
範圍選取器 (基於)	⛔	⛔️
範圍選取器 (數量)	⛔	⛔️
範圍選取器 (形狀)	⛔	⛔️
範圍選取器 (緩和高)	⛔	⛔️
範圍選取器 (緩和低)	⛔	⛔️
範圍選取器 (隨機排序)	⛔	⛔️
表達式選取器	⛔	⛔️
其他	2.5.2	3.0
表達式	⛔️	⛔️
圖片	👍	👍
預合成	👍	👍
時間延展	⛔️	👍
時間重製	⛔️	👍
標記	⛔️	🎉

回到目錄

替代方案

手動建立動畫。手動建立動畫對於 Android 和 iOS 的設計和工程而言，都是一項耗時巨大的任務。通常很難，甚至不可能，投入如此大量的時間來將動畫調整至正確狀態。
Facebook Keyframes。Keyframes 是 Facebook 為其反應功能開發的一個很棒的新函式庫。然而，Keyframes 並不支援 Lottie 的某些功能，例如遮罩、遮片、修剪路徑、虛線樣式等。
GIF 圖檔。GIF 圖檔的大小是 bodymovin JSON 的兩倍以上，並且以固定大小渲染，無法放大以匹配大型和高解析度的螢幕。
PNG 序列。PNG 序列甚至比 GIF 圖檔更糟，它們的檔案大小通常是 bodymovin JSON 的 30-50 倍，而且也無法放大。

回到目錄

為什麼稱為 Lottie？

Lottie 以德國電影導演和剪影動畫的先驅命名。她最著名的電影是《阿基米德王子歷險記》(1926) – 現存最古老的故事長片動畫，比華特·迪士尼的故事長片動畫《白雪公主和七個小矮人》(1937) 早了十多年。蘿特·萊尼格的藝術

回到目錄

參與貢獻

非常歡迎貢獻者。只需上傳一個包含您的變更描述的 PR 即可。若要快速了解 Lottie-iOS 的運作方式，請閱讀貢獻者文件

回到目錄

問題或功能請求？

請為任何損壞的問題建立 GitHub issue。提交之前，請務必檢查支援的功能清單。如果動畫無法正常運作，請將 After Effects 檔案附加到您的 issue 中。沒有原始檔案的除錯會非常困難。Lottie 由 Brandon Withrow 開發和維護。歡迎透過電子郵件或 Twitter 聯繫。

回到目錄

Lottie (iOS, macOS)

適用於 iOS、macOS 的 Lottie

目錄

安裝 Lottie

Github 儲存庫

CocoaPods

Carthage

快速開始

動畫模型

載入動畫

從套件組合載入

從檔案路徑載入

動畫視圖

建立動畫視圖

提供影像

播放動畫

時間

基本播放

使用進度時間播放

使用影格時間播放

使用標記名稱播放

停止

暫停

動畫設定

內容模式

背景行為

循環模式

動畫是否正在播放

閒置時是否應點陣化

遵循動畫影格率

動畫速度

目前進度

目前時間

目前影格

即時影格

即時進度

強制顯示更新

使用標記

讀取標記時間

動態動畫屬性

設定動態屬性

讀取動畫屬性

記錄關鍵路徑

將視圖新增至動畫

新增子視圖

將 CGRect 和 CGPoint 轉換為圖層

影像提供者

BundleImageProvider

FilepathImageProvider

動畫快取

LRUAnimationCache

值提供者

基本類型

預先建置的提供者

動畫關鍵路徑

動畫控制項

動畫開關

動畫按鈕

範例

在執行時變更動畫

假設我們要建立 4 個切換開關。

現在讓我們變更它們的顏色

現在讓我們變更一些屬性

支援的 After Effects 功能

替代方案

為什麼稱為 Lottie？

參與貢獻

問題或功能請求？