SwiftUI에서 Lottie를 사용하여 풍부한 애니메이션을 쉽게 실현해보세요

이하의 기사를 이전 썼지만, 최근 SwiftUI를 사용해 Lottie를 이용했으므로 그 방법에 대해서 써 간다.

Lottie에 관한 설명은 여러가지 기사에서도 되고 있으므로 여기서는 언급하지 말고, SwiftUI상에서의 이용 방법에 대해 봐 간다.

설치

설치 방법은 SwiftUI를 사용한다고 해서 특별히 변하지 않는다. GitHub 설명에 따른다. CocoaPods를 이용하는 경우는, Podfile에 이하를 추가해 pod install 를 터미널로 부르는 것만. 코드내에서 import Lottie 라고 하면 Lottie가 이용 가능하게 된다.

# Podfile

pod 'lottie-ios'

코드

다음과 같은 파일을 만든다.

// LottieView.swift

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    private let tag = 100 // 必要があれば変えてください

    var name: String
    var loopMode: LottieLoopMode = .playOnce
    var animationView = AnimationView()
    @Binding var playing: Bool

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        animationView.tag = tag
        animationView.animation = Animation.named(name)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode

        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: UIViewRepresentableContext<LottieView>) {
        if playing {
            (uiView.viewWithTag(tag) as! AnimationView).play()
        } else {
            (uiView.viewWithTag(tag) as! AnimationView).stop()
        }
    }
}

사용법은 다음과 같은 느낌. 로딩 뷰와 같은 컴퍼넌트라고 표시중은 항상 재생을 하고 싶으므로, loopMode 에는 .loop 를, playing 에는 .constant(true) 를 건네준다. name 에 애니메이션 JSON 파일의 이름을 전달합니다.

struct LoadingView: View {
    var body: some View {
        LottieView(name: "loading", loopMode: .loop, playing: .constant(true)).frame(width: 250, height: 250)
    }
}

struct SomeView: View {
    @State var loading: Bool

    var body: some View {        
        ZStack {
            // メインのビュー
            Text("Contents")

            // loadingがtrueの時のみLoadingViewを表示
            if loading {
                LoadingView()
            }
        }
    }
}

한편, 사용자의 상호 작용에 따라 재생 상태를 변경하고자하는 경우는 다음과 같다.

struct PlayerView: View {
    @Binding var playing: Bool

    var body: some View {
        LottieView(name: "player", loopMode: .loop, playing: playing).frame(width: 250, height: 250)
    }
}

struct SomeView: View {
    @State var playing: Bool

    var buttonImage: String {
        playing ? "ic_playing" : "ic_play"
    }

    var body: some View {        
        ZStack {
            PlayerView(playing: $playing)
            Button(action: { playing.toggle() }) {
                Image(buttonImage)
            }
        }
    }
}

요약

Lottie가 있으면 애니메이션 주위는 엔지니어로서는 즐길 수 있기 때문에 매우 편리한 툴. SwiftUI에서도 도입할 수 있어 매우 좋다.