[Android] Lottie Animation 적용하기

안드로이드 Lottie 적용

Lottie 애니메이션

Lottie는 Json으로 이루어진 애니메이션이다.

gif보다 용량이 적어서 부담이 적다.

 

실제로 사용해본 결과 처음은 불편했지만, 디자이너님과 서로서로 훨씬 수월해지는 작업이었다.

앞으로 Lottie 사용이 더 늘어날 것 같다.
그냥 이미지를 사용했을 때 보다 역시 애니메이션이 이쁘다..!

 

실제로 LottieFile들이 올라간 사이트를 구경하다보면 눈에 확 들어오는 애니메이션들이 많았다.

Lottie에 쓰일 이미지는 로티파일 에 들어가면 아주 많이 나와있다. 꼭 한 번 둘러보시길 !

 

Lottie 사용

 

API 14 이상의 안드로이드 버전이 필요

gradle에 implementation 'com.airbnb.android:lottie:$lottieVersion' 삽입

lottieVersion이 2.8이상이어야 androidx에 대응 가능

 

출처 https://github.com/airbnb/lottie-android

 

1) src/main/assets 폴더에 LottieFile명.json 넣기

 

2) xml에 com.airbnb.lottie.LottieAnimationView 생성

 

 <com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottie"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginBottom="10dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:lottie_autoPlay="true"
  app:lottie_loop="true"
  app:lottie_speed="1"/>

 

app:lottie_autoPlay	자동으로 플레이 할지 결정
app:lottie_loop	Lottie를 반복해서 재생할지 결정
app:lottie_speed	Lottie의 속도 결정

 

3) LottieView에 애니메이션 적용

 

• LottiView.setAnimaion(json파일명)
• LottiView.playAnimation() : 애니메이션 시작
• LottiView.pauseAnimation() : 애니메이션 중지
• LottiView.setScale(float) : 애니메이션 scale up, down
• LottiView.setProgress : 애니메이션 progress조절
• 이 외에도 로티를 조절하기 편한 함수들이 꽤 있으니 로티Doc를 확인하면 도움될 함수가 많다.