動畫之插值器和估值器

概念

插值器

• TimeInterpolator（時間插值器）

根據時間流逝的百分比計算出當前屬性值改變的百分比

• LinearInterpolator（線性插值器）

用於勻速動畫

• AccelerateDecelerateInterpolator（加速減速插值器）

動畫兩頭慢，中間快

• DecelerateInterpolator（減速插值器）

動畫越來越慢

還有其他系統內置插值器：CycleInterpolator(週期運動)、BounceInterpolator(最後階段彈球效果)、OvershootInterpolator(快速完成動畫，超出再回到結束樣式)、AnticipateInterpolator(先退後再加速前進)、AnticipateOvershootInterpolator(先退後再加速前進，超出終點後再回終點)

估值器

類型估值算法，即估值器。 根據當前屬性改變的百分比來計算改變後的屬性值。系統已有的估值器：IntEvaluator（針對整型屬性 ）、FloatEvaluator（針對浮點型屬性 ）、ArgbEvaluator（針對Color屬性）

實操

自定義插值器

自定義插值器需要實現 Interpolator / TimeInterpolator接口，複寫getInterpolation（）方法。補間動畫 實現 Interpolator接口；屬性動畫實現TimeInterpolator接口。

public interface Interpolator { 
   float getInterpolation(float input) {  
        // input值值變化範圍是0-1，且隨着動畫進度（0% - 100% ）均勻變化,即動畫開始時，input值 = 0；動畫結束時input = 1
        // 而中間的值則是隨着動畫的進度（0% - 100%）在0到1之間均勻增加
       return float型值；
   }
}
TimeInterpolator 接口同上

實例

定義一個減速加速插值器

// 減速加速插值器
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()
}

自定義估值器

TypeEvaluator 接口並且複寫 evaluate（）方法

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

實例

定義一個拋物線 軌跡 估值器

// 建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()
    }

小結

TimeInterpolator和TypeEvaluator是實現 非勻速動畫 的重要手段。屬性動畫是對屬性做動畫，屬性要實現動畫，首先由TimeInterpolator（插值器）根據時間流逝的百分比計算出當前屬性值改變的百分比，並且 插值器 將這個百分比返回，這個時候 插值器 的工作就完成了；這就需要 估值器 根據當前屬性改變的百分比來計算改變後的屬性值，根據這個屬性值，我們就可以設置當前屬性的值了。