DevGoogry

애니메이션 효과는 앱의 품질을 높여주는 역할을 하며 사용자에게 더 좋은 UI/UX를 제공합니다. 

(출처: https://github.com/airbnb/lottie-android)

그렇다면 이제 Lottie에 대해 알아보고 사용법에 대해 알아보자.

Lottie란?

Lottie는 Airbnb에서 만들었고 실시간으로 After Effect 애니메이션을 랜더링하고 iOS, Android, React Native에서 동작하는 고품질 애니메이션 라이브러리입니다.

그럼 After Effect에서 만든 파일은 .aep나 .aepx인데 이것을 안드로이드에서 바로 가져다가 쓸 수 있나?

아니요. 바로 가져다가 쓸 수 없습니다.

그래서 Bodymovin이라는 After Effect Plugin을 설치해서 안드로이드에서 사용할 수 있는 파일로 변환 해 줘야합니다.

Bodymovin을 사용하면 애니메이션을 JSON 데이터 포맷으로 추출 할 수 있고 이것을 가져다가 안드로이드에서 보여주면 됩니다.

그럼 이제 안드로이드에서 Lottie를 추가하고 사용하는 법에 대해 알아보자.

app Module build.gradle파일에 dependency을 추가해줍니다.

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

그리고 project sync를 하면 lottie 라이브러리가 추가 된 것을 확인 할 수 있습니다.

layout에 LottieAnimationView를 추가합니다.

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

lottie_fileName은 After Effect에서 만든 애니메이션의 json파일 이름이 들어가야 합니다.

그리고 json파일은 assets폴더 안에 넣어줍니다.

lottie_autoPlay는 엑티비티가 실행되고 layout이 화면에 보여질때 자동으로 애니메이션을 시작하는 것이고

lottie_loop는 애니메이션이 끝나고 반복적으로 다시 실행 할지 결정하는 것입니다.

또한 autoPlay, fileName, loop와 같은 속성은 자바 코드로도 사용 할 수 있습니다.

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

그럼 결과는 아래와 같습니다.

LottieAnimationView에는 setProgress()를 사용해서 애니메이션의 offset을 바꾸거나 속도를 조절할 수 있습니다.

예제 샘플은 https://github.com/sjjeong/GoogryLottieSample 에서 확인 하실 수 있습니다.

예제에서 사용한 Lottie파일은 https://www.lottiefiles.com/ 에서 다운 받으실 수 있습니다.

추가로 애니메이션이 완료 된 후에 화면에서 사라지게 하고 싶으시다면 아래 코드를 확인해주세요.

final LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.lav_loading);
animationView.addAnimatorListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        animationView.setVisibility(View.GONE);
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        
    }
});