[Kotlin][Android] 안드로이드 로티애니메이션(Lottie Animation) 활용하기

먼저 로티애니메이션이란 After Effect에서 제작한 Motion Graphic을 어플리케션에서 그대로 보여줄 수 있게 만든 라이브러리로써 OOM(OUT OF MEMORY)에 대해서도 신경을 많이 쓴 라이브러리 입니다.

 

로티 애니메이션을 사용하기에 앞서

모듈 gradle 파일에 dependency를 추가해주도록 합니다.

 

 

dependencies { 
... 
def lottieVersion = '사용할 버전'
implementation "com.airbnb.android:lottie:$lottieVersion"
... 
}

위와 같이 추가해주면 되며 글쓴이 같은 경우는 당시 최신버전을 활용하였습니다.

관련 정보는 http://airbnb.io/lottie/#/android?id=sample-app를 통해 확인이 가능합니다. 

Lottie Docs

위 사이트에서 documet를 보면 여러 사용법이 나와 있습니다.

오늘은 그중에 커스텀 애니메이션에 사용법에 대해 알아 보겠습니다.

 

사용하고픈 lottie 애니메이션 파일을 내려 받은 후 asset폴더의 복사해줍니다.

아래와 같이 xml을 구성해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/like_button"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        app:lottie_autoPlay="false"
        app:lottie_fileName="heart.json"
        app:lottie_loop="false" />
        
</RelativeLayout>

 

Kotlin파일은 아래와 같이 작성해줍니다.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        like_button.setOnClickListener {
            // 클릭 리스너 함수 
            clickLikeButton()
        }
    }

 

 

 

 fun clickLikeButton() {
        if(!isLiked){
            //좋아요 누르지 않은 상태
            //ofFloat은 실행할 범위를 나타낸다. (0f = 0% , 0.5f = 50%)
            //setDuration은 애니메이션이 실행되는 시간을 설정한다.태
            //animator.start를 통해 애니메이션을 실행
            val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
            isLiked = true
            animator.addUpdateListener {
                //updateListener를 통해 애니메이션이 갱신되도록 해준다.
                //getAnimateValue 현재 애니메이션이 실행되는 구간을 Object값으로 반환 해주는 함수
                //setProgress는 float값을 인자로 받기에 해당 값을 float값으로 캐스팅 해주었다.
                like_button.setProgress(animator.getAnimatedValue() as Float)
            }
            animator.start()

        }
        else{
            //좋아요 누른 상태
            val animator = ValueAnimator.ofFloat(0.5f, 1.0f).setDuration(200)
            isLiked = false
            animator.addUpdateListener {
                like_button.setProgress(animator.getAnimatedValue() as Float)
            }
            animator.start()
        }
    }

 

마지막으로 실행 화면으로 마무리하도록 하겠습니다.