SwiftUI에서 Lottie Animation 적용

Lottie Animation이란?

Lottie Android, 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를 적용하는 방법을 소개했습니다.
매우 쉽고 재미 있기 때문에 꼭 사용해보십시오