[Kotlin] Lottie btn

# 개발환경

tool : android studio 4.0 os : windows 10 pro 64-bit

 

 

- Lottie Animation Git Link : https://github.com/airbnb/lottie-android
   → Documentation, Examples Link : http://airbnb.io/lottie/#/

airbnb/lottie-android

 

 

# 방법

 

1. 오픈소스 추가

# Gradle Scripts > build.gradle(Module: app)

 

  1.1.1. implementation "com.airbnb.android:lottie:${lottieVersion}" 추가

  1.1.2. sync now

 

  

 

  - lottie의 최신 버전은 lottie git의 CHANGELOG.md 파일을 확인하면 알 수 있음

 

 

2. lottie Animation 선택

  아래 링크에서 원하는 애니메이션을 선택

 

https://lottiefiles.com/9828-heart-like-button-pop

Heart / like button pop! on Lottiefiles. Free Lottie Animation

 

  2.1. download JSON

  2.2. assets 디렉토리 생성

# app > 마우스 우클릭 > New > Folder > Assets Folder > 바로 OK

 

 

 

  2.3. 다운받은 JSON 파일을 assets 디렉토리에 복사

 

 

 

 

 

 

 

 

3. lottie Animation View 추가

  lottie Animation View를 xml에 추가하기 위해서 Documentation 에서 From XML 항목 추가

 

 

  3.1. 내용 추가

# app > res > layout > activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  ...
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_btn_like"
        android:background="#FFFFFFFF"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        app:lottie_fileName="lottie_heart.json"
        app:lottie_autoPlay="false"
        app:lottie_loop="false"
        />
</RelativeLayout>

 

  ▶ lottie_fileName : assets 디렉토리에 복사한 JSON 파일의 이름

  ▶ lottie_autoPlay : lottie Animation 자동실행 설정

  ▶ lottie_loop : lottie Animation 반복 설정

 

 

  3.2. 버튼 액션 리스너 추가

// app > java > package > MainActivity.kt

import ...
class ... {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // button Listener
        lottie_btn_like.setOnClickListener {
          //TO-DO
        }
    }
}

 

   lottie_btn_like : activity_main.xml에서 설정한 LottieAnimationView ID

 

 

4. Animation 실행 

   4.1. 전체 길이 실행

// app > java > package > MainActivity.kt

import ...
class ... {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // button Listener
        lottie_btn_like.setOnClickListener {
        
            // 1. 전체 길이 실행
            lottie_btn_like.playAnimation()
        }
    }
}

 

  ▶ playAnimation() : 애니메이션의 처음부터 끝까지 실행

 

 

  4.2. 일부 길이만 실행

// app > java > package > MainActivity.kt

import ...
class ... {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        
        // button Listener
        lottie_btn_like.setOnClickListener {
            val animator = ValueAnimator.ofFloat(0f, 0.66f).setDuration(3000)
            animator.addUpdateListener { animation: ValueAnimator ->
                lottie_btn_like.setProgress(
                    animation.getAnimatedValue() as Float
                )
            }
            animator.start()
        }
    }
}

 

    ▶ setDuration(milliseconds) : 지속시간

    ▶ ofFloat(start, end) : 실행시킬 애니메이션의 시작지점, 종료지점(%)

       ㄴ 0f: 0%, 1f: 100%

 

 

  4.3. Toggle

// app > java > package > MainActivity.kt

import ...
class ... {

	// 토글 상태
    var isLiked: Boolean = false

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        
        // 초기화
        isLiked = false
        
        
        lottie_btn_like.setOnClickListener {
            if (isLiked == false) {
                val animator = ValueAnimator.ofFloat(0f, 0.66f).setDuration(3000)
                animator.addUpdateListener { animation: ValueAnimator ->
                    lottie_btn_like.setProgress(
                        animation.getAnimatedValue() as Float
                    )
                }
                animator.start()
                isLiked = true
            }else {
                val animator = ValueAnimator.ofFloat(0.66f, 1f).setDuration(2000)
                animator.addUpdateListener { animation: ValueAnimator ->
                    lottie_btn_like.setProgress(
                        animation.getAnimatedValue() as Float
                    )
                }
                animator.start()
                isLiked = false
            }
        }
    }
}

 

 

 

[참고] https://www.youtube.com/watch?v=1uOvP-6vpKU&list=PLgOlaPUIbynpUQqb_ifNAt5yWEfp3Pz6i&index=7