Lottie 톺아보기

Eddy📱·2022년 8월 20일
0

Library

목록 보기
2/2
post-thumbnail

Lottie는 에어비앤비에서 만든 라이브러리로 iOS, 안드로이드, 웹에서 vector 기반의 애니메이션을 만드는 것을 말한다.

Lottie는 JSON 포맷으로 모션을 만들어서 벡터와 애니메이션을 만들고 올리는 것을 말한다.

요번에 적용할 귀여운 애니메이션을 아래와 같다.

그래서 매우 간단하게 적용해서 사용할 수 있는데 그러기 위해서는 이 라이브러리를 먼저 설치해야한다.

SPM, cocoapods, 카르타스 등 여러 방법이 있지만 가장 쉽게 SPM으로 만들도록 하겠다.

SPM에서 File - Add packages에 들어가서 이 링크를 넣으면 된다.

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

이렇게 나올 것이고 이것을 추가해주면 된다!

이제 프로젝트에서 import 할 수 있다면 설치 완료!

import Lottie

이제 실제로 실행하게 위해서는 Lottie json 파일이 필요하다.

https://lottiefiles.com/featured

이 사이트에 많은 Lottie가 있어서 다운로드 받아서 사용하면 된다.

여기에서 JSON 파일로 다운 받을 수 있는게 있어서 이를 받아서 하면 된다.

JSON를 열어보면 이렇게 몬가 신기한 것을 볼 수 있다.

방향같은걸 정해주는건지.. 해독불가능..!

이제 그 파일을 Asset에 넣은 다음 사용하면 된다

이제 ViewController에서 이렇게 넣어주면 화면에서 보여진다!!!

let lottieView: AnimationView = .init(name: "115832-wait-i-am-loading")
self.view.addSubview(lottieView)

lottieView.frame = self.view.bounds
lottieView.center = self.view.center
lottieView.contentMode = .scaleAspectFit

하지만 이는 애니메이션이라 아니라 멈춘 상태에서 보여줄 것이다.

왜냐하면 애니메이션을 직접 Play하지 않았기 떄문이다.

이제 Play할 수 있는 방법 여러 개를 소개해줄 것이다.

// 일반적인 시작 메서드
lottieView.play()
// 10번쨰 Frame부터 30번째 Frame까지만 play하겠다
lottieView.play(fromFrame: 10, toFrame: 30, loopMode: .playOnce)
// progress 비율로 정할 수도 있다.
lottieView.play(fromProgress: 0.4, toProgress: 0.8)

그런데 여기 보면 Frame이 몇개인지 어떻게 알 수 있을까?

lottieView.animation?.endFrame

이것을 활용해서 현재 lottieView의 프레임이 몇개인지 파악할 수 있다.

여기에서 왜 프레임이 중요하냐면 영상은 사실 프레임의 연속으로 이루어져있다.

하나의 사진들이 모여서 영상이 되는 것이기 떄문에 하나하나하를 프레임이라고 본다.

그래서 이 프레임의 개수를 파악해서 위에서 원하는 Frame의 위치만 실행해줄 수 있다.

또한 실행하는 방법도 다양하게 설정해줄 수 있다.
한번 실행, 무한반복, 거꾸로 실행을 해줄 수 있다

// 3번만큼 실행 후 종료
lottieView.loopMode = .repeat(3)
// 한번 실행
lottieView.loopMode = .playOnce
// 무한으로 실행
lottieView.loopMode = .loop
// 애니메이션 실행 후 거꾸로 다시 실행(1번)
lottieView.loopMode = .repeatBackwards(1)
// 애니메이션 실행 후 거꾸로 다시 실행(무한 반복)
lottieView.loopMode = .autoReverse

그리고 마지막으로 속도를 2배속이나 0.5배속으로 해줄 수 있다.

// 애니메이션 속도 2배속
lottieView.animationSpeed = 2

그리고 보통 GIF로 받을텐데 이를 Lottie인 json으로 변환하는 것이 필요하다.

그래서 GIF -> mp4 -> json 형태로 바꾸면 된다.

참고 사이트

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

profile
Make a better world

0개의 댓글