![見出し画像](https://assets.st-note.com/production/uploads/images/145752057/rectangle_large_type_2_1802f1c7e78b98f134ab9c0de64ab242.png?width=1200)
SwiftUIでLottieアニメーションを表示する方法
こんばんは!りーさんです。
Lottieアニメーションをよく使用するので、SwiftUIで表示する方法を紹介していこうと思います。
Lottieアニメーション
下記のサイトから好きなアニメーションを探してみてください!
好きなアニメーションを選んだら、JSONファイルをダウンロードしましょう。
![](https://assets.st-note.com/production/uploads/images/145748559/picture_pc_0e478990fc994de98ba498c70876a331.png?width=1200)
SwiftUIでの表示方法
JSONファイルをXcodeに取り込もう
先ほど、ダウンロードしたJSONファイルをXcodeへドラックアンドドロップして取り込みましょう。名前は自由につけて大丈夫です。
今回の例では「loggingIn」にします。
Lottie-iosのSPM(Swift Package Manager)をインストール
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)
}
}
実際のアニメーション
![](https://assets.st-note.com/production/uploads/images/145750849/picture_pc_51124f2b3e93ab8cca381507949fdf7d.png)
このように表示されれば、Lottieアニメーションを使用することが可能です!
この記事が気に入ったらサポートをしてみませんか?