[SwiftUI] Lottie 로티 애니메이션 뷰 만들기

 Lottie Animation 

 

▼ 모바일 개발시 많이 사용되는 Lottie 애니메이션을 SwiftUI에서 구현하는 방법을 알아보겠습니다. 우선 새로운 패키지를 추가하기 위해서  로티를 사용하기 위해서 다음 주소를 복사합니다. (Swift Package를 사용하지 않고 CocoaPods을 사용해도 됩니다.)

https://github.com/airbnb/lottie-ios.git

 

 

 

▼ Xcode의 File -> Add Packages... 메뉴를 통해 새로운 패키지를 추가합니다.

Add Package

---

 

 

 

▼ 우측 상단에 검색창에 복사한 주소를 넣고 엔터를 치면 lottie-ios 패키지를 찾을 수 있습니다. 우측 하단에 Add Package 버튼을 눌러 패키지를 추가합니다.

lottie-ios

---

 

 

 

▼ 로티 애니메이션 이미지를 다운로드 받습니다. 해당 서비스는 로그인이 필요하며 다양한 애니매이션을 json 형태로 다운로드 할 수 있습니다.

https://accounts.lottiefiles.com/login?return_to=https://lottiefiles.com/getting-started 

https://accounts.lottiefiles.com/login?return_to=https%3A%2F%2Flottiefiles.com%2Fgetting-started

 

 

 

▼ 다음과 같은 UIViewRepresentable 을 상속 받은 LottieView.swift 를 생성합니다. 속성으로 filename을 가지고 있습니다. 이는 LottieView를 사용하는 화면에서 지정해줍니다.

 

 

 

 

 

 

▼ 이제 LottieView를 화면에 붙여보겠습니다. 사이즈는 가로 200 세로 200으로 VStack에 텍스트와 함께 보입니다.

 

 

 

 

 

 

 

 

Lottie