1. Lottie 선택하기

안드로이드 앱을 위한 Lottie를 선택하세요. 나만의 Lottie를 사용해도 되지만, LottieFiles에서 무료로 제공하는 수많은 Lottie 애니메이션 중 하나를 선택할 수 있어요.

선택된 Lottie는 안드로이드용 LottieFiles 앱을 사용하여 애니메이션이 동일한  안드로이드에서 작동되는지 꼭 테스트 해봐야 합니다. 가끔 Lottie 안드로이드 플레이어에서 지원하는 기능으로는 만들어지지 않는 애니메이션이 있거든요.

LottieFiles에서 애니메이션 아래에 있는 QR 코드를 앱으로 스캔하면 애니메이션을 미리 보기 할 수 있습니다.

2. 프로젝트 설정하기

Lottie를 사용하는 방법은 아주 간단해요. 여러분이 IDE로 안드로이드 스튜디오(Android Studio)를 사용하고 있다고 가정할게요. 다른 IDE를 사용하더라도 같은 설명을 참조하면 됩니다.

프로젝트 구조 패널에서 projects build.gradle 파일을 선택하고 종속성 블록(dependencies block) 안에 다음 라인을 추가하세요.

def lottieVersion = "5.2.0" 
implementation "com.airbnb.android:lottie:$lottieVersion"

lottieVersion을 최신 버전으로 변경하세요.

최신 버전:

레이아웃에 LottieAnimationView 추가하기

안드로이드용 로티 라이브러리(Lottie library)는 애니메이션 렌더링을 담당하는 LottieAnimationView를 제공합니다. 애니메이션을 배치하고 싶은 레이아웃에 추가하세요.

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/animationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:lottie_url="REPLACE_JSON_URL"
     app:lottie_autoPlay="true"
     app:lottie_loop="true"/>

앱으로 애니메이션을 한 곳에 묶기

애니메이션이 오프라인에서 작동하길 원한다면, 애니메이션을 프로젝트 로우 리소스(raw resources)에 포함시켜 앱으로 묶으면 됩니다.

프로젝트에 로우 리소스(raw resources)가 없는 경우 File>New>Folder>Raw Resources 폴더로 이동하여 생성하세요. 애니메이션에 이미지가 포함된 경우, .json을 이용해 .zip으로 모두 모으고 동일한 절차를 따르면 됩니다.

애니메이션을 다운로드하고 사용자의 유스케이스(use-case)에 따라 이름을 animation.json 또는 animation.zip으로 변경한 후, 로우 리소스(raw resources) 폴더로 옮깁니다.

묶은 애니메이션을 사용하려면 레이아웃 코드를 업데이트하세요

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>

자, 여기! Lottie 애니메이션을 사용한 여러분의 첫 번째 안드로이드 프로젝트가 준비됐습니다! 이제 프로젝트를 추가로 구성하고 애니메이션 동작을 사용자 지정하는 일만 남았습니다. 안드로이드용 로티(Lottie) 공식 문서에서 이 구성에 대한 추가 정보를 확인할 수 있습니다.

사용 방법은 이걸로 끝이지만, 이 외에도 할 수 있는 것이 많아요. 프로젝트에 Lottie를 사용하는 방법에 관한 더 많은 팁은 check out our Lottie로 작업하기 블로그를 확인하세요.