[Android] 초간단 Lottie 라이브러리 사용해보기

역동적인 UI 지원을 할 수 있는 Lottie 라이브러리(2017년 2월에 airbnb에서 출시)에 대해서 초간단히 알아보자.

Android Source 예제 : http://airbnb.io/lottie/android/android.html

Lottie Json 샘플 : https://www.lottiefiles.com/

Lottie는 안드로이드(ICS/API14부터), iOS, 리액트 네이티브, 웹까지 다양한 플랫폼을 지원한다.

다 알아본 것 같다. 이제 돌려보자.

0. 준비물 : Lottie Json 샘플, 잠시나마 집중하겠다는 마음가짐.

Lottie Json 샘플은 Lottie Files 에서 마음에 드는 것을 선택하도록 한다.

원래는 주로 디자이너들이 쓸 것으로 보이는 After Effect 의 출력물인 .aep 파일을 After Effect의 플러그인인 

BodyMovin 을 통해서 json 파일을 뽑아낼 수 있다고 한다. (참조)

하지만 After Effect가 뭔지도 모르는 입장인지라 Lottie Files 에서 샘플을 받아 진행하기로 한다.

1. 샘플 json 파일을 assets 폴더에 넣어준다.

1. build.gradle 에 dependencies에 lottie를 추가한다.

dependencies {
    compile 'com.airbnb.android:lottie:2.3.0'
    ...
}

2. 사용할 xml에 LottieAnimationView를 추가한다.  이 때 json 경로를 넣어도 된다.

    <com.airbnb.lottie.LottieAnimationView
        android:id="@ id/animation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="penguin.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

3. LottieAnimationView에 json 설정 후 동작시킨다. 이 때 Listener를 달아 Animation 이벤트 처리도 가능하다.

        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
        animationView.setAnimation("rejection.json");
        animationView.loop(true);
        animationView.playAnimation();

생각보다 간단하게 Lottie 를 시식코너 마냥 맛만 볼 수 있었다.