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

Podfile に pod を追加します

pod 'lottie-ios'

そして実行します

pod install

cocoapod をプロジェクトにインストールした後、Lottie を次のようにインポートします。

import Lottie

Carthage

Cartfile に Lottie を追加します

github "airbnb/lottie-ios" "master"

そして実行します

carthage update

アプリケーションターゲットの「General」タブにある「Linked Frameworks and Libraries」セクションで、carthage update で生成された Carthage/Build/iOS ディレクトリから lottie-ios.framework をドラッグアンドドロップします。

目次に戻る

クイックスタート

Lottie-iOS は API に `UIImageView` を使用します。基本的な API は 2 つの部分に分かれています。

`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 アニメーションを支えるすべてのアニメーションデータを含んでいます。`Animation` は JSON から逆シリアル化されます。Codable; 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` を使用します。`AnimationImageProvider` は、`AnimationView` の初期化時、または `imageProvider` プロパティを設定することで、後で提供できます。`AnimationView` に画像を再読み込みさせるには、`AnimationView` で `reloadImages()` を呼び出します。

`AnimationImageProvider` の詳細についてはこちらをご覧ください。

アニメーションの再生

時間

アニメーションとアニメーションの一部を再生する方法はいくつかあります。Lottie は時間を 3 つの方法で記述します。

フレーム時間 - 秒あたりのフレーム形式で時間を記述します。 `(秒 * フレームレート)` _例：フレームレートが 24 の場合、0.5 秒はフレーム時間 12 です_。
進行時間 - アニメーションタイムラインの開始 (0) から終了 (1) までの進行状況で時間を記述します。
時間 - 秒単位で時間を記述します。

これら 3 つすべてを使用して、`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 のアスペクト比が Animation と異なる場合、アニメーションは伸縮されます。 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: アニメーションは 1 回再生されて停止します。 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 }

TimeInterval を使用して現在のアニメーション時間を設定します。現在の TimeInterval、またはアニメーション実行中の場合は最終的な TimeInterval を返します。==注==：これにより、現在のアニメーションが実行中の場合は停止します。

現在のフレーム

var AnimationView.currentFrame: AnimationFrameTime { get set }

Frame Time を使用して現在のアニメーション時間を設定します。現在の Frame Time、またはアニメーション実行中の場合は最終的な Frame Time を返します。==注==：これにより、現在のアニメーションが実行中の場合は停止します。

リアルタイムフレーム

var AnimationView.realtimeAnimationFrame: AnimationFrameTime { get }

アニメーション実行中の AnimationView のリアルタイム Frame Time を返します。

リアルタイム進行状況

var AnimationView.realtimeAnimationProgress: AnimationProgressTime { get }

アニメーション実行中の AnimationView のリアルタイム Progress Time を返します。

強制表示更新

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：クエリする値のFrame Time。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?

これらの2つのメソッドは、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はプロパティを読み取り、アニメーションのその部分を更新します。

Value Providerを使用して、ランタイムでアニメーションプロパティを動的に設定できます。

プリミティブ

Value Providerは、いくつかのプリミティブなデータ型と連携します。

色：RGBA（0〜1）で色を記述するプリミティブ。
Vector1D：単一のfloat値。
Vector3D：3次元ベクトル。（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という2つのアニメーションコントロールがプリパックされています。これらのコントロールはどちらも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は、美しいアニメーションを再生するだけではありません。Lottieでは、ランタイムでアニメーションを**変更**できます。

4つのトグルスイッチを作成したいとします。

Toggle

4つのスイッチを作成して再生するのは簡単です。

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)

キーパスは、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
アルファマット	👍	👍
アルファ反転マット	⛔️	🎉
輝度マット	⛔️	⛔️
輝度反転マット	⛔️	⛔️
パスのマージ	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の2倍以上のサイズで、大きな高密度スクリーンに合わせるように拡大できない固定サイズでレンダリングされます。
PNGシーケンス。PNGシーケンスは、ファイルサイズがBodymovin JSONの30〜50倍にもなり、拡大することもできないため、GIFよりもさらに悪いです。

目次に戻る

なぜ Lottie という名前なのか？

Lottieの名前は、ドイツの映画監督であり、シルエットアニメーションの第一人者である人物に由来しています。彼女の最も有名な作品は、『王子アーメドの冒険』（1926年）で、これはウォルト・ディズニーの『白雪姫』（1937年）を10年以上も前に制作された、現存する最古の長編アニメーション映画です。ロッテ・ライニガーの芸術

目次に戻る

コントリビュート

皆様からの貢献は大歓迎です。変更内容の説明を添えて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 という名前なのか？

コントリビュート

問題点や機能リクエスト？