[사카마카] Lottie로 애니메이션을 사용해보자.

투표 버튼을 눌렀을 때, 아무런 애니메이션이 없으니까 밋밋하다. (내가 누르는 건지 마는건지 ~)

 

Lottie

Lottie는 웹, iOS, Android, Windows 등 다양한 플랫폼에서 사용할 수 있는 애니메이션 라이브러리이다. JSON 형식의 파일을 이용해서 애니메이션을 렌더링한다. 

 

✅ 다양한 플랫폼 지원

✅ 코드로 제어 가능

 

✅ lottiefiles라는 홈페이지에서 무료로 애니메이션을 다운받아 사용할 수 있다.

https://lottiefiles.com

 

사용하기

1. 원하는 애니메이션 파일을 JSON으로 다운받은 후 프로젝트에 추가한다.

2. LottieAnimationView를 생성한다.

3. View에 추가한다.

 

✏️ 재생

animationView.play()

 

✏️ 루프 설정

// 1번 실행
animationView.loopMode = .playOnce

// 원하는 수 만큼 실행
animationView.lootMode = .repeat(5) // 5번 실행

// 무한으로 실행
animationView.lootMode = .loop

// 실행 후 원하는 수 만큼 거꾸로 실행
animationView.lootMode = .repeatBackwards(5) // 실행 후 5번 거꾸로 실행

// 실행 후 거꾸로 실행 (무한)
animationView.lootMode =. autoReverse

 

✏️ 속도 조정

// 0.5배속
animationView.animationSpeed = 0.5

// 2배속
animationView.animationSpeed = 2

 

더 많은 기능을 사용하고 싶다면 https://airbnb.io/lottie/#/ios 을 참고해서 사용하자.

 

적용하기

 

버튼의 Pop 이벤트 뿐만 아니라, 로딩 애니메이션, 화면 전환 애니메이션에도 사용하면 좋을 것 같다.