[Android] Lottie(로띠) 사용법

이미지뷰에 드로어블 폴더의 이미지를 넣거나 글라이드를 통해 이미지를 넣으면 이쁘긴 하지만 움직이지 않아서 미적지근하게 느껴질 때가 있다. 뭔가 좀 똥꼬발랄하게까진 아니라도 동적으로 움직이는 이미지가 있으면 만드는 앱도 좀 이뻐질 거 같다고 느낄 수 있다.

그 때 써볼까 고민해볼 수 있는 놈이 바로 로띠다. t가 2개라 난 로티가 아닌 로띠로 부른다. 개인차니까 알아서 부르자

 

 

- 그래서 로띠가 뭐하는 놈인가?

 

 

로띠는 Airbnb(에어비앤비)에서 만들었고 실시간으로 After Effect 애니메이션을 렌더링, iOS와 안드로이드, React Native에서 동작하는 고품질 애니메이션 라이브러리다. 다 필요없고 애니메이션 라이브러리임.

자바단에서도 코드를 쳐줘야 하는 경우가 있지만 기본적으로 자바 코드 없이 xml 선에서 속성만 몇 개 정의해줘도 문제없이 쓸 수 있어서 편리하다. 이쁜 거 넣으면 좀 있어보이게 할 수 있다

참고로 로띠는 JSON 파일을 다운받고 안드로이드 스튜디오의 asset 폴더에 저장해 사용한다. 파일을 다운받는 곳은 아래의 사이트다.

 

https://lottiefiles.com/

LottieFiles - Free animation files built for Lottie

구글 로그인만 해주면 별다른 요구사항 없이 대부분의 로띠 파일들을 다운받을 수 있다. 프리미엄 전용도 있긴 한데 무료로 받을 수 있는 것들만 봐도 부족한 게 없다고 느껴질 정도로 제법 종류가 많다.

 

- 이 사이트 어떻게 씀?

 

먼저 구글 로그인을 했다고 가정한다. 그리고 여기에 임의로 human이라는 검색어를 입력하고 검색해보겠다.

 

엔터를 치면 이렇게 검색된 로띠 파일들이 리스팅된다.

 

 

맨 첫번째 검은 바탕의 것을 클릭하면 이런 화면이 뜬다.

 

 

빨간 사각형으로 표시한 버튼을 클릭하면 이런 선택창이 나온다. 여기서 JSON 파일을 다운받는다.

시크바와 재생시간을 같이 보면서 이 지점 쯤에 이런 모션이 있구나, 를 파악하면 자바 코딩을 어떻게 하면 좋을지 생각할 수도 있겠다.

 

 

다운로드 받으면 1234-xxxx.json 같은 형식인 이름의 파일이 다운받아진다.

이 파일 이름을 원하는 대로 바꿔서 assets폴더에 넣으면 된다. 굳이 다운받았을 때의 파일명 그대로 안 써도 된다.

assets 폴더에 넣을 때는 스튜디오에서 넣는 게 아니라 폴더를 통해 assets 폴더로 들어가서 복붙하든 드래그하든 둘 중 하나의 방식으로 넣을 수 있다. 스튜디오에서 바로 assets 폴더로 넣으려고 하면 금지 이모티콘이 나오면서 아무 작업도 할 수 없다.

 

 

- 사용법

 

 

먼저 로띠 깃허브로 들어가서 복붙할 의존성 문구를 긁어와야 한다. 주소는 아래에 있다. 그런데 여기 들어가도 로띠 라이브러리가 몇 버전인지에 대한 숫자는 안 써있고 이상한 영어가 써 있다.

 

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

airbnb/lottie-android

$lottieVersion 무엇??

 

그럼 뭐 쓰지 말라는건가? 아니다. 구글링하다보면 어디선가 문구를 볼 수 있다.

편의를 위해서 아래에 오늘자 기준으로 최신 버전을 준비했으니 바로 앱 수준 gradle에다가 복붙해주자.

 

implementation 'com.airbnb.android:lottie:3.0.7'

 

이제 절반 끝났다. 나머지 절반은 xml 파일에서 속성 두세개 추가해주는 것 뿐이다.

작업할 xml 파일로 이동한다. 로띠를 xml 파일에 선언해줄 때는 이렇게 선언한다.

아래는 하나의 예시니까 대충 이렇게 선언하는구나, 하고 넘어가자.

 

<com.airbnb.lottie.LottieAnimationView  // lott만 쳐도 태그 제목이 나온다. 바로 엔터 친다.
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:contentDescription="@string/nav_header_desc"
app:lottie_fileName="header_lottie.json"   // 사용할 로띠 파일의 이름이다. 꼭 .json 확장자까지 풀네임을 입력한다.
app:lottie_loop="true"                          // 반복시킬지 여부를 정하는 속성이다. 반복시킬거라면 true로 놓는다.
app:lottie_autoPlay="true"/>                  // 로띠가 있는 뷰를 열자마자 로띠가 돌아가게 할 건지에 대한 속성이다. 별도로 해야 할 처리가 없다면 true로 놓는 게 좋다.

 

이런 식으로 assets 폴더에 있는 로띠 파일 이름, 반복 여부, 오토플레이 여부를 정해주고 앱을 빌드하면 로띠가 빙글빙글 돌아가는 걸 볼 수 있다.

 

로띠의 애니메이션이 끝난 후에 화면에서 사라지게 하려면 아래의 코드를 참고

final LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.lav_loading);
animationView.addAnimatorListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        
    }

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

    @Override
    public void onAnimationCancel(Animator animation) {
        
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        
    }
});

 

※ 앱 수준 gradle에 의존성을 추가해주고 Sync now 한 다음 xml에서 타이핑해도 로띠를 쓸 수 없는 경우가 있다. 이 때는 프로젝트를 Rebuild해주거나 프로젝트를 껐다가 다시 키면 해결된다.