👋Android의 모든 것 : 1️⃣Lottie에 대해서

https://goni95.tistory.com/173

👋Android에 모든 것 | Droid Knights 2021

 

 

1️⃣Lottie

로티는 Airbnb에서 개발한 라이브러리로 실시간으로 *After Effect 애니메이션을 json으로 추출해 Web, Mobile App에서 *Rendering 해주는 고품질 애니메이션 라이브러리입니다. 

 

장점

*Vector 기반이라 정상적으로 제작했다면 용량이 굉장히 적습니다.

*Vector 기반의 애매니에션을 사용하기 때문에 크기에 의한 해상도 저하가 없습니다.

애니메이션 적용이 간단합니다.

사용자와의 상호작용에 반응하는 Interactive Aniamtion이 가능합니다.

 

단점

*After Effect를 통해 애니메이션을 직접 제작하여 사용하려는 경우 난이도가 너무나 높습니다.

*After Effect의 기본적인 기능들만 적용 가능합니다.

 

 

사용법

예제를 통해 확인하기 전 사용하고자 하는 애니메이션을 다운받습니다.

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

 

 

1. 모듈 수준의 build.gradle에 종속성을 추가합니다.

// Lottie
implementation 'com.airbnb.android:lottie:4.2.2'

 

2. res 디렉토리에서 resource type이 raw인 디렉토리를 생성하고 다운받은 json 파일을 복사 붙여넣기 합니다. (사진에는 두 개의 파일이 들어가있는 상태입니다)

 

3. 애니메이션을 사용하고자하는 layout에 LottieAnimationView를 정의해줍니다.

  <!-- 
  lottie_rawRes : Lottie Json 파일
  autoPlay : 자동 재생 여부
  lottie_loop : 반복 재생 여부
  -->
  <com.airbnb.lottie.LottieAnimationView
                    android:id="@+id/notification_lottieAnimationView"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    app:lottie_autoPlay="true"
                    app:lottie_loop="true"
                    app:lottie_rawRes="@raw/notification_character" />

 

필요한 경우 addAnimatorListener를 통해 애니메이션의 시작, 끝, 취소 등의 상황에 따라 조작이 가능합니다.

---

 

 

*After Effect : 주로 모션 그래픽에 사용되는 Tool

 

*Rendering(렌더링) : HTML, CSS, JavaScript 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작을 의미합니다. 즉, 코드가 눈으로 볼 수 있도록 그려진다고 생각하면 됩니다.

 

*Vector Graphics : 컴퓨터 과학에서 그림을 보여줄 때 수학 방정식을 기반으로 하는 점, 직선, 곡선, 다각형과 같은 물체를 사용해 그려내는 방식을 의미합니다.