Lottie를 사용해 보자!

새로운 개인 프로젝트를 만들고 있는데 알고만 있고 사용해 보지 못한 Lottie를 한번 써보면 어떨까?! 라는 생각이 들어서 SplashActivity에 사용하기로 하였다.

 

Lottie

 

Lottie

 

엄청나게 유명한 안드로이드 애니메이션 라이브러리다!

정확하게는... 안드로이드 뿐만 아니라 iOS, Window, Web 도 지원해주는 아주 좋은 라이브러리다.

 

Lottie 안드로이드 github : https://github.com/airbnb/lottie-android

airbnb/lottie-android

 

설치법은 gradle 파일에 아래와 같이 설정해 주면 끝이다. 설치도 쉬움.

 

Lottie 설치 가이드

 

사용법

 

Lottie는 여러방법으로 애니메이션을 제작하는 것 같은데.. ( 잘 모름..ㄷㄷ ) 나는 그중에서 After Effect 를 이용한 애니메이션 실행 방법을 택했다.

 

이방법은 After Effect로 애니메이션을 만들고 그 파일을 json 형태로 저장 할 수 있는데, 이 json 파일을 안드로이드 Lottie로 해석하여 구현하는 방식이다.

 

아쉽게도 나는 After Effect를 사용해 제작할 수 있는 능력이 되지 않아서

( Lottie를 접하면서 After Effect를 배우고 싶다는 생각이 들었음. )

 

아래 링크를 통해 많은 분들이 올려준 애니메이션을 다운받아 사용하였다.

 

Lottie files 링크 : https://lottiefiles.com/

LottieFiles - Free animation files build for Lottie, Bodymovin

 

위 사이트를 들어가면 정말 많은 애니메이션이 있는데 취향에 맞는 것을 골라 다운 받으면 된다.

 

그다음 프로젝트 파일에 assets 라는 폴더를 만든다.

이때 경로는 app - src - main - assets 이다.

 

다운 받아서 아래와 같은 경로에 가져다 놓으면 된다. 그러면 1차 준비 끝

 

다운 받은 json 파일 경로

 

다음은 layout에 LottieAnimationView를 적용해야 한다.

 

<?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=".SplashActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/splash_animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

위에 설치법에서 gradle 설정을 정상적으로 해주었다면 LottieAnimationView를 적용하는데 큰 문제는 없을 것이다.

 

다음은 Activity 코딩을 해준다.

 

import android.animation.Animator
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import com.airbnb.lottie.LottieAnimationView

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        val animationView = findViewById<LottieAnimationView>(R.id.splash_animation_view)

        animationView.setAnimation("my_image.json")
        animationView.loop(true)
        animationView.playAnimation()
        animationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationRepeat(p0: Animator?) {
            }

            override fun onAnimationEnd(p0: Animator?) {
            }

            override fun onAnimationCancel(p0: Animator?) {
            }

            override fun onAnimationStart(p0: Animator?) {
            }
        })

        Handler().postDelayed({
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
        }, 5500)
    }
}

 

보면 animationView를 선언해 주고, setAnimation을 통해 가져온 json파일을 불러온다.

playAnimation()으로 실행 시키고, 상황에 따라서 이벤트 처리를 할 수 있게 Listener도 설정하였다.

 

추가로 현재 만드는 프로젝트는 MainActivity 데이터 로딩을 위한 시간 끌기 용으로 SplashActivity를 만든 것이 아니라, 단순한 안내를 위해 만든 것이기 때문에 별도의 ProgressBar나 데이터 로딩처리를 하지 않았다.

 

그래서 Handler를 이용한 5.5초 뒤에 MainActivity로 넘어갈 수 있도록 하였다.