Android에서 Lottie Animation 적용하기

0️⃣ Lottie Animation?

로티 애니메이션은 개발자들이 손쉽게 애니메이션을 구할 수 있는 방법이다. mp4나 gif보다 용량도 적고 조작하기도 쉬운 파일로서 json 또는 lottie 자체 애니메이션 파일로 제공되곤 한다.

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

게다가 공식문서가 정말 잘 되어있어서 어떤 플랫폼에서든 공식 문서 하나만 보면 다 적용하며 따라할 수 있다! 이것이 정말 큰 장점인 것 같다. 덕분에 과거에도 WatchOS나 ReactNative로도 연결해본 경험이 있다. 아쉽게도 Flutter로는 해본 적이 없으나 Flutter도 이미 공식 라이브러리가 제공되고 있더라... 아무튼 로티는 정말 짱짱맨이다. 다들 애니메이션 구현으로 인해 골머리를 앓고 있다면로티를 강력하게 추천한다.

물론 개발자가 편리해지는 만큼 디자이너분들이 고생할 수 있다. 하지만 무료로 올라와있는 로티 애니메이션도 많고 홈페이지에서 간단하게 필요한 애니메이션을 구현할 수도 있으니 적극 활용해보자.

1️⃣ 의존성 추가

app 수준의 build.gradle에 의존성을 추가한다. 가장 최신 버전으로 추가하기!

dependencies {
    implementation("com.airbnb.android:lottie:6.4.1")
}

사실 안드로이드를 잘 몰라서 여기서부터 문제가 많았는데 Groovy 문법을 코틀린 gradle 파일에 적용하고 있어서 애를 꽤나 먹었다. 아무튼 코틀린 문법을 사용하는 gradle 파일이라면 저렇게 의존성을 추가하면 된다. 이 부분에 대해서는 나중에 자세히 공부하고 포스팅 해보겠다.

2️⃣ Lottie 애니메이션 적용하기

우선, Lottie 애니메이션을 저장하고 추가하는 방법은 파일형식에 따라 좀 다르다.

우선마음에 드는 무료 애니메이션을 하나 골라 json 파일과 dotLottie 파일 둘 중 하나 선택하여 다운로드 하자.

1. JSON 파일로 애니메이션 구현하기

1) JSON파일은 assets 폴더를 생성하여 넣으면 된다.

2) 원하는 화면에 LottieAnimationView를 추가하고 아래 코드처럼 fileName옵션을 주면 된다.

app:lottie_fileName="heart_bora.json"

 

2. dotLottie 파일로 애니메이션 구현하기

1) dotLottie파일은 raw 폴더를 생성하여 넣으면 된다.

2) 원하는 화면에 LottieAnimationView를 추가하고 아래 코드처럼 rawRes옵션을 주면 된다.

app:lottie_rawRes="@raw/heart_bora"

 

나는 raw 폴더에 작업하지 않아 빨갛게 에러가 나는 것 뿐이다.

---

 

파일 저장 경로와 호출 옵션만 다를 뿐 나머지는 모두 같으므로 LottieAnimationView의 옵션을 자유자재로 조절하며 동작해보면 된다.

3️⃣ 애니메이션 동작 상세하게 만져보기

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

lottie.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(p0: Animator) {
    	// 애니메이션이 시작할 때
    }

    override fun onAnimationEnd(p0: Animator) {
    	// 애니메이션이 끝날 때
        lottie.visibility = View.GONE
    }

    override fun onAnimationCancel(p0: Animator) {
    	// 애니메이션이 취소됐을 때
    }

    override fun onAnimationRepeat(p0: Animator) {
    	// 애니메이션이 시작 이후 반복됐을 때
    }
})

appLogo.setOnClickListener {
    lottie.visibility = View.VISIBLE
    lottie.playAnimation()
}

애니메이션을 구체적으로 만져볼 수 있는 방법은 위와 같다. 나는 버튼을 누르면 로티 애니메이션이 등장하고 애니메이션이 끝나면 사라지게 동작하기 위해서 위처럼 구현했다.

 

추가로, 로티는 애니메이션 동작 프레임까지 상세하게 조절할 수 있을 정도로 섬세하게 기능을 제공한다. 이번에 작업했을 땐 그 정도로 정교할 필요가 없어 구현하지 않았지만 이러한 기능까지 사용해야된다면 또 서치해가면서 작업하면 될 것 같다. (물론 이 또한 공식 Docs에 잘 나와있다!)

 

❗️❗️ 주의사항 ❗️❗️

다른 것보다 애니메이션을 Import해서 작업하다보면 분명 이미지가 제대로 들어왔는데도 보이지 않는다거나, 깨져있다거나, 내가 공식 홈페이지에서 보던 애니메이션과 다르다거나, mp4로 다운까지 받아 확인해도 멀쩡한데 에뮬레이터에서만 이상하게 보인다거나! 그런 상황이 발생할 수 있다. 내가 그랬다.

그 이유는 바로 어떤 애니메이션은 안드로이드 플레이어에서 지원하는 기능으로는 만들어지지 않는 애니메이션이 있기 때문이다.

안드로이드 앱에서 Lottie 애니메이션 사용하기 | LottieFiles

이 공식 문서의 첫 번째 순서부터 안드로이드용 LottieFiles를 다운받으라고 한다.

아무래도 실시간으로 업데이트를 자주하는 안드로이드에서는 예전에 배포된 로티 애니메이션은 안드로이드 플레이어를 지원하지 않는 경우인 것이라고 추측해본다.

나는 앱까지 깔아 QR코드를 하나하나 등록하기 너무 귀찮아서 로티 홈페이지에서 하트 애니메이션을 구현했다. 간단한 애니메이션은 무료로도 충분히 구현하고 바로 다운로드 받을 수 있다. 최신버전으로 만들어서 그런지 안드로이드 앱에서도 깨짐 없이 잘 작동했다.

코드를 완벽하게 작성했는데도 애니메이션이 깨진다면 뭔가 코드상의 잘못보다는 애니메이션 자체를 우선 의심해보는 것도 좋다.