Kotlin : Lottie Library(애니메이션 적용)

Lottie가 뭔가요?

Lottie는 AirBnB에서 제공하는 오픈소스 라이브러리이다.

Json 기반 애니메이션을 랜더링하면 벡터 기반의 애니메이션이기 때문에 용량이 적고 해상도 저하가 없다는 것이 특징이다.

또한 적용이 쉽고 무료 애니메이션이 많기 때문에 사용자와 재밌게 소통해보기 위해 사용해보았다

 

 

1. (app:bundle) dependencies 추가

//lottie animation
implementation 'com.airbnb.android:lottie:6.0.0'

현재 최신 버전 6.0.0

 

 

2. lottie 사이트 접속 후 로그인

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

 

3. 에셋을 찾아서 다운로드 받는다. 검색창에 검색할 수도 있다.

 

 

4. 원하는 이미지를 선택한 다음, 각자 설정을 완료해준다.

 

5. download 버튼 -> Lottie json 선택 후 다운로드

 

6. 안드로이드 스튜디오로 돌아와서 res -> raw 폴더를 생성해준 후 다운로드 받은 json 파일을 넣어준다.

7. 애니메이션을 적용할 xml 파일에 들어가서 LottieAnimationView를 추가한다.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/logout_animation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_autoPlay="false"
    app:lottie_loop="false"
    app:lottie_rawRes="@raw/logout"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="@+id/logout_text"
    app:layout_constraintStart_toStartOf="@+id/logout_text"
    app:layout_constraintTop_toTopOf="parent"/>

//처음 시작했을 때 자동으로 시작(true), 직접 실행(false)
app:lottie_autoPlay="false"
//loop 즉 애니메이션을 반복할 것인지(true), 한번만 실행할 건지(false)
app:lottie_loop="false"
//json 파일 적용
app:lottie_rawRes="@raw/logout"

8. 액티비티 파일에 들어가서 적용시켜준다.

CoroutineScope(Dispatchers.Main).launch {
    logoutAnimation.playAnimation()
    delay(200)
}

playAnimation()을 사용하면 실행시킬 수 있다.

 

 

결과화면