[Android] Lottie 사용하기

Lottie

Lottie 라이브러리는 Airbnb에서 만든 애니메이션 오픈소스 라이브러리입니다.

Lottie를 사용하면 JSON 파일 형식으로 데이터를 불러와 간편하게 애니메이션을 표현할 수 있습니다.

Lottie

 

GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native

 

Lottie Animation 구현하기

1. build.gradle에 의존성 추가

Lottie를 사용하기 위해서 build.gradle에 Lottie 라이브러리를 추가합니다.

implementation "com.airbnb.android:lottie:6.1.0"

 

2. 원하는 Lottie 파일 다운로드

아래의 LottieFiles에서 원하는 애니메이션을 선택한 후, JSON 파일로 다운받습니다.

다운로드를 마쳤다면, raw 리소스 디렉터리를 생성하여 해당 위치에 다운받은 JSON 파일을 넣습니다.

LottieFiles: Download Free lightweight animations for website & apps.

 

3. xml에 LottieAnimationView 추가하기

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/my_lottie" />

• app:lottie_autoPlay : 애니메이션을 자동으로 재생할지 설정 (true / false)
• app:lottie_loop : 애니메이션을 반복 재생할지 설정 (true / false)
• app:lottie_repeatCount : 애니메이션이 반복 재생될 횟수를 지정
• app:lottie_rawRes : raw 리소스 디렉터리에 있는 JSON 파일을 통해 애니메이션 불러오기
• app:lottie_url : 해당 URL을 통해 애니메이션 불러오기

 

4. 실제로 실행

playAnimation() 메서드를 통해 애니메이션을 재생할 수 있습니다.

binding.lottieAnimationView.playAnimation();

이벤트 리스너를 통해 애니메이션을 조작할 수도 있습니다.

binding.lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) { }

    override fun onAnimationEnd(animation: Animator) { }

    override fun onAnimationCancel(animation: Animator) { }

    override fun onAnimationRepeat(animation: Animator) { }
})