[안드로이드] Lottie 애니메이션 사용하기

어플리케이션과 사용자와의 상호작용에서 앱을 더 생동감 넘치게(?) 표현하는 방법에서 Airbnb에서 제공하는 Lottie 라이브러리가 있습니다.

Lottie Animation

저는 최근 배달의 민족이나 은행앱 로딩에서 위와 같은 효과를 자주 본 것 같아요.

 

Lottie는 JSON 기반의 애니메이션 파일을 실시간으로 렌더링하는 벡터 애니메이션입니다.

벡터 기반이라 용량이 작고, 오픈소스 라이브러리로 별도의 변환이 필요 없어 편리하게 사용할 수 있다는 장점이 있습니다.

 

아래의 사이트에서 매우 많은 Lottie 파일을 무료로 제공하니 다운받아 사용합니다.

Featured animations from our community

 

---

1. 의존성 추가

app수준 build.gradle에 의존성을 추가합니다.

implementation 'com.airbnb.android:lottie:5.0.2'

2. raw 폴더 생성 및 Lottie 파일 추가

위 사이트에서 다운받은 JSON 형태의 Lottie 파일을 res → raw 폴더를 생성한 후 추가합니다.

res → New → Folder → Raw Resources Folder

3. xml 파일에 LottieAnimationView 추가

xml에 Lottie 애니메이션을 담을 뷰를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lotti"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"    // 바로실행 여부
        app:lottie_loop="true"    // 반복재생 여부
        app:lottie_rawRes="@raw/test_lotti"    // 파일 위치
        app:lottie_repeatCount="2" />    // 최초 실행 후 반복 횟수 
    
</androidx.constraintlayout.widget.ConstraintLayout>

끝입니다. 정말 간단하죠??

 

애니메이션의 동작을 더 구체적으로 다루고 싶다면 리스너를 사용할 수 있습니다.

binding.lotti.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) {
        // 애니메이션이 시작될 때
    }

    override fun onAnimationEnd(animation: Animator) {
        // 애니메이션이 종료될 때
        binding.lotti.visibility = View.GONE
    }

    override fun onAnimationCancel(animation: Animator) {
        // 애니메이션이 취소될 때
    }

    override fun onAnimationRepeat(animation: Animator) {
        // 애니메이션이 시작된 이후 반복될 때
    }
})

애니메이션이 종료될 때 뷰가 사라지도록 작성했고, 애니메이션이 총 3회 반복되도록 작성했으니 애니메이션 3회 반복 후 종료되면 사라져야겠죠?

 

실행결과입니다.