Property animation

property animation system을 통해서 거의 모든 것을 애니메이션을 시킬수가 있습니다.

 

[특성]

• 재생 시간: 애니메이션 재생 시간을 지정할 수 있습니다. 기본 길이는 300ms입니다.

• 시간 보간: 속성의 값이 애니메이션의 현재 경과 시간 함수로 계산되는 방식을 지정할 수 있습니다.

• 반복 횟수 및 동작: 재생 시간이 끝나고 애니메이션 반복 횟수에 도달하면 애니메이션 반복 여부를 지정할 수 있습니다. 애니메이션을 역방향으로 재생할지도 지정할 수 있습니다. 역방향으로 설정하면 반복 재생 횟수에 도달할 때까지 애니메이션이 앞뒤로 반복 재생됩니다.

• 애니메이터 조합: 애니메이션을 함께 또는 순차적으로 재생하거나 지정된 지연 시간 후에 재생하는 논리 조합으로 그룹화할 수 있습니다.

• 프레임 새로고침 지연: 애니메이션 프레임의 새로 고침 빈도를 지정할 수 있습니다. 기본값은 10ms마다 새로고치도록 설정되지만, 애플리케이션에서 프레임을 새로고칠 수 있는 속도는 궁극적으로 시스템의 전반적인 사용량과 시스템에서 기본 타이머를 제공하는 속도에 따라 달라집니다.

주로 API로는 다음과같이 세가지가 존재합니다.

• ValueAnimator

• ObjectAnimator

• AnimatorSet

ValueAnimator

ValueAnimator 같은 경우에는 애니메이션에 대한 세부정보 , 반복 여부를 지정을 해주면 업데이트 이벤트를 통해서 받을수가 있습니다. 

 

ObjectAnimator

애니메이션으로 이제 보여줄 View을 선택하여 객체 속성을 변경할수가 있습니다.

이 내용은 ValueAnimator의 서브클래스 입니다.

보통적으로는 이 클래스를 자주 사용을 하고 ObjectAnimator에서 하기 어려울 때 그 때 ValueAnimator을 사용합니다.

 

AnimatorSet

애니메이션이 서로 관련되어 실행되도록 함께 그룹화 하는 메커니즘을 제공합니다.

따라서 순차적으로 실행을 시키거나 지정된 지연 시간 이후에 재생하도록 할수가 있습니다.

 

시간 보간을 다음과 같이 정의할수 있습니다.

 

[예시]

자세한 이벤트 내용

ObjectAnimator.ofFloat(textView, "translationY" or "translationX",500f).apply {
            this.duration = 5000 // duration 5 seconds
            this.repeatCount = ValueAnimator.INFINITE
            this.repeatMode = ValueAnimator.REVERSE
            this.setEvaluator(IntEvaluator())
            this.interpolator = TimeInterpolator {
                it
            }
}

// 1000ms 시간 동안 0 에서 100 사이에 값을 계산합니다.
ValueAnimator.ofFloat(0f, 100f).apply {
        duration = 1000
        start()
    }
// 1000ms 시간 동안 MyTypeEvaluator을 로직을 사용하여 startPropertyValue end PropertyValue의 애니메이션을 값을 계산합니다.
// TypeEvaluator - 고유 평가자 사용
// IntEvaluator - int 속성 계산
// FloatEvaluator - float 속성 계산
// ArgbEvaluator 16진수 속성 계산
ValueAnimator.ofObject(MyTypeEvaluator(), startPropertyValue, endPropertyValue).apply {
    duration = 1000
    start()
}

ValueAnimator.ofObject(...).apply {
        ...
        addUpdateListener { updatedAnimation ->
            // You can use the animated value in a property that uses the
            // same type as the animation. In this case, you can use the
            // float value in the translationX property.
            textView.translationX = updatedAnimation.animatedValue as Float
        }
        ...
    }

 val bouncer = AnimatorSet().apply {
        play(bounceAnim).before(squashAnim1)
        play(squashAnim1).with(squashAnim2)
        play(squashAnim1).with(stretchAnim1)
        play(squashAnim1).with(stretchAnim2)
        play(bounceBackAnim).after(stretchAnim2)
    }
    val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
        duration = 250
    }
    AnimatorSet().apply {
        play(bouncer).before(fadeAnim)
        start()
    }

 

ViewPropertyAnimator

여러 ObjectAnimator 객체 사용

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
    val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
    AnimatorSet().apply {
        playTogether(animX, animY)
        start()
    }

   

하나의 ObjectAnimator 사용

    val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
    val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
    ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

ViewPropertyAnimator

myView.animate().x(50f).y(100f)

 

다음과 같이 XML에서도 선언이 가능합니다.

  <set android:ordering="sequentially">
        <set>
            <objectAnimator
                android:propertyName="x"
                android:duration="500"
                android:valueTo="400"
                android:valueType="intType"/>
            <objectAnimator
                android:propertyName="y"
                android:duration="500"
                android:valueTo="300"
                android:valueType="intType"/>
        </set>
        <objectAnimator
            android:propertyName="alpha"
            android:duration="500"
            android:valueTo="1f"/>
    </set>
    
    ------------------------ ValueAnimator --------------------
    
        <animator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:valueType="floatType"
        android:valueFrom="0f"
        android:valueTo="-100f" />
    

[사용]

 (AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) as AnimatorSet).apply {
        setTarget(myObject)
        start()
    }
    
    ------------------------ ValueAnimator --------------------------------
     (AnimatorInflater.loadAnimator(this, R.animator.animator) as ValueAnimator).apply {
        addUpdateListener { updatedAnimation ->
            textView.translationX = updatedAnimation.animatedValue as Float
        }

        start()
    }