SwiftUIでLottie Animationを適用する

Lottie Animationとは

LottieAndroid、iOS、Web、Windows用アニメーションライブラリで、複雑なアニメーションを手軽に実装することができるようになります。さらに動画などのファイルに比べてファイル容量も軽量でSVGを用いているので拡大縮小もお手の物です。

環境

• OS: macOS Big Sur 11.0.1
• Xcode: 12.2
• Swift: 5.3.1
• IOS : 14.0

こんなものができます

*動作かなり重く見えますが実際はもっと軽く動きます。

準備

Lottieを開発中のアプリに適用します。

$ pod init

$ open Podfile

そしてPodfile内にpod 'lottie-ios'を追記します。

$ pod install 

次に、.jsonファイルを用意します。
LottieFilesから探すのが楽かと思います。

手元に.jsonファイルが用意できたら、プロジェクトディレクトリの配下に格納します。

これで準備は以上です。

コード例

struct AnimatedView: UIViewRepresentable {
    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: "追加した.jsonファイルの名前(拡張子抜き)", bundle: Bundle.main)
        
        view.play { (status) in
            if status {
                withAnimation(.interactiveSpring(response: 0.6, dampingFraction: 0.8, blendDuration: 0.8)) {
                    isShow.toggle()
                }
            }
        }
        
        return view
    }
    
    func updateUIView(_ uiView: AnimationView, context: Context) {
    }
}

これだけのコードでgifアニメーションがアプリに適用できます。
ただ、今回は一定時間たつとバウンドするようにしているので、withAnimationメソッドを呼んでいますが、単純にgifアニメーションを表示したいだけとかだと更にコード行は減るかなと思います。

大きさはframe指定でいじってみるのが良いかなと思います。

struct ContentView: View {
    var body: some View {
        AnimatedView()
            .frame(width: 200, height 200)
            とか
            .frame(width: UIScreen.main.bounds.height / 2)
            など
    }
}

まとめ

今回はSwiftUIでLottie Animationを適用する方法を紹介しました。
すごく簡単で面白いのでぜひ試してみてください