Android ObjectAnimator

Android ObjectAnimator?

안드로이드에서 제공하는 애니메이션 구현 방법 중 하나 입니다.

전 포스트에서 다뤘던 View Animation(Tween)보다 나중에 나온 애니메이션 API 입니다.

Tween에서는 anim 디렉토리에 정의하고 사용했지만, ObjectAnimator는 animator 디렉토리에 정의합니다.

이번에는 ObjectAnimator에서 사용되는 속성들을 살펴보고, 구현 방법을 알아보도록 하겠습니다.

ObjectAnimator attribute

ObjectAnimator에서 사용되는 속성은 다음과 같습니다.

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

</set>

각각의 속성들을 하나씩 살펴보면 다음과 같습니다.

• ordering
  • together : set에 있는 애니메이션을 동시에 재생 (default)
  • sequentially : set에 있는 애니메이션을 순차 재생
• propertyName : 객체에서 animate 시킬 속성을 지정합니다. 예를 들어 alpha, rotationX, translationX, backgroundColor, textColor 등이 있습니다. xml 내에서는 객체 지정이 불가능 하므로, 코드 내에서 ObjectAnimator.setTarge()으로 해당 속성을 가진 객체를 지정해줘야 합니다.
• duration : 애니메이션 실행 시간
• valueFrom : propertyName에서 지정한 속성값의 시작값을 지정합니다.
• valueTo : propertyName에서 지정한 속성값의 종료값을 지정합니다.
• valueTpye : animate될 값의 타입을 지정합니다. color에 대한 애니메이션의 경우 colorType을 사용합니다.
• startOffset : 애니메이션의 시작 시간을 지정합니다. (1000 → start() 후 1초 후 실행)
• repeatMode : 반복 모드를 지정합니다.
  • restart : 처음 상태로 다시 돌아가서 반복 ( 1 → 2 → 3 → 1 → 2 → 3 )
  • reverse : 종료된 상태에서 반복 ( 1 → 2 → 3 → 2 → 1 )
• repeatCount : 반복 횟수를 지정합니다. -1(infinite)로 지정 시, 무한 반복합니다.

만약, 동시에 여러가지 속성들에 Animation을 주고 싶다면?

Set에 여러개의 ObjectAnimator를 정의할 수도 있지만, propertyValuesHolder 를 사용해서 구현할 수 있습니다.

<objectAnimator
        android:duration="5000"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:startOffset="5000">
        <propertyValuesHolder
            android:propertyName="rotationY"
            android:valueFrom="0"
            android:valueTo="3600"
            android:valueType="floatType" />
        <propertyValuesHolder
            android:propertyName="backgroundColor"
            android:valueFrom="@color/white"
            android:valueTo="@color/black"
            android:valueType="colorType" />
    </objectAnimator>

propertyValuesHolder를 사용하면, 하나의 ObjectAnimator 루트에서 여러가지 속성들에 대한 애니메이션을 정의할 수 있습니다.

위 예시 코드는 10바퀴 회전하면서 컬러가 하얀색에서 검정색으로 바뀌는 애니메이션 입니다.

애니메이션 적용

이번에는 애니메이션을 적용시켜보겠습니다.

ObjectAnimator 객체 생성

val intervalXAnimationColorChange = AnimatorInflater.loadAnimator( this, R.animator.object_ani_interval_color_change ).apply {
            duration = 1000
            interpolator = AccelerateDecelerateInterpolator()
            addListener( object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator?) {
                    Toast.makeText( this@ObjectAnimatorActivity, "애니메이션 시작", Toast.LENGTH_SHORT ).show()
                }

                override fun onAnimationEnd(animation: Animator?) {
                    Toast.makeText( this@ObjectAnimatorActivity, "애니메이션 종료", Toast.LENGTH_SHORT ).show()
                }

                override fun onAnimationCancel(animation: Animator?) {
                    Toast.makeText( this@ObjectAnimatorActivity, "애니메이션 취소", Toast.LENGTH_SHORT ).show()
                }

                override fun onAnimationRepeat(animation: Animator?) {
                    Toast.makeText( this@ObjectAnimatorActivity, "애니메이션 시작", Toast.LENGTH_SHORT ).show()
                }
            })
        }

ViewAnimation의 tween과는 달리, AnimationUtils를 사용하지 않고 AnimatorInflater를 사용합니다.

duration과 interpolator는 xml에서도 지정할 수 있고 코드에서 지정할 수도 있습니다.

또, ViewAnimation과 마찬가지로 애니메이션에 대한 리스너를 달아줄 수 있습니다.

만약 위처럼 모든 상황에서의 리스너가 필요 없다면 doOn~를 통해 원하는 상황에서의 리스너를 각각 정의할 수 있습니다.

객체 지정

intervalXAnimationColorChange.setTarget( view )

애니메이션을 적용시킬 객체를 지정합니다.

여기서 중요한 것은 xml에서 지정한 propertyName 속성을 가지고 있는 객체를 지정해야 합니다.

예를 들어, propertyName를 textColor로 지정하고 객체는 ImageView로 지정했다면 애니메이션을 동작하지 않습니다.

애니메이션 실행 및 취소

intervalXAnimationColorChange.start()
intervalXAnimationColorChange.cancel()

start()와 cancel()을 이용해 애니메이션을 실행, 취소할 수 있습니다.

ObjectAnimator 코드로 생성하기

xml을 작성하지 않고, 코드로 ObjectAnimator를 생성하는 방법은 다음과 같습니다.

ObjectAnimator.ofFloat(view, View.TRANSLATION_X, -300f, 300f).apply {
                duration = 500
                repeatMode = ValueAnimator.REVERSE
                repeatCount = ValueAnimator.INFINITE
            }.start()

ObjectAnimator 의 ofFloat 이나 ofInt 등의 메소드를 통해 ObjectAnimator 객체를 생성할 수 있습니다.

ViewAnimator와의 차이점

가장 큰 차이점은 애니메이션 지정 객체의 클릭 이벤트 입니다.

ViewAnimation은 애니메이션을 통해 뷰의 위치가 바뀌어도 클릭 이벤트는 원래 뷰가 차지하던 위치에서만 받을 수 있었습니다.

하지만 ObjectAnimator는 애니메이션을 통해 바뀐 위치에서 클릭 이벤트를 받을 수 있다는 점이 있습니다.

이미 이것만으로도 ViewAnimation의 사용을 지양하고 ObjectAnimator를 사용해야 할 것 같습니다.

그 외에도 ObjectAnimator는 doOn~ 을 통해서 원하는 상황에서의 리스너만 각각 지정할 수 있다는 점이 있습니다.