[Android] Lottie Animation 사용하기. Json 사용

Lottie Animation

gif, mp4 등이 아닌, json 으로 실행할 수 있는 animation library 입니다.

공식 홈페이지

공식 github

 

Android 에서 사용하는 방법입니다.

1. library 추가

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

2022.03.06 기준으로 5.0.2 버전이 latest 입니다. 그 후 버전은 위의 공식github 링크에서 확인하시면 됩니다.

 

2. json 파일 다운로드

lottie files <- 여기 클릭. 원하시는 애니메이션을 고르고, json 으로 다운로드 받습니다.

 

3. res 에 raw 폴더를 생성 후 json 파일 복사

생성된 raw 폴더에 다운로드 한 json 파일을 복붙합니다.

4. layout.xml 에 추가

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    app:lottie_rawRes="@raw/loading_12dots"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    />

• app:lottie_rawRes 에 json file 을 입력합니다.
• app:lottie_loop 가 true 면 반복재생
• app:lottie_autoPlay 가 true 면 바로 실행
• app:lottie_repeatCount 는 재생 횟수 (예: app:lottie_repeatCount="1" // 재생 후 반복 한번 더 = 총 두번재생

 

추가

코드에서 제어 하려면,

LottieAnimationView animationView = findViewById(R.id.your_lottie_comp_id);

animationView.setSpeed(1f);
animationView.setVisibility(View.VISIBLE);
animationView.playAnimation();

 

그리고, 한번 실행하고 숨기려면, 이벤트 리스너를 사용하면 됩니다.

animationView.addAnimatorListener(new Animator.AnimatorListener() {
   @Override
   public void onAnimationStart(Animator animator) {
   }

   @Override
   public void onAnimationEnd(Animator animator) {
      animationView.setVisibility(View.GONE);
   }

   @Override
   public void onAnimationCancel(Animator animator) {

   }

   @Override
   public void onAnimationRepeat(Animator animator) {

   }
});