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

정말 오랜만에 글을 쓰게 된다.

 

취업하게 되면서 해야 할 것도 많고 이것저것 배우느라 정신이 없어,

 

집에 돌아와 작업을 하면서 이렇게 개인적인 공부 여유가 없어서ㅠㅠ

 

최근에 너무 힘들었지만, 이럴수록 더욱 짬 내서 내가 공부한 내용들을 기록해야 한다고 생각이 들었다.

 

정말 기억보단 내가 남겨놓았던 기록들이 더 장기기억으로 이어질 가능성이 있고,

 

궁금할 때 바로바로 찾아볼 수 있어서 장점이 많은 것 같다고 생각이 든다.

 

오늘은 인스타그램에 하트 기능을 애니메이션 형식으로 구현하는 방법에 대해서 알아보고자 한다.

 

https://www.youtube.com/watch?v=1uOvP-6vpKU&list=PLgOlaPUIbynrDSTJxS8AaE-2zYvPCjWtF&index=7

 

개발자 정대리님의 영상을 참고하였습니다. 

---

우선 로티 애니메이션 사이트를 들어가 보자.

 

인스타그램에 하트를 살펴보자..

 

하트를 누르면 하트가 분홍색으로 가득차고,

 

한번 더 누르면 원래 상태로 돌아간다.

 

 

https://lottiefiles.com

Free Lottie Animation Files, Tools & Plugins - LottieFiles

로티 애니메이션 사이트로 들어간다.

 

많은 애니메이션 자료가 있는데,

 

나는 정대리님이 사용하신 하트 버튼을 그대로 사용해 보겠다.

 

ducnomo라고 검색하면

 

 

이렇게 생긴 귀여운 하트 모양이 있다.

 

이 하트 모양을 JSON형태로 다운을 받자.

 

이 부분을 클릭하면 된다. 그러고 안드로이드 스튜디오로 가보자.

 

app폴더에서 오른쪽 마우스 버튼을 누르고, new -> Folder -> AssetsFolder를 눌러서

 

AssetsFolder를 만들어 준다.

 

그러고 그 안에다가 저 하트 JSON파일을 넣어준다.

 

이름은 heart.json으로 변경해주었다.

 

그리고 나서 

 

http://airbnb.io/lottie/#/android

Lottie Docs

 

이곳에 로티 라이브러리에 대한 사용법과 라이브러리 추가 방법이 나온다. (공식 문서)

 

우선 빌드 그래들에 다음과 같은 디펜더시를 추가해주자.

 

def lottieVersion = '3.7.0'

implementation "com.airbnb.android:lottie:$lottieVersion"

 

나 같은 경우는 최신 버전인 3.7.0 버전을 사용했다.

 

최신 버전은 계속 바뀌므로 이 곳을 보고 확인하여 수정해주자.

공식문서 첫 화면에서 아래쪽에 안정화된 마지막 버전이 쓰여 있다.

 

공식 문서를 더 살펴보면,

 

xml에 다음과 같은 뷰를 추가하라고 한다.

 

<com.airbnb.lottie.LottieAnimationView
        android:onClick="onClickButton"
        android:id="@+id/likeBtn"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        app:lottie_autoPlay="false"
        app:lottie_fileName="heart.json"
        app:lottie_loop="false" />

우선 아이디와 onclick을 넣어주었다.

 

나머지

app:lottie_autoPlay="false"

하트가 분홍색이었다가 하얀색으로 바뀌는 것을 자동으로 실행하게 한다. 

app:lottie_fileName="heart.json"

아까 assets폴더에다 넣은 heart.json에 이름을 넣어준다.

 

app:lottie_loop="false

하트 애니메이션 실행을 무한 반복한다.

 

이 기능들을 true로 해줄 필요는 없다. 우리는 지금 이 기능이 필요 없으므로,

 

filename을 제외하고 저 두 가지를 false로만 바꿔주자.

 

mainActivity로 가보자.

 

미리 설명하지만,

 

뷰 바인딩을 해놓은 상태에서 진행한다.

 

뷰 바인딩에 대해 모른다면 아래 게시물을 먼저 공부하고 오는 것을 추천한다.

 

2021.04.22 - [Programing/Android Studio With Kotlin] - 안드로이드 코틀린 뷰 바인딩 View Binding TIL #26

안드로이드 코틀린 뷰 바인딩 View Binding TIL #26

 

class MainActivity : AppCompatActivity() {
    private var mbinding: ActivityMainBinding? = null
    private val binding get() = mbinding!!
    private var isHearting: Boolean = false

    val TAG: String = "로그"

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

    fun onClickButton(view: View) {
        if(!isHearting){ //기본이 false이므로 false가 아닐때 실행한다.
            //애니메이션의 커스텀
            //0f가 0퍼센트, 1F가 100퍼센트
            //ofFloat(시작지점, 종료지점).setDuration(지속시간)
            // Custom animation speed or duration.
            val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(500)
            animator.addUpdateListener {
                binding.likeBtn.progress = it.animatedValue as Float
            }
            animator.start()
            isHearting = true // 그리고 트루로 바꾼다.
            Log.d(TAG, "MainActivity - onClickButton() called / 좋아요 버튼이 클릭됨")
        }else{ //트루일때가 실행된다.
            val animator = ValueAnimator.ofFloat(0.5f, 1f).setDuration(500)
            animator.addUpdateListener {
                binding.likeBtn.progress = it.animatedValue as Float
            }
            animator.start()
            isHearting = false // 다시 false로 된다.
            Log.d(TAG, "MainActivity - onClickButton() called / 좋아요 버튼이 꺼짐")
       }

    }
}

우선은 전체 코드이다.

 

애니메이션 실행 코드만 잘 살펴보면 된다.

 

 //애니메이션의 커스텀
            //0f가 0퍼센트, 1F가 100퍼센트
            //ofFloat(시작지점, 종료지점).setDuration(지속시간)
            // Custom animation speed or duration.
            val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(500)
            animator.addUpdateListener {
                binding.likeBtn.progress = it.animatedValue as Float
            }
            animator.start()
            isHearting = true // 그리고 트루로 바꾼다.
            Log.d(TAG, "MainActivity - onClickButton() called / 좋아요 버튼이 클릭됨")

animator 변수에 하트에 영상 원하는 시작시간과 종료 시점을 내가 설정해 줄 수 있다.

 

영상이 0~100 프로까지 있다면,

 

저 하트 애니메이션은 0~50프로 까지가 분홍색으로 변하는 애니메이션이고,

 

50~100프로 까지가 분홍색에서 하얀색으로 변하는 애니메이션이다.

 

그래서 ofFloat안에 파라미터에는 (시작 지점 0f, 종료지점 0.5f)를 넣어주어 분홍색으로 (한번 클릭될 때 분홍색)

 

변하는 애니메이션 코드를 만들어주는 것이다.

 

그러고 하얀색으로 변하는 코드는 그 반대로

 

0.5에서 1로 바꿔주면 된다.

 

setDuration메서드는 지속시간을 설정해주는 메서드이다.

 

애니메이션이 실행되는 속도를 설정해주는 것이다.

 

0.5초로 설정해주자(500).

 

그리고 나서

 

animator.addUpdateListener {
binding.likeBtn.progress = it.animatedValue as Float
}

 

addUpdateLister를 달아주어, 

 

이 이미지가 클릭이 되었을 때, 애니메이션이 실행되게 하는 코드를 넣어준다.

 

그리고 마지막으로 

 

animator.start() 메서드로 애니메이션을 실행해준다.

---

그렇다면 한번 누를 때 애니메이션이 멈추고, 

 

한번 더 누를 때 다시 색이 없어지게 하는 법은 무엇일까?

 

바로 불리언이다.

 

Boolean의 값은 true와 false로 나뉘어 있는데,

 

private var isHearting: Boolean = false

 

이런 식을 isHearting(임의)이라는 불리언을 false로 정해주고,

 

if문으로! isHearting이란 조건을 넣어주면(앞에 느낌표를 붙임으로써, false가 아닐 때라는 뜻을 가지고 있다. 즉 true)

 

첫 클릭이 될 때 true인데, 기본값이 false이므로,! isHearting = true -> false가 아니다.

(설명이 어려워서 죄송합니다)

 

그래서 처음 실행되는 것이 if에 첫 번째 구문이다.

 

그리고, isHearting = true를 줌으로써, 

 

isHearting에 기본값을 true로 준다.

 

그러면 버튼을 한 번 더 누를 때,

 

!isHearting이 아니므로,

 

아래 구문이 실행되게 된다.

 

결국 결과는 아래 영상처럼 나오게 된다.

20210515_210540.mp4

1.52MB

 

영상이 업로드가 되질 않아, 파일로 올린다..

 

오늘 배운 내용 끝!

 

전체코드는 아래 깃허브에 올려두었다.

 

https://github.com/qjsqjsaos/InstagramHeart

qjsqjsaos/InstagramHeart