2024-11-10 LottieAnimationView

안드로이드 애니메이션 효과에 대해서 좀 찾아보다가

굉장히 유용해보이는 라이브러리를 발견해 간단히 포스팅 해보려한다.

 

기존에 사용해봤던 애니메이션 효과로는

XML 파일을 만들어서 효과를 View에 적용하는 방식을 사용했었다.

 

Scale,Lotate,Translate,Alpha 등 여러 속성들을 사용하여

View에 애니메이션 효과를 적용할 수 있었다.

 

Airbnb에서 제공하는 Lottie 라이브러리를 사용하면

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

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

 

 

JSON 기반의 애니메이션 파일

 

 

 

아래 사이트에서 다양한 Lottie 파일을 무료로 다운로드 할 수 있다.

Featured Free Lottie Animations - Curated Motion Designs

 

예제

 

의존성 추가를 먼저 해준다.

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

 

 

위 사이트에서 다운 받은 JSON 파일을 res 폴더 > raw 폴더를 만들고 JSON 파일을 추가해준다

 

 

레이아웃 파일에 LottieAnimationView를 추가해준다.

    <!-- Lottie 라이브러리 이용한 애니메이션효과 적용-->
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimationViewWeather"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/animation_rain"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textViewLocation"
        app:layout_constraintBottom_toTopOf="@id/textViewTemperature"
        app:lottie_repeatCount="3"/>

 

lottie_autoPlay = 바로실행 여부

lottie_loop = 반복재생 여부

lottie_rawRes = 파일 위치

lottie_repeatCount = 최초 실행 후 반복 횟수

 

 

AnimatorListener을 추가해줘서 애니메이션의 시점마다 코드를 작성할 수 있다.

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

            override fun onAnimationEnd(animation: Animator) {
                // 애니메이션 끝날 때
            }

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

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

 

 

실행결과

실행 결과

 

 

 

이런 라이브러리를 사용하면 다양한 앱에 적용할 수 있을것 같고

시점마다 코드를 작성할 수 있는 리스너를 제공해주는것도 굉장히 편한것 같다.