[Android] Lottie

Lottie

설명

• Lottie란 벡터 애니메이션을 앱에 적용할 수 있게 만들어주는 것을 말한다.
• git 애니메이션보다 훨씩 작은 용량으로 제작되어 리소스를 대폭 줄일 수 있다.
• 벡터 기반이라 크기에 대한 해상도 저하가 없다.
• 사용자 행동에 반응하는 인터랙션 애니메이션이 가능하다.
• lottiefiles 사이트에서 json 파일로 다운받아 사용 가능하다.
  • https://lottiefiles.com/

코드

build.gradle

dependencies {
    ...
    implementation 'com.airbnb.android:lottie:3.6.0' // 추가
}

assets/heart.json

• lottiefiles 사이트에서 heart 입력 후 마음에 드는 파일 찾아 다운로드해서 assets 디렉토리에 저장

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="main"
            type="com.example.android_example.MainActivity" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <com.airbnb.lottie.LottieAnimationView
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:lottie_autoPlay="true"
            app:lottie_fileName="heart.json"
            app:lottie_loop="true" />

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:lottie_fileName="heart.json" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="@{main.onClick}"
            android:text="click" />
    </LinearLayout>
</layout>

MainActivity

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

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.lifecycleOwner = this
        binding.main = this
    }

    fun onClick(view: View) {
        // 처음(0f)부터 중간(0.5f)까지 1초(1000)동안 애니메이션 진행
        val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
        animator.addUpdateListener { animation ->
            binding.animationView.progress = animation.animatedValue as Float
        }
        animator.start()
    }
}

참고

• https://youtu.be/1uOvP-6vpKU
• https://oldkong.tistory.com/8