안드로이드 Lottie 라이브러리

Lottie란?

 

에어비엔비에서 만든 After Effect 애니메이션을 랜더링하여 애니메이션으로 보여주는 라이브러리입니다.

 

https://airbnb.io/lottie/#/android

 

안드로이드 화면에서 움직이는 그림들을 보여주기 위해 사용합니다.

스플래쉬 스크린에서 움직이는 이미지를 보여줄 때나 로딩 화면을 만들 때 사용할 수 있습니다.

 

 

 

 

 

Lottie 이미지 다운로드 받기

 

https://lottiefiles.com/

LottieFiles - Free animation files built for Lottie

사람들이 만든 로티 이미지를 다운로드할 수 있는 사이트입니다.

 

 

 

 

원하는 사진을 선택하고 Lottie JSON으로 다운로드합니다.

 

 

 

 

안드로이드 스튜디오에서 Lottie 시작하기

 

 

Gradle Setting

 

모듈 build.gradle

buildscript {
    ...
    ext.lottieVersion = "3.4.1"
}

 

프로젝트 build.gradle

dependencies {
    ...
    implementation "com.airbnb.android:lottie:$lottieVersion"
}

 

gradle 세팅입니다.

 

 

 

Lottie 이미지 넣기

 

New > Folder > Raw Resources Folder 폴더를 생성하고 다운로드한 Lottie 이미지를 넣습니다.

 

 

 

 

 

Lottie 사용 방법

 

Lottie 라이브러리의 사용 방법은 간단합니다.

 

 

먼저 코드 상에서 반복과 애니메이션 시작을 설정하는 방법입니다.

// 반복
lottie_image.loop(true)

// 애니메이션 시작
lottie_image.playAnimation()

 

 

그리고 XML 상에서 반복과 애니메이션 시작을 설정하는 방법입니다.

// 반복
app:lottie_loop="true“

// 자동 시작
app:lottie_autoPlay="true“ 

 

 

 

XML 세팅하기

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >

    <com.airbnb.lottie.LottieAnimationView
        ...
        app:lottie_rawRes="@raw/heart" />

</androidx.constraintlayout.widget.ConstraintLayout>

기본적으로 Lottie 파일을 불러오는 방법입니다. 파일 형식으로 불러오는 방법이 있지만 여기서는 rawRes를 사용하여 불러왔습니다.

 

 

 

 

Lottie Library 스플래쉬 스크린으로 사용하는 간단한 예제

 

 

 

XML

 

// activity_main.xml

<?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/loading_image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_rawRes="@raw/loading"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:lottie_autoPlay="true"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

Kt

// MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 이미지 실행 코드
        //loading_image.playAnimation()

        // 반복재생
        //loading_image.loop(true)

        loading_image.addAnimatorUpdateListener {
            if (loading_image.isAnimating) {
                startActivity(Intent(this, MainActivity2::class.java))
            }
        }
    }
}

 

// MainActivity2.kt

class MainActivity2 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)
    }
}

 

addAnimatorUpdateListener을 통해 애니메이션이 끝나면 액티비티를 이동하는 예제입니다.

 

 

 

 

빌드를 하게 되면 애니메이션이 동작한 후 화면이 전환되는 것을 볼 수 있습니다.

 

 

예제 코드

 

https://github.com/Im-Tae/Blog_Example/tree/master/Android/LottieLibraryExample