[iOS] Lottie

 

Lottie?

Airbnb에서 개발한 Lottie는 모든 기본 앱에서 After Effects 애니메이션을 렌더링 하는 iOS, macOS, Android 및 React Native 라이브러리입니다.

 

쉽게 말해서, 아래와 같이 Json 형태로 변환된 일명 움짤이라고 불리는 .gif 파일이나 짧은 일러스트 동영상을 imageView에 뿌려주는 편리하고 자주쓰는 플렛폼입니다.

 

 

어렵지 않으니 위와 같이 만들어봅시다! :D

 

 

참고 사이트

Airbnb - Lottie

Airbnb - lottie_guide

---

 

일단 터미널에서 프로젝트 위치로 이동한 후, 아래 명령어로 pod 파일을 만들어줍니다.

pod init

 

podfile을 열고 아래 pod를 추가해줍니다.

 

 

pod 'lottie-ios'

 

 

이제 터미널로 돌아가서 podfile을 다운받아줍시다!

pod install

 

그럼 workspace 파일이 생겨있을꺼에요!

 

 

이 파일을 열고 들어가줍니다.

 

 

애니메이션 JSON 파일 추가

현업에서는 디자이너가 작업을 해주기도하고 lottie 파일 닷컴과 같은 사이트에서 무료로 다운 받아서 사용합니다.

무료 애니메이션 JSON 파일은 LottieFiles 홈페이지에 있습니다 :D

 

 

저는 귀여워서 이 애니메이션을 선택했어요!!ㅎㅎㅎ

혹시 똑같은 애니메이션을 사용하고싶다면 여기로!

 

 

드래그엔 드롭해서 프로젝트 내부에 넣어놓습니다!

코드 안은 이렇게 생겼어요! 복잡하죠??

 

구성하기

 

 

animation을 보여주기 위해 view를 추가해줍니다.

 

 

layout을 가로 세로 정중앙, 400*500으로 잡아주었습니다!

 

 

추가해준 view의 inspector에서

Class - animationView

Module - Lottie로 설정해줍니다!

이제 코드짜러 가봅시다 @@

 

---

 

먼저 Lottie 라이브러리를 상단에 import 해줍니다.

 

 

짠 위에는 구현 코드입니다!

아주 짧고 쉽죠????

AnimationView 를 이용하면 JSON 파일을 애니메이션 데이터로 로드할 수 있습니다.

프레임크기나 컨텐츠 모드, 반복 방법을 정의해주고 play() 메서드를 호출하여 애니메이션을 시작해줍니다.

 

 

변형하기

 

 

이렇게 애니메이션을 시계 방향으로 45도 회전하는 샘플 변환을 해보겠습니당 ㅎㅎ

 

 

transform 메소드를 사용하여 설정하면 애니메이션을 회전, 크기 조정 및 재배치할 수도 있습니다!!

 

---

Lottie는 사용하기도 쉽고 여러가지로 변형해서 사용 할 수 있어서 좋은 것 같아요 ㅎㅎ

저도 앱 출시할때 한번 꼭 넣어보려구요!!

 

코드를 참고하고 싶으신 분은 GitHub 참고해주세요:D