2025/10/3

【Swift UI/UIKit】Lottieの使い方！アニメーションの実装方法

この記事からわかること

Xcode/iOSでアニメーションの実装方法
Lottieとは？

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：26.0.1
iOS：26
Swift：6
Lottie：4.5.2
macOS：Tahoe 26.0.1

Lottieとは？

公式リファレンス：Lottie

「Lottie(ロッティ)」とはJSONベースのアニメーションファイル形式です。Airbnb社が開発した形式でiOS / Android / Web上の異なるプラットフォーム間で安定したアニメーションを再生できるのが特徴です。

また容量も軽量でGifなどに比べて60%程度容量を削減できるほか、読み込み速度も速いのが大きなメリットでもあります。

実際にアニメーションを定義した拡張子が.jsonのファイルを用意してそのファイルを専用のライブラリで読み込むことでアニメーションを実装できるような仕組みになっています。また拡張子が「.lottie」の「dotLottie」と呼ばれるファイルもあるようです。

公式リファレンス：Getting-started-with-dotLottie

「dotLottie」は既存のJSONファイルをより機能的・効率的に改善したもので容量の軽減や複数アニメーションの保持などができるようですが、.lottieのファイルを読み込ませても期待通りに動作しなかったのでまだあまり私も使い方がわかっていないです。

ライブラリの導入

iOSアプリでLottieを使用してアニメーションを実装するためにlottie-iosライブラリが用意されています。Cocoa Podsなどにも対応していますがSwift Package Managerでの導入が推奨されています。「Xcode」＞「File」＞「Add Package Dependencies..」から以下のURLで検索をかけてLottieパッケージを追加します。

https://github.com/airbnb/lottie-ios

導入が完了したのでimportすることでLottieが使用できるようになります。

import Lottie

またLottieはUIKitベース・Swift UIベース両方に対応しているライブラリになっています。どちらも簡単に使用できるので使い方を見ていきたいと思います。

アニメーションJSONファイルを用意する

Lottieを使用するためにまずアニメーションJSONファイルを用意する必要があります。自作することも可能なようで「Lottie Creator」と呼ばれるツールやFigmaのプラグインとしても提供されているようです。

エンジニアはあまり自分で作成することはなく、動作確認や既存のものを流用したいだけかと思います。その場合は「Lottie Files」からある程度あれば無料でダウンロードが可能になっています。アカウント作成は必須のようで、専用のコンソール画面が用意されており無料の中から自身のLottie Filesプロジェクトに保存してからJSONファイルやdotLottieファイルがダウンロードができるようになりました。

ダウンロードしたJSONファイル(今回は「Loading.json」)はiOSプロジェクトにそのまま入れ込んでおきます。

Swift UIでの実装方法

JSONファイルをプロジェクト内に設置できたらSwift UIであればLottieView構造体が用意されています。引数animationににLottieAnimation型でLottieのアニメーションを渡します。JSONファイルをプロジェクト内に設置している場合はnamedメソッドを使ってファイル名を指定すればOKです。

定義
extension LottieAnimation {
  public static func named(
    _ name: String,
    bundle: Bundle = Bundle.main,
    subdirectory: String? = nil,
    animationCache: AnimationCacheProvider? = LottieAnimationCache.shared)
    -> LottieAnimation?
  {
    // 〜〜〜〜〜〜〜〜〜〜〜〜
  }
}

アニメーションの再生はplayingメソッド、アニメーションのループはloopingメソッドを使用します。呼び出す順番も大事でplayingの後にloopingを呼び出さないと期待通りにループしないので注意してください。

LottieView(animation: .named("Loading"))
    .playing()
    .looping()

またJSONファイルの読み込みをローカルではなくクラウドから取得することも可能です。

LottieView {
  try await LottieAnimation.loadedFrom(url: myAnimationDownloadURL)
}.playing()

再生をコードから制御する

ユーザーがボタンを押下したタイミングなどでアニメーションを再生したい場合はLottiePlaybackModeを使用します。playbackModeメソッドでアニメーションの再生制御をLottiePlaybackModeと紐づけることができplayingを格納することで再生させることが可能です。

struct ContentView: View {
    @State var playbackMode = LottiePlaybackMode.paused(at: .currentFrame)
    
    var body: some View {
    LottieView(animation: .named("Loading"))
          // 再生制御をLottiePlaybackModeと連携させる
          .playbackMode(playbackMode)
          // アニメーション終了時に実行したい処理
          .animationDidFinish { _ in
              // 終了時にはModeを停止する
              playbackMode = .paused
          }
      
        Button {
            // 再生
            playbackMode = .playing(
                .fromProgress(
                    0,
                    toProgress: 1,
                    // ループせず1回で終了
                    loopMode: .playOnce
                )
            )
        } label: {
            Image(systemName: "play.fill")
        }
    }
}

UIKitでの実装方法

UIKitの場合はLottieAnimationViewクラスを使用します。引数に対象のJSONファイル名を指定しplayメソッドを呼び出すことでアニメーションを再生することが可能です。

let loadingAnimationView = LottieAnimationView(name: "Loading")
loadingAnimationView.loopMode = .loop
loadingAnimationView.play { (finished) in
  /// LottieAnimation finished
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift