Android ValueAnimator

ValueAnimator?

Value Animator란, 안드로이드에서 제공하는 애니메이션 API 중 하나 입니다.

propertyName을 지정하고 해당 property를 가진 객체에만 애니메이션을 적용시킬 수 있던 ObjectAnimator와는 다르게 모든 객체와 속성값에 애니메이션 효과를 넣을 수 있습니다.

여담으로, ObjectAnimator는 ValueAnimator를 상속받아서 구현되었습니다.

이번 포스트에서는 ValueAnimator를 사용해서 애니메이션을 적용해보도록 하겠습니다.

ValueAnimator 구현 및 적용

ValueAnimator는 사용하기에 따라 여러가지 애니메이션이 나올 수 있습니다.

저는 간단하게 View의 크기를 점차 늘려주는 애니메이션을 구현해보도록 하겠습니다.

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".valueanimator.ValueAnimatorActivity">

    <View
        android:id="@+id/view_value_animator"
        android:layout_width="300dp"
        android:layout_height="1dp"
        android:background="@color/black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Activity

class ValueAnimatorActivity : AppCompatActivity() {

    private val view: View by lazy { findViewById(R.id.view_value_animator) }

    private val targetHeight = 2000

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_value_animator)

        val valueAnimator = ValueAnimator.ofInt(view.height, targetHeight).apply {
            addUpdateListener {
                view.layoutParams = view.layoutParams.also { params ->
                    params.height = it.animatedValue as Int
                }
            }
            duration = 10000
            interpolator = AccelerateDecelerateInterpolator()
            doOnStart {
                Toast.makeText(this@ValueAnimatorActivity,"Start Value Animator",Toast.LENGTH_SHORT).show()
            }
        }
        valueAnimator.start()
    }
}

해당 액티비티가 onCreate 되었을 때, 1dp였던 높이가 지정한 targetHeight 까지 늘어나는 애니메이션 입니다.

코드를 살펴보면,

val valueAnimator = ValueAnimator.ofInt(view.height, targetHeight)

ofInt 메소드를 통해 view의 높이에서 지정한 높이까지 점점 증가하는 ValueAnimator 객체를 생성하고

addUpdateListener {
                view.layoutParams = view.layoutParams.also { params ->
                    params.height = it.animatedValue as Int
                }
            }
            duration = 10000
            interpolator = AccelerateDecelerateInterpolator()
            doOnStart {
                Toast.makeText(this@ValueAnimatorActivity,"Start Value Animator",Toast.LENGTH_SHORT).show()
            }

addUpdateListener 를 통해 리스너를 달아주고 duration과 interpolar를 지정했습니다.

이제 해당 애니메이션이 실행됐을 때, 변하는 값은 updateListener에 전달되게 됩니다.

리스너는 전달된 값을 받아서 직접 view의 layoutParams에 접근해 값을 변경합니다.

기존에 다뤘던 애니메이션들과는 다르게, ValueAnimator는 눈에 보이는 것만 바뀌는 것이 아니라, View의 Height가 커지게 되어 View가 차지하는 영역이 실제로 늘어나게 됩니다.

이 점 유의해서 ObjectAnimator와 함께 적재적소에 사용하면 될 것 같습니다.