안드로이드 로티 애니메이션 (android lottie animation) / 좋아요 버튼클릭

https://airbnb.io/lottie/#/android?id=sample-app

Lottie Docs

 

airbnb 라이브러리를 build.gradle.kts 에 추가

 

// build.gradle.kts
...

// 외부 오픈소스를 가져온다.
dependencies {

    implementation("androidx.core:core-ktx:1.9.0")
    implementation("androidx.appcompat:appcompat:1.6.1")
    implementation("com.google.android.material:material:1.10.0")
    implementation("androidx.constraintlayout:constraintlayout:2.1.4")
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
    
    val lottieVersion = "6.2.0"
    implementation("com.airbnb.android:lottie:$lottieVersion")
}

 

보통 def로 변수선언을 하는 예제투성인데, 나는 안되어서 val로 했다.

 

src/main/assets에 다운받은 lottie파일(json)을 넣어준다.

 

airbnb 로티 docs를 보면 설명이 잘되어있다. 

 

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/likeButton"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/white"
        android:layout_centerInParent="true"
        app:lottie_fileName="heart.json"
        app:lottie_autoPlay="false"
        app:lottie_loop="false"
        />

</RelativeLayout>

 

xml에서 다운받은 로티파일을 넣어주고, 화면을 구성한다.

 

package com.example.lottieanimationtutorial

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

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    private val TAG: String = "로그"

    private var isLiked: Boolean = false

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

        isLiked = false

        binding.likeButton.setOnClickListener {
//            binding.likeButton.playAnimation() // 애니메이션을 플레이한다.
            if (!isLiked) {
                // Custom animation speed or duration.
                
                val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(300)
                animator.addUpdateListener {
                    binding.likeButton.progress = it.animatedValue as Float
                }
                animator.start()
                isLiked = true;
            } else {
                val animator = ValueAnimator.ofFloat(0.5f, 0f).setDuration(300)
                animator.addUpdateListener {
                    binding.likeButton.progress = it.animatedValue as Float
                }
                animator.start()
                isLiked = false;
            }
            Log.d(TAG, "MainActivity - onCreate() called / 좋아요 버튼 클릭. isLiked: $isLiked")

        }

    }
}

 

ValueAnimator.ofFloat(0f, 0.5f)를 이용해서, 로티의 프레임을 설정하고 커스텀 할수 있다.