Blender animation을 SwiftUI에서 사용하기 with Lottie

[Yeggggi]

Blender animation을 SwiftUI에서 사용하기 with Lottie

NC2에서 blender로 splash 등의 animation을 만들어서 Lottie로 SwiftUI에서 써줬는데, 요즘 Blender를 하는 사람들이 많아서 도움이 될까해서 공유해봅니다! Lottie는 json 기반의 파일입니다. json으로 변환하여 lottie로 적용했을 때의 장점은 용량이 작고 어떤 기기에서나 작동하고, 크기를 자유롭게 조정해도 해상도가 낮아지지 않습니다.

1. lottie 패키지 추가
2. animation 변환
3. 예제 코드

---

1. lottie 패키지 추가
   lottie package를 추가하는 것 부터 해보겠습니다.

Xcode에서 Project > Package Dependencies에서 Packages +를 눌러줍니다.
검색창에 github.com/airbnb/lottie-ios 를 입력해주면 아래의 lottie-ios 패키지가 나옵니다.
Add Package를 해줍니다

그러면 아래처럼 lottie-ios 4.4.3이 추가된 것을 볼 수 있습니다. (작성일 2024.07.08 기준 최신 버전)

2. animation 파일 형식 변환
이제 Lottie에서 blender 영상을 사용하려면 Blender에서 랜더링한 animation을 json 형태로 만들어주어야합니다.

먼저 사용하고싶은 blender animation 파일을 avi 파일 형식으로 랜더링해서 다운로드 받습니다.

avi to Mp4로 변환한 후 mp4 to json 으로 변환합니다.

그 후 json으로 변환한 blender animation 파일을 사용하고싶은 프로젝트에 넣어줍니다.
저는 splash를 넣어주었습니다.

3. 간단한 예제 코드
   SwiftUI에서 Lottie를 쓰는 법을 검색하면 Extension으로 짜여져있는게 많이 나오는데 이전에는 Extension을 만들어서 썼다면
   23년 9월부터 airbnb에서 저렇게 따로 안짜도되도록 내장해서 지원해줍니다!
   그래서 Lottie를 import 하고 아래처럼 바로 LottieView로 사용해주시면 됩니다

   import Lottie
   
   LottieView(animation: .named("splash"))
             .animationSpeed(0.5)
             .playing()
             .frame(width: 600, height: 700)
             .padding(.bottom, 60)
   

필요하다면 이것저것 영상을 잠시 멈추거나 속도 등을 조정하여 사용할 수 있습니다.

[hhajime]

좋은 정보 감사합니다 :)

[yeniful]

좋은 정보 공유해주셔서 감사드려요 🤩