[Swift]Lottieライブラリを使用して簡単なアニメーションViewを作成

Lottieライブラリとは？

Airbnbが開発したLottieは、iOS、Android、React Nativeなど多くのプラットフォームで利用でき、コードを差し替えることなく同じアニメーションを再利用できます。
Adobe After Effectsで作成したアニメーションをJSON形式に書き出し、そのまま読み込んでアプリ内で高品質なアニメーションとして表示可能です。

参考文献

実際に使ってみる

1️⃣ライブラリの追加

CocoaPodsで進めます。

pod 'lottie-ios'

pod installが完了したらプロジェクトへimport

2️⃣アニメーションをJSONファイルでダウンロード

以下のページからアニメーションをダウンロードできます。
ダウンロードページ：https://lottiefiles.com/featured?page=1

欲しいアニメーションを決めたら下記の箇所にてダウンロードし、Xcodeのプロジェクトにダウンロードしてきたjsonファイルを追加する。

3️⃣表示させる

基本的な使用方法です。

import UIKit
import Lottie

class ViewController: UIViewController {

    @IBOutlet weak var animationView: LottieAnimationView!

    override func viewDidLoad() {
        super.viewDidLoad()
        bind()
    }

}

extension ViewController {
    func bind() {
        let animationView = LottieAnimationView(name: "JSONファイル名")
        animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        animationView.center = view.center
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        view.addSubview(animationView)

        animationView.play()
        
    }
}

補足

上記で記載以外にできることを纏めます。

再生制御（開始・停止・一時停止）

animationView.play()                // 再生開始
animationView.pause()               // 一時停止
animationView.stop()                // 停止（最初に戻る）

ループモードの変更

animationView.loopMode = .loop        // 無限ループ
animationView.loopMode = .autoReverse // 行ったり来たりループ
animationView.loopMode = .playOnce    // 一度だけ再生

アニメーション終了時のコールバック

アニメーションが終了したタイミングで他の処理を呼び出しも可能

animationView.play { finished in
    if finished {
        // ここで他の処理を呼ぶこともできる
        // 例えば、次の画面に遷移したり、UIを切り替えたり
        print("アニメーション終了")
    }
}

再生速度の調整

animationView.animationSpeed = 0.5  // 0.5倍速（遅く）、2.0なら倍速

まとめ

Lottieは滑らかな動きをアプリに手軽に実装できるため、ユーザー体験の向上に大きく貢献します。
導入もシンプルで、少しの設定とJSONファイルの用意だけで即座に動かせる手軽さも嬉しいポイントだと思いました。