[Android] Lottie 애니메이션

Lottie 애니메이션

Lottie는 AirBnb 개발자 분들이 만든 오픈소스 라이브러리 입니다.
보다 높은 퀄리티의 애니메이션 효과를 네이티브 앱에 적용시키는데 도움을 줍니다.

After Effects를 사용한 애니메이션 파일
-After Effects툴을 이용해 json형식의 애니메이션 파일을 만들면 네이티브 앱에 적용시킬 수 있습니다.
이를 위한 도구가 바로 BodyMobin입니다.
개발자 분과 함께 더욱 멋진 애니메이션 앱을 만들기 위해서 UI/UX디자이너 분들은 After Effects를
공부해 보고 적용해 보는것도 좋을 것 같습니다.

앱에 Lottie 적용해 보기

Lottie는 Android, IOS, React Native App, Web모두 호환이 가능합니다.

1.Sample파일 받기
Lottie에 적용할 수 있는 파일은 After Effects로 만든 json파일입니다.
예제파일은 무료로 다운받아서 사용하시면 됩니다.(https://lottiefiles.com/) 

LottieFiles - Download Free Lottie Animations, Integrations & Plugins

 

다운받은 파일은 app - main->assets폴더에 넣는다.


2.App단계의 build.gradle에 lottie를 적용해 줍니다.
implementation 'com.airbnb.android:lottie:1.5.3'


3.Xml에 LottieAnimationView를 만들어 줍니다.

<com.airbnb.lottie.LottieAnimationView
       android:id="@+id/animationView"
       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" />

4. Activity에서 파일을 불러와 실행해 줍니다.

animationView.setAnimation("a_simple_sun_day.json")
        animationView.loop(true)
        animationView.playAnimation()
        animationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
            }

            override fun onAnimationEnd(animation: Animator) {
            }

            override fun onAnimationCancel(animation: Animator) {
            }

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

예제)xml

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            app:layout_constraintTop_toBottomOf="@+id/tvLogin"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"
            app:lottie_url="https://assets1.lottiefiles.com/packages/lf20_xss1pow3.json" />

예제)소스

animationView.apply {
                setAnimation("test.json")
                playAnimation()
                addAnimatorListener(object: Animator.AnimatorListener{
                    override fun onAnimationStart(animation: Animator?) {
                        LogUtil.e("JHTEST", "start Ani")

                    }

                    override fun onAnimationEnd(animation: Animator?) {
                        LogUtil.e("JHTEST", "end Ani")
                    }

                    override fun onAnimationCancel(animation: Animator?) {
                        LogUtil.e("JHTEST", "cancel Ani")
                    }

                    override fun onAnimationRepeat(animation: Animator?) {
                        LogUtil.e("JHTEST", "repeat Ani")
                    }
                })
            }

 

 

 

참조 :

https://black-jin0427.tistory.com/97?category=727620

[Android, Lottie] Lottie 를 사용한 애니메이션 효과