Kotlin 안드로이드의 꽃, 애니메이션 Lottie 사용법!

안녕하세요 휴몬랩 왕초보 개발자 호팍 입니다.

안드로이드에서 애니메이션 활용방법은 여러가지가 있지만 그 중에 가장 쉽고 멋진 애니메이션을 적용 시키는 방법 중에 하나인 Lottie Library 사용법에 대해 알아볼까 합니다.

 

Lottie는 Airbnb에서 제공하고있는 Library로써 아주 멋진 애니메이션을 간단하고 쉽게 적용시킬시 있습니다.

자신이 직접 애니메이션을 만들어서 적용시킬 수 있으며 LOTTIE에서 제공하는 1000개가 넘는 JSON 파일 형태의 애니메이션을 가져다 사용할 수 있습니다. 물론 무료로도 이용이 가능합니다~~

 

1. Lottie를 시작하기에 앞서 애니메이션 파일을 준비해 볼까요?

https://lottiefiles.com/ 에 가셔서 간단한 회원가입을 거치면 무료로 받을 수 있는 애니메이션이 어마어마 합니다!!

맘에드는 아무 애니메이션을 JSON 형태로 받으시고 네이밍을 다시 바꿔주세요~!! - 이 없으면 좋겠죠?

저는 12345-cute-bear.json 을 간단하게 bear.json 으로 바꾸어서 적용하였습니다.

자 이제 준비물은 준비되었고 한번 시작해볼까요?

 

 

2. 제일먼저 build.gradle 폴더의 dependency에 사용가능한 Lottie 버전을 추가해 줍니다. 

(2020년 4월 기준 현재 최신 버전은 3.4.0 입니다)

dependencies {
    ...
    implementation "com.airbnb.android:lottie:$lottieVersion"
    ...
}

 

3-1.  A json animation in src/main/res/raw.

XML 파일에 적용 (raw 폴더 사용시)

From res/raw (lottie_rawRes) or assets/ (lottie_fileName)

<com.airbnb.lottie.LottieAnimationView

        android:id="@+id/lottie_animation"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:lottie_rawRes="@raw/bear"

        app:lottie_loop="true"				// 반복 사용 유무
        app:lottie_autoPlay="true" />		//애니메이션이 load되면 바로 play하는지 유무

 

3-2. A json file in src/main/assets.

XML 파일에 적용 (assets 폴더 사용시)

From res/raw (lottie_rawRes) or assets/ (lottie_fileName)

<com.airbnb.lottie.LottieAnimationView

        android:id="@+id/lottie_animation"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:lottie_fileName="slide.json"

        app:lottie_loop="true"				// 반복 사용 유무
        app:lottie_autoPlay="true" />		//애니메이션이 load되면 바로 play하는지 유무

 

 

raw 와 assets 둘 중 아무거나 사용해도 되지만 되도록이면 raw 를 사용하면 좋은 이유?!

문자열 이름만으로 사용하는 것보다 R 을 통해 애니메이션에 대한 정적 참조가 가능하므로 lottie_rawRes를 사용하는 것을 권장합니다.

 

 

 

4. JAVA (Kotlin) 

package com.huemonelab.android.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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


        lottie_animation.playAnimation()	// 애니메이션 적용
    }
}

 

 

 

5. 스크린샷 확인

애니메이션이 나와야하지만...스크린샷 입니다 ㅠㅠ

확인은 직접 해보셔야 합니다~~!!!
코딩코딩!!!!!!!!

 

 

이렇게 아주 간단하게 멋진 애니메이션을 적용 할 수 있다는 것이 매우 놀랍습니다.

사실 Lottie 를 알기 전에는 xml을 통한 수작업으로(Translate, Rotate, Alpha, Scale)만 애니메이션을 만들었다는...ㄱ-

뭐.. 쓰이는 용도는 다르지만 우리가 원하는 애니메이션은 좀 더 Lottie에 가깝지 않나요?ㅎㅎㅎ...

기본적으로 이렇게 애니메이션을 적용하는 방법도 있고 더 복잡하게 ViewPager와 함께 여러 애니메이션을 사용하면 더 멋진 작품을 만들 수 있습니다 ^^

그럼 여러분도 화려한 애니메이션을 활용하여 손쉽게 더 멋진 앱을 만들어 보세요~~!!

 

 

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

airbnb/lottie-android