Animation interpolator and estimator

concept

Interpolator

• TimeInterpolator (time interpolator)

Calculate the percentage of the current attribute value change based on the percentage of time elapsed

• LinearInterpolator (linear interpolator)

Used for uniform speed animation

• AccelerateDecelerateInterpolator (acceleration/deceleration interpolator)

The animation is slow at both ends and fast in the middle

• DecelerateInterpolator (Decelerate Interpolator)

Animation is getting slower and slower

There are also other built-in interpolators in the system: CycleInterpolator (periodical motion), BounceInterpolator (final stage pinball effect), OvershootInterpolator (quickly complete the animation, and return to the end style after exceeding), AnticipateInterpolator (back and then accelerate forward), AnticipateOvershootInterpolator (first Retreat and then accelerate forward, and then return to the end after exceeding the end)

Estimator

Type estimation algorithm, that is, estimator. Calculate the changed attribute value according to the percentage of the current attribute change. Existing estimators in the system: IntEvaluator (for integer attributes), FloatEvaluator (for floating-point attributes), ArgbEvaluator (for Color attributes)

Practice

Custom interpolator

The custom interpolator needs to implement the Interpolator / TimeInterpolator interface and override the getInterpolation() method. The tween animation implements the Interpolator interface; the attribute animation implements the TimeInterpolator interface.

public interface Interpolator { 
   float getInterpolation(float input) {  
        // input值值变化范围是0-1，且随着动画进度（0% - 100% ）均匀变化,即动画开始时，input值 = 0；动画结束时input = 1
        // 而中间的值则是随着动画的进度（0% - 100%）在0到1之间均匀增加
       return float型值；
   }
}
TimeInterpolator 接口同上

Instance

Define a deceleration and acceleration interpolator

// 减速加速插值器
class DecelerateAccelerateInterpolator : TimeInterpolator {
    override fun getInterpolation(input: Float): Float {
        return if (input < 0.5) (sin(Math.PI * input) / 2f).toFloat() else ((2 - sin(Math.PI * input)) / 2f).toFloat()
    }
}

// activity 中具体实现
private fun interlatorAni() {
        val animator = ObjectAnimator.ofFloat(tv_interpolator, "translationX", tv_interpolator.translationX,300f,tv_interpolator.translationX)
        animator.duration = 3000
        animator.interpolator = DecelerateAccelerateInterpolator()
        animator.start()
}

Custom estimator

TypeEvaluator interface and override evaluate() method

public interface TypeEvaluator<T> {
   // fraction 代表时间流逝的百分比
   public T evaluate(float fraction, T startValue, T endValue);
}

Instance

Define a parabolic trajectory estimator

// 建Point类用来保存坐标信息，Point对象即是我们要操作的对象
data class Point(val x: Float, val y: Float)

// 自定义估值算法 PointTypeEvaluator并制定泛型为Point类型，
// 在 evaluate方法 中进行估值算法，为point对象的x和y赋值并将该对象返回
class PointTypeEvaluator : TypeEvaluator<Point> {
    override fun evaluate(fraction: Float, startValue: Point?, endValue: Point?): Point {
        // fraction 代表时间流逝的百分比
        val x = startValue?.x?.plus(fraction * (endValue?.x!!.minus(startValue.x)))
        val y = startValue?.y?.plus(fraction * (endValue?.y!!.minus(startValue.y)))
        return Point(x!!, y!!)
    }
}

// activity 中具体实现
 private fun clickLine() {
 
       // 调用 ValueAnimator.ofObject() 方法获得 ValueAnimator 对象，并传入 自定义估值器对象 和 Point的初始对象与终止对象
        val animator = ValueAnimator.ofObject(PointTypeEvaluator(), Point(0f, 0f), Point(300f, 300f))
        animator.duration = 3000
        
        // 线性插值器
        animator.interpolator = LinearInterpolator()
        
        // 设置 AnimatorUpdateListener 监听
        animator.addUpdateListener { ValueAnimator ->
            //可获得在估值算法中返回的Point对象，并为小球设置新的x和y值
            val point = ValueAnimator.animatedValue as Point
            iv_ball.x = point.x
            iv_ball.y = point.y
        }
        animator.start()
    }

summary

TimeInterpolator and TypeEvaluator are important means to realize non-uniform speed animation. Attribute animation is to animate the attribute. To realize the animation, the TimeInterpolator (interpolator) first calculates the percentage of the current attribute value change according to the percentage of time elapsed, and the interpolator returns this percentage. At this time, the work of the interpolator is completed. This requires the estimator to calculate the changed attribute value according to the percentage of the current attribute change. According to this attribute value, we can set the value of the current attribute.