[SwiftUI][Lottie] Lottie for SwiftUI

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

Lottie 4.3.0 now available, with official support for SwiftUI · airbnb/lottie-ios · Discussion #2189

 

Lottie가 SwiftUI 대응을 해줬다.

원래 스유에서 사용하려면 UIViewRepresentable로 한번 감싸주어야 했는데 이제 라이브러리에서 래핑을 해주므로 우린 그걸 쓰면 되겠다.

기존 Lottie 사용하는 방법을 알고 있다고 가정하고 넘어간다.

기본적인 사용법은 다음과 같다.

LottieView(animation: .named("StarAnimation"))

StarAnimation이 로컬에 있을 때 이렇게만 해주면 사용 준비를 완료한 것이다.

// Play the animation once, from the start to the end
LottieView(animation: .named("StarAnimation")) 
  .playing()
  
// Loop the animation from the start to the end
LottieView(animation: .named("StarAnimation")) 
  .looping()
  
// Display the animation paused at the half way mark
LottieView(animation: .named("StarAnimation")) 
  .currentProgress(0.5)

playing이나 looping 등을 붙여서 사용할 수 있다.

 

나는 여러가지 애니메이션을 계속 무한 반복하는 것을 구현하고 싶었기 때문에 다음과 같이 래핑 struct를 하나 만들었다.

public struct LottieViewEntry: View {
    public let lottie: LottieAnimationType
    public let loopMode: LottieLoopMode
    public let speed: CGFloat
    public enum LottieAnimationType: String {
        case congratulations
        internal var filename: String {
            switch self {
            case .congratulations:
                "Congratulations"
            }
        }
    }
    public init(_ lottie: LottieAnimationType, loopMode: LottieLoopMode = .loop, speed: CGFloat = 1.0) {
        self.lottie = lottie
        self.loopMode = loopMode
        self.speed = speed
    }
    public var body: some View {
        LottieView(animation: .named(lottie.filename, bundle: .module))
            .configure({ lottieView in
                lottieView.animationSpeed = speed
                lottieView.loopMode = loopMode
            })
            .playing()
    }
}

#Preview {
    LottieViewEntry(.congratulations, loopMode: .loop, speed: 1.0)
}

Tuist으로 모듈화하여 작업 중이고, 현재 모듈의 Resources 폴더 안에 Congratulations.json 파일이 있고, 프리뷰는 다음과 같다.