前言

動(dòng)畫的使用是 Android 開發(fā)中常用的知識(shí)
可是動(dòng)畫的種類繁多、使用復(fù)雜，每當(dāng)需要 采用自定義動(dòng)畫實(shí)現(xiàn) 復(fù)雜的動(dòng)畫效果時(shí)，很多開發(fā)者就顯得束手無策
Android中補(bǔ)間動(dòng)畫 & 屬性動(dòng)畫實(shí)現(xiàn)動(dòng)畫的原理是：

實(shí)現(xiàn)原理

其中，步驟2中的插值器（Interpolator）和估值器（TypeEvaluator）是實(shí)現(xiàn) 復(fù)雜動(dòng)畫效果的關(guān)鍵
本文將詳細(xì)講解估值器（TypeEvaluator），通過閱讀本文你將能輕松實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果

Carson帶你學(xué)Android動(dòng)畫系列文章：
Carson帶你學(xué)Android：一份全面&詳細(xì)的動(dòng)畫知識(shí)學(xué)習(xí)攻略
 Carson帶你學(xué)Android：常見的三種動(dòng)畫類型
 Carson帶你學(xué)Android：補(bǔ)間動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：屬性動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：逐幀動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：自定義動(dòng)畫神器-估值器(含實(shí)例教學(xué))
Carson帶你學(xué)Android：自定義動(dòng)畫神器-插值器(含實(shí)例教學(xué))

1. 簡(jiǎn)介

定義：一個(gè)接口
作用：設(shè)置屬性值從初始值過渡到結(jié)束值的變化具體數(shù)值

插值器（Interpolator）決定值的變化規(guī)律（勻速、加速blabla），即決定的是變化趨勢(shì)；而接下來的具體變化數(shù)值則交給估值器

屬性動(dòng)畫特有的屬性

2. 應(yīng)用場(chǎng)景

協(xié)助插值器實(shí)現(xiàn)非線性運(yùn)動(dòng)的動(dòng)畫效果

非線性運(yùn)動(dòng)：動(dòng)畫改變的速率不是一成不變的，如加速 & 減速運(yùn)動(dòng)都屬于非線性運(yùn)動(dòng)

3. 具體使用

設(shè)置方式如下：

ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator()，1，3);
// 在第4個(gè)參數(shù)中傳入對(duì)應(yīng)估值器類的對(duì)象
// 系統(tǒng)內(nèi)置的估值器有3個(gè)：
// IntEvaluator：以整型的形式從初始值 - 結(jié)束值 進(jìn)行過渡
// FloatEvaluator：以浮點(diǎn)型的形式從初始值 - 結(jié)束值 進(jìn)行過渡
// ArgbEvaluator：以Argb類型的形式從初始值 - 結(jié)束值 進(jìn)行過渡

效果圖：

FloatEvaluator

IntEvaluator

如果上述內(nèi)置的估值器無法滿足需求，還可以自定義估值器
下面將介紹如何自定義估值器（Interpolator）

4. 自定義估值器

4.1 本質(zhì)

根據(jù) 插值器計(jì)算出當(dāng)前屬性值改變的百分比 & 初始值 & 結(jié)束值來計(jì)算當(dāng)前屬性具體的數(shù)值

如：動(dòng)畫進(jìn)行了50%（初始值=100，結(jié)束值=200 ），那么勻速插值器計(jì)算出了當(dāng)前屬性值改變的百分比是50%，那么估值器則負(fù)責(zé)計(jì)算當(dāng)前屬性值 = 100 + （200-100）x50% = 150.

4.2 具體實(shí)現(xiàn)方式

自定義估值器需要實(shí)現(xiàn) TypeEvaluator接口 & 復(fù)寫evaluate()

// 步驟1：實(shí)現(xiàn)TypeEvaluator接口
    public class ObjectEvaluator implements TypeEvaluator{  

// 步驟2：復(fù)寫evaluate()
// 作用：估值器的計(jì)算邏輯，即寫入對(duì)象動(dòng)畫過渡的邏輯
    @Override  
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
        // 參數(shù)說明
        // fraction：表示動(dòng)畫完成度（根據(jù)它來計(jì)算當(dāng)前動(dòng)畫的值），也是插值器getInterpolation()的返回值
        // startValue：動(dòng)畫的初始值
        // endValue：動(dòng)畫的結(jié)束值

        // 估值器的計(jì)算邏輯
        ... 
        
        // 返回對(duì)象動(dòng)畫過渡邏輯計(jì)算后的值
        // 即賦給動(dòng)畫屬性的具體數(shù)值
        return value;  
    } 

// 特別注意
// 那么插值器的input值 和 估值器fraction有什么關(guān)系呢？
// 答：input的值決定了fraction的值：input值經(jīng)過計(jì)算后傳入到插值器的getInterpolation（），然后通過實(shí)現(xiàn)getInterpolation（）中的邏輯算法，根據(jù)input值來計(jì)算出一個(gè)返回值，而這個(gè)返回值就是fraction了

在學(xué)習(xí)自定義估值器前，我們先來看一個(gè)已經(jīng)實(shí)現(xiàn)好的系統(tǒng)內(nèi)置差值器：浮點(diǎn)型估值器器：FloatEvaluator

// 步驟1：FloatEvaluator實(shí)現(xiàn)了TypeEvaluator接口
public class FloatEvaluator implements TypeEvaluator {  

// 步驟2：重寫evaluate()
    public Object evaluate(float fraction, Object startValue, Object endValue) { 

        // 初始值過渡到結(jié)束值 的算法是：
        // 1. 用結(jié)束值減去初始值，算出它們之間的差值
        // 2. 用上述差值乘以fraction系數(shù)
        // 3. 再加上初始值，就得到當(dāng)前動(dòng)畫的值
        float startFloat = ((Number) startValue).floatValue();  
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);  
    }  
}

屬性動(dòng)畫中的ValueAnimator.ofInt（） & ValueAnimator.ofFloat（）都具備系統(tǒng)內(nèi)置的估值器，即FloatEvaluator & IntEvaluator，即系統(tǒng)已經(jīng)默認(rèn)實(shí)現(xiàn)了 如何從初始值過渡到結(jié)束值的邏輯

但對(duì)于ValueAnimator.ofObject（），從上面的工作原理可以看出并沒有系統(tǒng)默認(rèn)實(shí)現(xiàn)，因?yàn)閷?duì)對(duì)象的動(dòng)畫操作復(fù)雜 & 多樣，系統(tǒng)無法知道如何從初始對(duì)象過度到結(jié)束對(duì)象

因此，對(duì)于ValueAnimator.ofObject（），我們需自定義估值器（TypeEvaluator）來告知系統(tǒng)如何進(jìn)行從初始對(duì)象過渡到結(jié)束對(duì)象的邏輯。

5. 實(shí)例說明

下面我將用實(shí)例說明該如何自定義TypeEvaluator接口并通過ValueAnimator.ofObject（）實(shí)現(xiàn)動(dòng)畫效果
實(shí)現(xiàn)的動(dòng)畫效果：一個(gè)圓從一個(gè)點(diǎn) 移動(dòng)到另外一個(gè)點(diǎn)

效果圖
工程目錄文件如下：

工程目錄

步驟1：定義對(duì)象類

因?yàn)?code>ValueAnimator.ofObject（）是面向?qū)ο蟛僮鞯模孕枰远x對(duì)象類。
本例需要操作的對(duì)象是 圓的點(diǎn)坐標(biāo)
Point.java

public class Point {

    // 設(shè)置兩個(gè)變量用于記錄坐標(biāo)的位置
    private float x;
    private float y;

    // 構(gòu)造方法用于設(shè)置坐標(biāo)
    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    // get方法用于獲取坐標(biāo)
    public float getX() {
        return x;
    }

    public float getY() {
        return y;
    }
}

步驟2：根據(jù)需求實(shí)現(xiàn)TypeEvaluator接口

實(shí)現(xiàn)TypeEvaluator接口的目的是自定義如何從初始點(diǎn)坐標(biāo) 過渡到結(jié)束點(diǎn)坐標(biāo)；
本例實(shí)現(xiàn)的是一個(gè)從左上角到右下角的坐標(biāo)過渡邏輯。

效果圖

PointEvaluator.java

// 實(shí)現(xiàn)TypeEvaluator接口
public class PointEvaluator implements TypeEvaluator {

    // 復(fù)寫evaluate（）
    // 在evaluate（）里寫入對(duì)象動(dòng)畫過渡的邏輯
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        // 將動(dòng)畫初始值startValue 和 動(dòng)畫結(jié)束值endValue 強(qiáng)制類型轉(zhuǎn)換成Point對(duì)象
        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

        // 根據(jù)fraction來計(jì)算當(dāng)前動(dòng)畫的x和y的值
        float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
        float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
        
        // 將計(jì)算后的坐標(biāo)封裝到一個(gè)新的Point對(duì)象中并返回
        Point point = new Point(x, y);
        return point;
    }

}

上面步驟是根據(jù)需求自定義TypeEvaluator的實(shí)現(xiàn)
下面將講解如何通過對(duì) Point 對(duì)象進(jìn)行動(dòng)畫操作，從而實(shí)現(xiàn)整個(gè)自定義View的動(dòng)畫效果。

步驟3：將屬性動(dòng)畫作用到自定義View當(dāng)中

MyView.java

/**
 * Created by Carson_Ho on 17/4/18.
 */
public class MyView extends View {
    // 設(shè)置需要用到的變量
    public static final float RADIUS = 70f;// 圓的半徑 = 70
    private Point currentPoint;// 當(dāng)前點(diǎn)坐標(biāo)
    private Paint mPaint;// 繪圖畫筆
    

    // 構(gòu)造方法(初始化畫筆)
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化畫筆
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

    // 復(fù)寫onDraw()從而實(shí)現(xiàn)繪制邏輯
    // 繪制邏輯:先在初始點(diǎn)畫圓,通過監(jiān)聽當(dāng)前坐標(biāo)值(currentPoint)的變化,每次變化都調(diào)用onDraw()重新繪制圓,從而實(shí)現(xiàn)圓的平移動(dòng)畫效果
    @Override
    protected void onDraw(Canvas canvas) {
        // 如果當(dāng)前點(diǎn)坐標(biāo)為空(即第一次)
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            // 創(chuàng)建一個(gè)點(diǎn)對(duì)象(坐標(biāo)是(70,70))

            // 在該點(diǎn)畫一個(gè)圓:圓心 = (70,70),半徑 = 70
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);


 // (重點(diǎn)關(guān)注)將屬性動(dòng)畫作用到View中
            // 步驟1:創(chuàng)建初始動(dòng)畫時(shí)的對(duì)象點(diǎn)  & 結(jié)束動(dòng)畫時(shí)的對(duì)象點(diǎn)
            Point startPoint = new Point(RADIUS, RADIUS);// 初始點(diǎn)為圓心(70,70)
            Point endPoint = new Point(700, 1000);// 結(jié)束點(diǎn)為(700,1000)

            // 步驟2:創(chuàng)建動(dòng)畫對(duì)象 & 設(shè)置初始值 和 結(jié)束值
            ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
            // 參數(shù)說明
            // 參數(shù)1：TypeEvaluator 類型參數(shù) - 使用自定義的PointEvaluator(實(shí)現(xiàn)了TypeEvaluator接口)
            // 參數(shù)2：初始動(dòng)畫的對(duì)象點(diǎn)
            // 參數(shù)3：結(jié)束動(dòng)畫的對(duì)象點(diǎn)

            // 步驟3：設(shè)置動(dòng)畫參數(shù)
            anim.setDuration(5000);
            // 設(shè)置動(dòng)畫時(shí)長(zhǎng)

// 步驟3：通過 值 的更新監(jiān)聽器，將改變的對(duì)象手動(dòng)賦值給當(dāng)前對(duì)象
// 此處是將 改變后的坐標(biāo)值對(duì)象 賦給 當(dāng)前的坐標(biāo)值對(duì)象
            // 設(shè)置 值的更新監(jiān)聽器
            // 即每當(dāng)坐標(biāo)值（Point對(duì)象）更新一次,該方法就會(huì)被調(diào)用一次
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    currentPoint = (Point) animation.getAnimatedValue();
                    // 將每次變化后的坐標(biāo)值（估值器PointEvaluator中evaluate（）返回的Piont對(duì)象值）到當(dāng)前坐標(biāo)值對(duì)象（currentPoint）
                    // 從而更新當(dāng)前坐標(biāo)值（currentPoint）

// 步驟4：每次賦值后就重新繪制，從而實(shí)現(xiàn)動(dòng)畫效果
                    invalidate();
                    // 調(diào)用invalidate()后,就會(huì)刷新View,即才能看到重新繪制的界面,即onDraw()會(huì)被重新調(diào)用一次
                    // 所以坐標(biāo)值每改變一次,就會(huì)調(diào)用onDraw()一次
                }
            });

            anim.start();
            // 啟動(dòng)動(dòng)畫


        } else {
            // 如果坐標(biāo)值不為0,則畫圓
            // 所以坐標(biāo)值每改變一次,就會(huì)調(diào)用onDraw()一次,就會(huì)畫一次圓,從而實(shí)現(xiàn)動(dòng)畫效果

            // 在該點(diǎn)畫一個(gè)圓:圓心 = (30,30),半徑 = 30
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);
        }
    }


}

步驟4：在布局文件加入自定義View空間

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="scut.carson_ho.valueanimator_ofobject.MainActivity">

    <scut.carson_ho.valueanimator_ofobject.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
</RelativeLayout>

步驟5：在主代碼文件設(shè)置顯示視圖

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

效果圖

源碼地址

Carson_Ho的Github地址

6. 與插值器的區(qū)別

估值器和插值器很多人容易混淆，具體區(qū)別如下：

示意圖

7. 總結(jié)

本文對(duì)Android 動(dòng)畫中的估值器使用進(jìn)行了詳細(xì)分析，相信通過本文你已經(jīng)能實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果
Carson帶你學(xué)Android動(dòng)畫系列文章：
Carson帶你學(xué)Android：一份全面&詳細(xì)的動(dòng)畫知識(shí)學(xué)習(xí)攻略
 Carson帶你學(xué)Android：常見的三種動(dòng)畫類型
 Carson帶你學(xué)Android：補(bǔ)間動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：屬性動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：逐幀動(dòng)畫學(xué)習(xí)教程
 Carson帶你學(xué)Android：自定義動(dòng)畫神器-估值器(含實(shí)例教學(xué))
Carson帶你學(xué)Android：自定義動(dòng)畫神器-插值器(含實(shí)例教學(xué))

歡迎關(guān)注Carson_Ho的簡(jiǎn)書

不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

請(qǐng)點(diǎn)贊！因?yàn)槟愕墓膭?lì)是我寫作的最大動(dòng)力！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Android動(dòng)畫：深入解析插值器(TypeEvaluator) (含實(shí)例教學(xué))

Android動(dòng)畫：深入解析插值器(TypeEvaluator) (含實(shí)例教學(xué))

前言

目錄

1. 簡(jiǎn)介

2. 應(yīng)用場(chǎng)景

3. 具體使用

4. 自定義估值器

4.1 本質(zhì)

4.2 具體實(shí)現(xiàn)方式

5. 實(shí)例說明

步驟1：定義對(duì)象類

步驟2：根據(jù)需求實(shí)現(xiàn)TypeEvaluator接口

步驟3：將屬性動(dòng)畫作用到自定義View當(dāng)中

步驟4：在布局文件加入自定義View空間

步驟5：在主代碼文件設(shè)置顯示視圖

效果圖

源碼地址

6. 與插值器的區(qū)別

7. 總結(jié)

歡迎關(guān)注Carson_Ho的簡(jiǎn)書

請(qǐng)點(diǎn)贊！因?yàn)槟愕墓膭?lì)是我寫作的最大動(dòng)力！

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Android動(dòng)畫：深入解析插值器(TypeEvaluator) (含實(shí)例教學(xué))

前言

目錄

1. 簡(jiǎn)介

2. 應(yīng)用場(chǎng)景

3. 具體使用

4. 自定義估值器

4.1 本質(zhì)

4.2 具體實(shí)現(xiàn)方式

5. 實(shí)例說明

步驟1：定義對(duì)象類

步驟2：根據(jù)需求實(shí)現(xiàn)TypeEvaluator接口

步驟3：將屬性動(dòng)畫作用到自定義View當(dāng)中

步驟4：在布局文件加入自定義View空間

步驟5：在主代碼文件設(shè)置顯示視圖

效果圖

源碼地址

6. 與插值器的區(qū)別

7. 總結(jié)

歡迎關(guān)注Carson_Ho的簡(jiǎn)書

請(qǐng)點(diǎn)贊！因?yàn)槟愕墓膭?lì)是我寫作的最大動(dòng)力！

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频