Lottie 라이브러리 활용한 안드로이드 Lottie 애니메이션 적용하기 ! 로딩화면 구현 , 버튼 눌렀을때 애니메이션

안녕하세요! 오늘은 Lottie 라이브러리에 대해서 공부하고 한번 적용해보았습니다 

 

저는 Lottie 라이브러리를 이용해서 로딩화면 과 버튼을 눌렀을때 애니메이션이 나오도록 코드 작성을 했습니다 

 

Lottie 란 무엇인가? 

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

Lottie 라이브러리를 굳이 쓰지 않더라도 gif 파일로도 저런 에니메이션을 구현할 수 있습니다 

그러나 

위에 그림처럼 Lottie 라이브러리를 이용하는 것이 단순히 GIF 보다 훨씬 이득이다 라는것을  알 수 있습니다 ! 

 

lottiefiles.com/featured 

Featured animations from our community

해당 링크에 들어가면 무료로 애니메이션을 다운 받으실 수 있습니다 이때 다운 받는 파일 형식은 무조건 JSON 으로 받으셔야합니다!!!

 

그리고 Lottie 라이브러리를 이용하기 위해서 dependency 를 추가해야합니다 

 

dependencies {
    implementation 'com.airbnb.android:lottie:3.7.0'
    }

그리고 앞서 알려준 링크에서 JSON 파일을 다운받았다면 res 폴더 하위에 raw 를 만들고 raw안에 JSON 파일을 넣어주면 됩니다 !

여기서 하나 중요한 점은 raw안에 JSON 파일의 이름 형식은 숫자로 시작하면 안되고 대문자와 - 는 있으면 안됩니다 

아마 다운 받은 JSON 파일의 이름은 앞에 숫자로 시작하면서 - 가 있습니다 

그래서 파일 이름을 수정해야합니다 !

ex) 0312-phone 이라면 ->  phone.json 으로 수정!!

 

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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/jumpingpartners"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

activity_main.xml 은 로딩화면을 담당하는 부분입니다 !  

에니메이션이 나오는 부분은 LottieAnimationView 로 만들어주고

rawRes = "@raw/"원하는 json이름" 으로 하면 원하는 에니메이션 이 나옵니다 

autoPlay 는 해당 뷰가 실행하면 자동으로 실행하는 것을 의미 하고 loop는 반복하는 것을 의미합니다 ! 

 

MainActivity.kt

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

        startLoading()
    }
    private fun startLoading() {
        val handler = Handler()
        handler.postDelayed({
            var intent = Intent(this,nextActivity::class.java)
        startActivity(intent)
        }, 2500)


    }
}

 

저는 MainActivity 를 로딩화면으로 개발했습니다 

그래서 2.5초 딜레이 주고 nextActivity 로 넘어갑니다! 

 

여기까지가 Lottie 라이브러리를 활용한 로딩화면 구현입니다! 

 

버튼 클릭했을 때도 로딩 화면과 유사하지만 조금 다른점은 

 

nextActivity.kt

 

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

        var button  = findViewById<Button>(R.id.btn)
        var button2 = findViewById<Button>(R.id.btn2)
        button.setOnClickListener {
                var animation = findViewById<LottieAnimationView>(R.id.lottie_view)
            animation.setAnimation(R.raw.fireworksicon)
            animation.playAnimation()
        }

        button2.setOnClickListener {
            var animation = findViewById<LottieAnimationView>(R.id.lottie_view)
            animation.setAnimation(R.raw.heart)
            animation.playAnimation()
        }
    }
}

버튼 을 누르면 clickListener 안에 

 

animation 인스턴스를 만들고  playAnimation() 하면 애니메이션이 실행됩니다 ! 

여기서 setAnimation() 안에 자신이 원하는 애니메이션 을 넣으면 됩니다 ! 

 

설명은 간략하게 여기까지 하고 자세한 코드 는 밑에 링크 남기겠습니다 !! 

github.com/jaeilssss/lottieAnimation

jaeilssss/lottieAnimation