前言
TypeEvaluator的中文翻譯為類型估值算法,也叫估值器,它的作用是根據當前屬性改變的百分比來計算改變后的屬性值,系統預置的有IntEvaluator(針對整型屬性)、FloatEvaluator(針對浮點型數據)和ArgbEvaluator(針對Color屬性);
屬性動畫中的插值器(Interpolator)和估值器(TypeEvalutor)很重要,它們是實現非勻速動畫的重要手段;
之前我們已經較少過插值器了,今天我們來介紹下估值器;
一、估值器詳解
1、應用場景
- 插值器(Interpolator)決定值的變化規律(勻速、加速blabla),即決定的是變化趨勢,而接下來的具體變化數值則交給估值器;
- 屬性動畫特有的屬性;
- 非線性運動:動畫改變的速率不是一成不變的,如加速 & 減速運動都屬于非線性運動;
2、具體使用
2.1. 設置方式
- ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator(),1,3);
- // 在第4個參數中傳入對應估值器類的對象
- // 系統內置的估值器有3個:
- // IntEvaluator:以整型的形式從初始值 - 結束值 進行過渡
- // FloatEvaluator:以浮點型的形式從初始值 - 結束值 進行過渡
- // ArgbEvaluator:以Argb類型的形式從初始值 - 結束值 進行過渡
- 點型插值器:FloatEvaluator
- public class FloatEvaluator implements TypeEvaluator {
- // FloatEvaluator實現了TypeEvaluator接口
- // 重寫evaluate()
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數說明
- // fraction:表示動畫完成度(根據它來計算當前動畫的值)
- // startValue、endValue:動畫的初始值和結束值
- float startFloat = ((Number) startValue).floatValue();
- return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
- // 初始值 過渡 到結束值 的算法是:
- // 1. 用結束值減去初始值,算出它們之間的差值
- // 2. 用上述差值乘以fraction系數
- // 3. 再加上初始值,就得到當前動畫的值
- }
- }
- 屬性動畫中的ValueAnimator.ofInt() & ValueAnimator.ofFloat()都具備系統內置的估值器,即FloatEvaluator & IntEvaluator;
- 即系統已經默認實現了如何從初始值 過渡到結束值的邏輯;
2.2自定義估值器
- 本質:根據插值器計算出當前屬性值改變的百分比 & 初始值 & 結束值,來計算當前屬性具體的數值;
- 具體使用:自定義估值器需要實現 TypeEvaluator接口 & 復寫evaluate()
- public interface TypeEvaluator {
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數說明
- // fraction:插值器getInterpolation()的返回值
- // startValue:動畫的初始值
- // endValue:動畫的結束值
- ....// 估值器的計算邏輯
- return xxx;
- // 賦給動畫屬性的具體數值
- // 使用反射機制改變屬性變化
- // 特別注意
- // 那么插值器的input值 和 估值器fraction有什么關系呢
- // input的值決定了fraction的值:input值經過計算后傳入到插值器的getInterpolation(),然后通過實現getInterpolation()中的邏輯算法,根據input值來計算出一個返回值,而這個返回值就是fraction了
- }
- }
- // 實現TypeEvaluator接口
- public class ObjectEvaluator implements TypeEvaluator{
- // 復寫evaluate()
- // 在evaluate()里寫入對象動畫過渡的邏輯
- @Override
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數說明
- // fraction:表示動畫完成度(根據它來計算當前動畫的值)
- // startValue、endValue:動畫的初始值和結束值
- ... // 寫入對象動畫過渡的邏輯
- return value;
- // 返回對象動畫過渡的邏輯計算后的值
- }
3、自定義估值器
- ValueAnimator.ofObject(),從工作原理可以看出并沒有系統默認實現估值器,因為對對象的動畫操作復雜 & 多樣,系統無法知道如何從初始對象過度到結束對象;
- 因此,對于ValueAnimator.ofObject(),我們需自定義估值器(TypeEvaluator)來告知系統如何進行從初始對象過渡到結束對象的邏輯;
3.1定義對象
因為ValueAnimator.ofObject()是面向對象操作的,所以需要自定義對象類;
- public class Point {
- // 設置兩個變量用于記錄坐標的位置
- private float x;
- private float y;
- // 構造方法用于設置坐標
- public Point(float x, float y) {
- this.x = x;
- this.y = y;
- }
- // get方法用于獲取坐標
- public float getX() {
- return x;
- }
- public float getY() {
- return y;
- }
- }
3.2實現TypeEvaluator接口
實現TypeEvaluator接口的目的是自定義如何 從初始點坐標 過渡 到結束點坐標;
本例實現的是一個從左上角到右下角的坐標過渡邏輯。
// 實現TypeEvaluator接口
- public class PointEvaluator implements TypeEvaluator {
- // 復寫evaluate()
- // 在evaluate()里寫入對象動畫過渡的邏輯
- @Override
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 將動畫初始值startValue 和 動畫結束值endValue 強制類型轉換成Point對象
- Point startPoint = (Point) startValue;
- Point endPoint = (Point) endValue;
- // 根據fraction來計算當前動畫的x和y的值
- float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
- float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
- // 將計算后的坐標封裝到一個新的Point對象中并返回
- Point point = new Point(x, y);
- return point;
- }
- }
3.3屬性動畫作用到自定義View當中
- public class MyView extends View {
- // 設置需要用到的變量
- public static final float RADIUS = 70f;// 圓的半徑 = 70
- private Point currentPoint;// 當前點坐標
- private Paint mPaint;// 繪圖畫筆
- // 構造方法(初始化畫筆)
- public MyView(Context context, AttributeSet attrs) {
- super(context, attrs);
- // 初始化畫筆
- mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mPaint.setColor(Color.BLUE);
- }
- // 復寫onDraw()從而實現繪制邏輯
- // 繪制邏輯:先在初始點畫圓,通過監聽當前坐標值(currentPoint)的變化,每次變化都調用onDraw()重新繪制圓,從而實現圓的平移動畫效果
- @Override
- protected void onDraw(Canvas canvas) {
- // 如果當前點坐標為空(即第一次)
- if (currentPoint == null) {
- currentPoint = new Point(RADIUS, RADIUS);
- // 創建一個點對象(坐標是(70,70))
- // 在該點畫一個圓:圓心 = (70,70),半徑 = 70
- float x = currentPoint.getX();
- float y = currentPoint.getY();
- canvas.drawCircle(x, y, RADIUS, mPaint);
- // (重點關注)將屬性動畫作用到View中
- // 步驟1:創建初始動畫時的對象點 & 結束動畫時的對象點
- Point startPoint = new Point(RADIUS, RADIUS);// 初始點為圓心(70,70)
- Point endPoint = new Point(700, 1000);// 結束點為(700,1000)
- // 步驟2:創建動畫對象 & 設置初始值 和 結束值
- ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
- // 參數說明
- // 參數1:TypeEvaluator 類型參數 - 使用自定義的PointEvaluator(實現了TypeEvaluator接口)
- // 參數2:初始動畫的對象點
- // 參數3:結束動畫的對象點
- // 步驟3:設置動畫參數
- anim.setDuration(5000);
- // 設置動畫時長
- // 步驟3:通過 值 的更新監聽器,將改變的對象手動賦值給當前對象
- // 此處是將 改變后的坐標值對象 賦給 當前的坐標值對象
- // 設置 值的更新監聽器
- // 即每當坐標值(Point對象)更新一次,該方法就會被調用一次
- anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
- @Override
- public void onAnimationUpdate(ValueAnimator animation) {
- currentPoint = (Point) animation.getAnimatedValue();
- // 將每次變化后的坐標值(估值器PointEvaluator中evaluate()返回的Piont對象值)到當前坐標值對象(currentPoint)
- // 從而更新當前坐標值(currentPoint)
- // 步驟4:每次賦值后就重新繪制,從而實現動畫效果
- invalidate();
- // 調用invalidate()后,就會刷新View,即才能看到重新繪制的界面,即onDraw()會被重新調用一次
- // 所以坐標值每改變一次,就會調用onDraw()一次
- }
- });
- anim.start();
- // 啟動動畫
- } else {
- // 如果坐標值不為0,則畫圓
- // 所以坐標值每改變一次,就會調用onDraw()一次,就會畫一次圓,從而實現動畫效果
- // 在該點畫一個圓:圓心 = (30,30),半徑 = 30
- float x = currentPoint.getX();
- float y = currentPoint.getY();
- canvas.drawCircle(x, y, RADIUS, mPaint);
- }
- }
- }
原文鏈接:https://mp.weixin.qq.com/s/EF4SihTH1ZJ9uxSU6iROkA