Library - Lottie 사용해보기

안녕하세요 BeePeach입니다 :)

오늘 공부해볼 내용은 Lottie입니다.

 

Lottie는 Vector기반의 애니메이션을 실시간으로 랜더링 해주는 오픈소스 라이브러리입니다.

iOS뿐만 아니라 Android, React Native등 다양한 곳에서 사용될 수 있습니다.

 

쉽게 말해서 Gif, 짤 같은 애니메이션이 적용된 화면을 쉽게 추가할 수 있게 해 주는 라이브러리입니다.

 

특이한 점은 Lottie file은 JSON형태로 되어있습니다.

한번 다운 받은 파일을 열어보겠습니다.

형식은 JSON이 맞는데 우리가 직접 보기에는 상당히 복잡하게 느껴지네요.

하지만 이렇게 JSON으로 되어있어서 크기가 작다는 장점이 있다고 하네요.

 

 

---

 

준비물

 

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

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

 

https://lottiefiles.com/featured

Featured animations from our community

이 사이트에가서 원하는 lottie file을 다운받아주시면 됩니다.

 

그리고 라이브러리 추가는 pod이나 swiftPackageManager등 원하시는 거로 해주시면 됩니다.

 

 

---

 

사용해보기

 

다운 받은 lottie file을  프로젝트에 추가시켜줍니다.

 

 

코드로 추가할 수 있지만 이번에는 storyboard를 이용해보겠습니다.

Autolayout은 원하시는 대로 추가해주세요.

 

그리고 애니메이션을 보여줄 UIView를 추가시켜줍니다.

여기에 애니메이션이 나타날겁니다.

 

 

그리고 꼭 Class를 AnimationView로 변경해주어야 합니다.

그다음 attribute inspector에 가서 Animation Name에 아까 추가한 lottie file의 이름을 적어줍니다.

 

 

이제 AnimationView를 outlet으로 연결해주면 준비 끝입니다.

정말 쉽죠?

 

---

 

play

 

Animation을 시작할 때는 AnimationView의 play(completion:) 메서드를 호출해줍니다.

이러면 끝입니다.

정말 쉽죠??

 

play(completion:) 메서드의 파라미터는 기본값이 nil이기 때문에 생략이 가능했습니다.

만약 애니메이션 이후에 실행될 코드를 작성해주고 싶다면 파라미터에 전달해주면 됩니다.

 

 

play(completion:)을 호출하면 애니메이션이 한 번만 적용됩니다.

한 번의 실행으로 여러 번 반복하고 싶다면 loopMode를 이용합니다.

 

 

 

 

loop

한 번만 재생되고 끝나는 게 아니라 여러 번 재생하거나 재생 후 역재생을 하고 싶으면 loopMode를 설정해주면 됩니다.

기본값이 playOnce이기 때문에 한 번만 실행된 것입니다.

 

직접 설정해보시면서 어떤 차이가 있는지 확인해보세요!

 

 

 

 

pause, stop

중간에 애니메이션을 멈추거나 취소하고 싶다면 pause(), stop() 메서드를 이용하면 됩니다.

Pause후에 다시 play를 하게 되면 멈춰진 부분부터 그대로 이어서 애니메이션이 실행됩니다.

Stop은 애니메이션이 끝나므로 다시 play를 하면 처음부터 시작하게 됩니다.

 

 

 

 

 

 

Progress

play() 메서드는 다른 overloading 메서드들도 제공합니다.

play(fromProgress:toProgress:) 메서드를 이용해서 원하는 부분만 재생할 수 있습니다.

0.0 ~ 1.0까지 진행상황으로 원하는 부분만 재생할 수 있습니다.

이렇게 0.5부터 1.0으로 설정하면 중간부터 마지막까지 실행되게 됩니다.

 

 

 

 

 

 

Frame

애니메이션은 프레임으로 구성되어있죠???

프레임 단위로 원하는 부분을 재생시킬 수도 있습니다.

 

만약 lottieFile의 frame을 몰라도 괜찮습니다.

AnimationView의 animation 프로퍼티를 이용해서 알아낼 수 있습니다.

 

저는 확인해보니 마지막 프레임이 125였습니다.

그래서 100 프레임부터 125 프레임까지 실행하니 마지막 부분만 실행되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

Properties

이외에도 여러 가지 프로퍼티와 다른 메서드가 존재합니다.

궁금하시면 아래 링크로 가셔서 확인해보시면 됩니다.

 

 

---

 

참고자료

 

https://airbnb.io/lottie/#/ios?id=quick-start 

Lottie Docs