유용한 에니메이션 라이브러리 - Lottie

300x250

300x250

Android app 을 개발 하다 보면 '프로그램이 돌아간다' or '진행중' 같은 상황을 유저에게 설명해야 할 때가 종종 있다.

가장 많이 사용하는 방식으로 progress bar 로 진행 상황을 나타낼 수 있지만, 이런 전통적인 방식은 사용자를 지루하게 만들 수 있다.

 

좋은 사용자 경험을 위해 모바일 앱에서 Lottie 를 사용한다면 하단과 같은 멋진 진행률 표시를 만들 수 있다.

이번 포스팅에서는 Lottie animation library 에 대해 알아보자.

 

[출처 : https://github.com/airbnb/lottie-android]

Lottie?

Lottie 는 Airbnb 에서 공개한 Android, iOS, Web 에서 사용 가능한 에니메이션 라이브러리다.

Adobe After Effects 에서 작업한 애니메이션을 Bodymovin 이라는 플러그인을 사용하여, 영상 파일 대신 json 이라는 데이터 파일을 생성하도록 지원한다.

 

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

Animation download

하단 site 에 접속하여 원하는 animation 을 download 하자.

(https://lottiefiles.com)

 

이번 포스팅에 사용할 sample (https://lottiefiles.com/75212-cat-loader)

Dependency 추가

하단과 같이 app gradle file 에 추가한다.

 

Json file project 에 적용하기

◼ XML 파일에 적용 (raw)

 

 

◼ XML 파일에 적용 (assets)

 

Lottie 실행하기

XML 의 lottie id 를 직접 조작해도 되지만 이번 포스팅에서는 progress bar 의 layout 으로 사용할 것이다.

 

◼ MainActivity

 

◼ Progress layout

Source code

https://github.com/parkho79/Lottie