SwiftUIでLottieアニメーションを表示する方法

こんばんは！りーさんです。
Lottieアニメーションをよく使用するので、SwiftUIで表示する方法を紹介していこうと思います。

Lottieアニメーション

下記のサイトから好きなアニメーションを探してみてください！

Featured animations from our community

好きなアニメーションを選んだら、JSONファイルをダウンロードしましょう。

SwiftUIでの表示方法

JSONファイルをXcodeに取り込もう

先ほど、ダウンロードしたJSONファイルをXcodeへドラックアンドドロップして取り込みましょう。名前は自由につけて大丈夫です。
今回の例では「loggingIn」にします。

Lottie-iosのSPM(Swift Package Manager)をインストール

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

LottieView

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    var filename: String
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: .zero)
        
        let animationView = LottieAnimationView(name: filename)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

ContentView

struct ContentView: View {
    var body: some View {
      LottieView(filename: “loggingIn”) // JSONファイル名を入れてください
          .frame(width: 100, height: 100)
    }
}

実際のアニメーション

このように表示されれば、Lottieアニメーションを使用することが可能です！