Lottie 를 이용해 화려한 애니메이션 넣기

Lottie는 airbnb에서 제작한 애니메이션 라이브러리 입니다. Lottie는, after effects에서 제작한 애니메이션 효과를 json형태의 파일로 저장하여 모바일 어플리케이션에서도 동일한 애니메이션을 구현할 수 있습니다.

 

적용 방법

적용은 간단합니다. 레이아웃 xml에 애니메이션을 그릴 영역을 지정해 준 뒤, json파일을 연결시켜 주기만 하면 됩니다. 우선, 라이브러리 부터 추가해 주도록 하겠습니다.

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

글이 작성된 시점에서는 3.0.7 버전이 최신 버전이네요.

 

그 다음 애니메이션 효과를 넣을 영역을 xml에서 지정해 줍니다.

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:lottie_autoPlay="true"
            
            app:lottie_fileName="filename.json"
            //or
            app:lottie_rawRes="@raw/filename"
            
            app:lottie_loop="true" />

 

이제 자신이 원하는 애니메이션 파일을 추가해 주기만 하면 됩니다. (json파일을 찾는 사이트는 아래 기재하여 두었습니다.)

여기서 주의하실 점은, json파일을 어디에 추가 하셨느냐에 따라 다릅니다. res/raw 경로에 json파일을 추가하신 분들은 lottie_rawRes 속성을 사용해 주시고, assets/  경로에 넣으신 분들은 lottie_fileName 속성을 이용해 주시기 바랍니다.

 

애니메이션 JSON파일 찾기

Lottie는 다른 이용자들이 직접 애니메이션들을 만들어 공유하고, 배포하는 사이트를 만들어 두었습니다. 아래 사이트에서 원하는 애니메이션 파일을 내려받아 어플리케이션에 적용할 수 있습니다.

바로가기(링크)

LottieFiles - Free animation files build for Lottie, Bodymovin

 

앞서 말씀드린대로, json파일을 넣고 xml에서 지정해 주는 것만으로도 애니메이션이 구동되는 모습을 보실 수 있습니다.

 

자세한 메소드는 Lottie Docs에서 확인해 보시기 바랍니다.

Lottie Docs(링크)