lottie 활용해서 좋아요 버튼 만들기
Lottie Docs
http://airbnb.io/lottie/#/android?id=animation-listeners
좋아요 애니메이션 json 파일
https://lottiefiles.com/89777-like
lottie를 활용하려면 우선 build.gradle에 dependency에 lottie를 추가해주어야 한다.
dependencies {
implementation "com.airbnb.android:lottie:5.2.0"
}
그리고 app 디렉토리에 assets 폴더를 만들고
다운로드 받은 lottie json 파일을 추가한다.
그리고 추가할 xml 파일에 LottieAnimationView를 추가하고
lottie_fileName에 다운로드 받은 로티 파일의 이름을 추가하면 xml에 로티파일을 추가할 수 있다.
로티 애니메이션을 커스텀 하려면 다음과 같은 방식으로 설정할 수 있다.
ofFloat는 애니메이션 전체의 어떤 부분을 보여줄 것인지 정할 수 있고
setDuration은 정한 부분을 몇초 동안 보여줄 것인지 정할 수 있다.
1초는 1000이다.
val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
animator.addUpdateListener { animation : ValueAnimator ->
like_btn.setProgress(
animation.getAnimatedValue() as Float
)
}
animator.start()
전체코드
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"
android:background="@android:color/white"
tools:context=".MainActivity">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/like_btn"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:background="@android:color/white"
app:lottie_autoPlay="false"
app:lottie_fileName="like.json"
app:lottie_loop="false" />
</RelativeLayout>
MainActivity.kt
package com.example.lottieanimationtutorial
import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.example.lottieanimationtutorial.databinding.ActivityMainBinding
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
val TAG = "MainActivity"
var isLiked: Boolean = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
isLiked = false
//좋아요 버튼에 클릭 리스너를 달아준다.
like_btn.setOnClickListener {
if(isLiked == false){
val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
animator.addUpdateListener { animation : ValueAnimator ->
like_btn.setProgress(
animation.getAnimatedValue() as Float
)
}
animator.start()
isLiked = true
}else{ // 좋아요 상태일 때
val animator = ValueAnimator.ofFloat(0.5f, 1f).setDuration(1000)
animator.addUpdateListener { animation : ValueAnimator ->
like_btn.setProgress(
animation.getAnimatedValue() as Float
)
}
animator.start()
isLiked = false
}
}
}
}
