Lottieでアニメーションを実行する方法【Swift】

■はじめに

CocoaPodsをインストールしていない方は、「CocoaPodsインストール」よりインストールしてください。

iOSアプリのプロジェクトを作成していること。

■手順

ターミナルで以下のコマンドを実行し、プロジェクトに移動する。

cd [プロジェクトまでのディレクトリ]

ターミナルで以下のコマンドを実行し、CocoaPodsのファイルを作成する。

pod init

ターミナルで以下のコマンドを実行し、Podfileを編集モードにする。

vi Podfile

上記の編集モードのファイルに以下を追加する。

pod 'lottie-ios'

編集モードを終了し、以下のコマンドでCocoaPodsをインストールする。

pod install

インストールしたら、プロジェクトを開き、Lottieを使用したいソースで、以下をインポートする。

import Lottie

以下のJSONファイルをプロジェクトにドラッグ＆ドロップし追加する。

JSONサンプルファイルダウンロード

アニメーションを追加したい箇所に以下を記載してアニメーションさせる。

var animationView = AnimationView(name: "sample")
animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
animationView.center = self.view.center
animationView.animationSpeed = 1
animationView.loopMode = .loop

self.view.addSubview(animationView)
animationView.play()

アニメーションのJSONは「Adobe After Effects」などで作成してください。