[Android/Kotlin] Lottie Animation/애니메이션 추가하기

어디서였지...? 그냥 어디서 Lottie Files라는 사이트에 대해 봤는데

헉!!! 나도 할래!!! 생각만 했다가 이제야 해보는.....

 

Lottie Files는 무료 애니메이션을 제공해주는 사이트다.

둘러보면 정말 귀엽고 깜찍한 애니메이션들이 많다!!

 

프로그래스바가 100% 다 차면 하트를 뿅 띄워주는 기능을 추가해보고자 한다.

결과 화면:

 

---

만드는 법~~

 

1. dependencies 추가

최신 버전 정보는 여기 클릭

dependencies {
	...
    implementation "com.airbnb.android:lottie:5.0.3" 	// Lottie Animation
}

 

 

2. Lottie Files에서 마음에 드는 애니메이션 선택 후 JSON 파일로 다운

내가 찾은 건 요거다>https://lottiefiles.com/99703-heart-lottie-animation

 

 

3. app > Assets 폴더 생성

app 오른쪽 클릭 > new > Folder > Assets Folder

 

4. Assets 폴더에 아까 다운받은 JSON 파일 넣기

 

5. xml에 Lottie View 추가

기본 화면이 저렇게 되어 잇는데 난 화면 가리는 거 싫어서 invisible 해줬다.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/heartAni"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:lottie_fileName="heart.json"	// json 파일면
    app:lottie_autoPlay="false"			// 화면 시작 시 자동 시작 false
    app:lottie_loop="false"				// 애니메니션 반복 재생 false
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 

6. 애니메이션 실행하기

적당한 곳에서

aniView.playAnimation() 로 실행하고

aniView.pauseAnimation() 로 멈추기해주면 된다~~