[Android, Lottie] Lottie 를 사용한 애니메이션 효과

안녕하세요 블랙진입니다. 

이번시간에는 Lottie 에 대해 소개해볼려고 합니다.

Lottie 는 AirBnb 개발자 분들이 만든 오픈소스 라이브러리 입니다. 보다 높은 퀄리티의 애니메이션 효과를 네이티브 앱에 적용시키는데 도움을 줍니다.

출저 http://airbnb.io/lottie/

After Effects 를 사용한 애니메이션 파일

 After Effects 툴을 이용해 json 형식의 애니메이션 파일을 만들면 네이티브 앱에 적용시킬 수 있습니다. 이를 위한 도구가 바로 BodyMobin 입니다. 개발자 분과 함께 더욱 멋진 애니메이션 앱을 만들기 위해서 UI/UX 디자이너 분들은 After Effects 를 공부해보고 적용해 보는것도 좋을 것 같습니다.

이에 대한 부가 설명은 링크를 확인해 주세요.

앱에 Lottie 적용해 보기

 Lottie 는 Android, IOS, React Native App, Web 모두 호환이 가능합니다.

저는 안드로이드에 관해서만 포스팅을 할 예정이고 다른 OS 에 관한 설명은 공식페이지를 통해 확인해 주세요~!

1. Sample 파일 받기

Lottie 에 적용할 수 있는 파일은 After Effects 로 만든 json 파일입니다. 예제를 만들려면 이 파일이 있어야겠죠?

예제 파일은 LottieFiles 에서 무료로 다운받아서 사용하시면 됩니다. 해당 링크에서 json 파일을 하나 준비해 주세요.

저는 a_simple_sun_day.json 이라는 위 파일을 예제로 받았습니다.

받은 파일은 app - main 에 assets 폴더를 만들어서 넣어주세요.

2.  APP 단계의 build.gradle 에 lottie 를 적용해 줍니다.

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

3. Xml 에 LottieAnimationView 를 만들어 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

4.  Activity 에서 파일을 불러와 실행해 줍니다.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val animationView = findViewById<LottieAnimationView>(R.id.animationView)

        animationView.setAnimation("a_simple_sun_day.json")
        animationView.loop(true)
        animationView.playAnimation()
        animationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
            }

            override fun onAnimationEnd(animation: Animator) {
            }

            override fun onAnimationCancel(animation: Animator) {
            }

            override fun onAnimationRepeat(animation: Animator) {
            }
        })

    }
}

위와 같은 간단한 설정으로 인터렉티브한 애니메이션을 네이티브 앱에 적용시킬 수 있습니다. 

앞으로는 이러한 인터렉티브한 화면 구성이 소비자들에게 이목을 끌수 있을 거라 생각합니다.

이에 발맞춰 디자이너와 개발자 모두 Lottie 를 활용해 보는게 어떨까요?

<참고자료>

Realm - Lottie로 안드로이드 앱에 인터렉티브한 애니메이션 구현하기

Airbnb - Lottie intrduction

Using an After Effect Animation