[안드로이드 스튜디오 코틀린] Lottie 애니메이션 사용하기

 

 

 

 

안드로이드에서 애니메이션을 사용할 수 있는 방법으로

https://lottiefiles.com/blog/working-with-lottie/getting-started-with-lottie-animations-in-android-app

Getting Started with Lottie Animations in an Android App - LottieFiles

 

에서 보면 사용법이 나와있다.

 

 

 

 

 

 

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

 

를 추가해주고, 

 

viewBinding {
    enabled = true
}

 

 

뷰바인딩까지 설정을 추가해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

원하는 키워드를 입력해 가져오고 싶은 애니메이션을 선택하고, 

 

 

 

 

 

json으로 다운받아준다.

 

 

 

 

Assets Folder를 추가해주고, 다운받은 json의 이름을 heart.json으로 변경한 뒤 폴더에 넣어준다.

 

 

 

 

 

 

 

이제 메인 코드를 살펴보자

 

 

 

 

 

 

 

 

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="0dp"
        android:onClick="onClickButton"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:lottie_fileName="heart.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="false"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

 

 

MainActivity.kt

import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import com.example.kotlinlottietest.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding : ActivityMainBinding
    private var isHearting : Boolean = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }

    fun onClickButton(view: View) {
        if (!isHearting) {
            val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(500)
            animator.addUpdateListener {
                binding.animationView.progress = it.animatedValue as Float
            }
            animator.start()
            isHearting = true
            Log.d("Lottie TEST", "좋아요 버튼을 누르면 하트가 나온다")
        } else {
            val animator = ValueAnimator.ofFloat(0.5f, 1f).setDuration(500)
            animator.addUpdateListener {
                binding.animationView.progress = it.animatedValue as Float
            }
            animator.start()
            isHearting = false
        }
    }
}

 

메인 코드는 아래 블로그에서 가져왔다.

 

https://daldalhanstory.tistory.com/225

안드로이드 코틀린 / lottie Animation을 이용해 인스타그램 하트기능 만들기/ TIL # 30

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

홈페이지에서 소스코드를 보면

 

위와 같이 나와 있어서 app:lottie_url="heart.json" 을 추가했지만, 이렇게 하면 아래처럼 오류가 뜬다.

 

 

 

 

 

android java.lang.IllegalStateException: Unable to parse composition

 

 

 

 

 

 

 

 

 

 

 

 

이유는 

app:lottie_url="heart.json" 을 아래처럼 바꿔줘야 한다.

 

app:lottie_fileName="heart.json"

 

(중요 ☆☆☆☆☆☆☆☆)

 

 

 

 

 

 

 

실행 결과( 동영상이 안올라가서 사진 첨부)

 

 

 

 

 

 

 

 

 

전체 코드는

 

https://github.com/songmik/KotlinSimpleLottieTest

GitHub - songmik/KotlinSimpleLottieTest: 간단하게 Lottie 동작 테스트