DevGoogry

애니메이션 효과는 앱의 품질을 높여주는 역할을 하며 사용자에게 더 좋은 UI/UX를 제공합니다. 

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

그렇다면 이제 Lottie에 대해 알아보고 사용법에 대해 알아보자.

Lottie란?

Lottie는 Airbnb에서 만들었고 실시간으로 After Effect 애니메이션을 랜더링하고 iOS, Android, React Native에서 동작하는 고품질 애니메이션 라이브러리입니다.

그럼 After Effect에서 만든 파일은 .aep나 .aepx인데 이것을 안드로이드에서 바로 가져다가 쓸 수 있나?

아니요. 바로 가져다가 쓸 수 없습니다.

그래서 Bodymovin이라는 After Effect Plugin을 설치해서 안드로이드에서 사용할 수 있는 파일로 변환 해 줘야합니다.

Bodymovin을 사용하면 애니메이션을 JSON 데이터 포맷으로 추출 할 수 있고 이것을 가져다가 안드로이드에서 보여주면 됩니다.

그럼 이제 안드로이드에서 Lottie를 추가하고 사용하는 법에 대해 알아보자.

app Module build.gradle파일에 dependency을 추가해줍니다.

dependencies {
    compile 'com.airbnb.android:lottie:2.1.0'
}

그리고 project sync를 하면 lottie 라이브러리가 추가 된 것을 확인 할 수 있습니다.

layout에 LottieAnimationView를 추가합니다.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_autoPlay="true"
    app:lottie_fileName="data.json"
    app:lottie_loop="true"/>

lottie_fileName은 After Effect에서 만든 애니메이션의 json파일 이름이 들어가야 합니다.

그리고 json파일은 assets폴더 안에 넣어줍니다.

lottie_autoPlay는 엑티비티가 실행되고 layout이 화면에 보여질때 자동으로 애니메이션을 시작하는 것이고

lottie_loop는 애니메이션이 끝나고 반복적으로 다시 실행 할지 결정하는 것입니다.

또한 autoPlay, fileName, loop와 같은 속성은 자바 코드로도 사용 할 수 있습니다.

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("data.json");
animationView.loop(true);
animationView.playAnimation();

그럼 결과는 아래와 같습니다.

LottieAnimationView에는 setProgress()를 사용해서 애니메이션의 offset을 바꾸거나 속도를 조절할 수 있습니다.

예제 샘플은 https://github.com/sjjeong/GoogryLottieSample 에서 확인 하실 수 있습니다.

예제에서 사용한 Lottie파일은 https://www.lottiefiles.com/ 에서 다운 받으실 수 있습니다.

추가로 애니메이션이 완료 된 후에 화면에서 사라지게 하고 싶으시다면 아래 코드를 확인해주세요.

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) {
        
    }
});

코도바 프로젝트를 생성하고 앱을 만들기 위해서는 코도바를 먼저 설치해야한다.

코도바를 설치하기 위해서는 npm이라는 Node.js의 유틸을 사용해야 해서 Node.js가 설치되지 않은 분들은 먼저 Node.js를 설치해야한다.

Node.js가 설치되었다면 본인 OS에 맞게 설치를 한다.

그 다음에는 프로젝트를 생성한다.

프로젝트는 cordova명령어를 사용해서 생성한다.

$ cordova create hello com.example.hello HelloWorld

명령어를 실행하여 프로젝트를 만들면 아래와 같이 생성이 된다.

CordovaProject라는 Directory에서 hello라는 프로젝트가 생성되었다.

CordovaProejct는 제가 따로 만들었습니다.

그 다음에는 개발하고자 하는 플랫폼을 추가해야한다.

아까 만든 hello Directory로 이동한다.

$ cd hello

그리고 추가하고자 하는 플랫폼을 추가한다.

$ cordova platform add android

아래 명령어를 입력해서 추가된 플랫폼을 확인한다.

$ cordova platform ls

cordova platform command

이제 platform을 추가했고 빌드를 하기전에 필요한 컴파일 또는 sdk가 준비되었는지 확인해보자.

$ cordova requirements

이 명령어를 실행하면 추가한 platform에서 필요한 것들이 있는지 확인해준다.

이렇게 모든 준비가 끝나면 빌드를 해보자.

$ cordova build

이 명령어는 추가한 platform을 모두 빌드 한다는 뜻이다.

$ cordova build android

특정 platform을 빌드하고 싶으면 뒤에 platform name을 붙여준다.

빌드에 성공하면 platforms가 생기고 그 하위에 빌드한 platform 폴더가 생긴다.

이제 만든 샘플을 실행해보자.

$ cordova run android

명령어를 실행하고 빌드에 성공하면 연결된 디바이스에 아래와 같이 나오면 성공이다.