SwiftUI에서 Lottie 사용하기

UIViewRepresentable를 구현해봅시다

Lottie처럼 기존에 UIKit에서 사용했던 뷰를 Swift UI에서 사용하기 위해서는 UIViewRepresentable 가 필요합니다. UIViewRepresentable를 구현하는 과정은 크게 4가지로 이루어져 있습니다.

1. UIViewRepresentable를 상속하는 구조체 만들기
2. 전달받을 데이터 구성하기
3. 뷰가 맨 처음 생성될 때의 뷰를 정의하기 = makeUIView
4. 2번의 데이터가 변경될 때마다 호출될 코드 구현하기 = updateUIView
5. 제약(Constraints) 구현해주기 = makeCoordinator(생략 가능)

UIViewRepresentable 구현예시

반복하는 애니메이션 구현하기

이제 비슷한 방법으로 Lottie에 적용해보겠습니다. 적용하기에앞서 Lottie를 패키지매니저로 가져오는 부분과 Lottie 파일을 프로젝트에 추가해주세요.

동적으로 애니메이션 변경하기

이제 하단 hello_world 버튼을 클릭하면 동적으로 애니메이션이 변경됩니다.

버튼을 클릭할때마다 애니메이션 증가시키기

hello_world버튼을 누를때마다 progress가 증가합니다.

마치며

최근에 Lottie팀과 Adobe Animation팀이 함께 작업하고 있다고 합니다. Adobe Animation은 Adobe Flash 이후 HTML 버전으로 마이그레이션 된 버전으로 이전 플래시 애니메이션들도 Lottie로 구동할 수 있을지 기대가 됩니다.