前言

• 動畫的使用 是 Android 開發中常用的知識
• 可是動畫的種類繁多、使用複雜，每當需要 採用自定義動畫 實現 複雜的動畫效果時，很多開發者就顯得束手無策
• Android中 補間動畫 & 屬性動畫實現動畫的原理是：

• 其中，步驟2中的 插值器（Interpolator）和估值器（TypeEvaluator）是實現 複雜動畫效果的關鍵
• 本文主要講解 將詳細講解 插值器（Interpolator）和估值器（TypeEvaluator），通過閱讀本文你將能輕鬆實現複雜的動畫效果

目錄

1. 插值器（Interpolator）

1.1 簡介

• 定義：一個介面
• 作用：設定 屬性值 從初始值過渡到結束值 的變化規律
  

  1. 如勻速、加速 & 減速 等等
     
  2. 即確定了 動畫效果變化的模式，如勻速變化、加速變化 等等

1.2 應用場景

實現非線性運動的動畫效果

非線性運動：動畫改變的速率不是一成不變的，如加速 & 減速運動都屬於非線性運動

1.3 具體使用

a. 設定方式

插值器在動畫的使用有兩種方式：在XML / Java程式碼中設定：

設定方法1：在 動畫效果的XML程式碼中設定插值器屬性android:interpolator

<?xml version="1.0" encoding="utf-8"?>
 

<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/overshoot_interpolator"
    // 通過資源ID設定插值器
    android:duration="3000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2"
    android:toYScale
 
="2" />

設定方法2：在 Java 程式碼中設定

Button mButton = (Button) findViewById(R.id.Button);
        // 步驟1:建立 需要設定動畫的 檢視View

Animation alphaAnimation = new AlphaAnimation(1,0);
        // 步驟2：建立透明度動畫的物件 & 設定動畫效果

        alphaAnimation.setDuration(3000);
        Interpolator overshootInterpolator = new OvershootInterpolator();
        // 步驟3：建立對應的插值器類物件

        alphaAnimation.setInterpolator(overshootInterpolator);
        // 步驟4：給動畫設定插值器

        mButton.startAnimation(alphaAnimation);
        // 步驟5：播放動畫

• 那麼使用插值器時的資源ID是什麼呢？即有哪些型別的插值器可供我們使用呢？
• 下面將介紹 Android內建預設的插值器

b. 系統內建插值器型別

• Android內建了 9 種內建的插值器實現：

作用	資源ID	對應的Java類
動畫加速進行	@android:anim/accelerate_interpolator	AccelerateInterpolator
快速完成動畫，超出再回到結束樣式	@android:anim/overshoot_interpolator	OvershootInterpolator
先加速再減速	@android:anim/accelerate_decelerate_interpolator	AccelerateDecelerateInterpolator
先退後再加速前進	@android:anim/anticipate_interpolator	AnticipateInterpolator
先退後再加速前進，超出終點後再回終點	@android:anim/anticipate_overshoot_interpolator	AnticipateOvershootInterpolator
最後階段彈球效果	@android:anim/bounce_interpolator	BounceInterpolator
週期運動	@android:anim/cycle_interpolator	CycleInterpolator
減速	@android:anim/decelerate_interpolator	DecelerateInterpolator
勻速	@android:anim/linear_interpolator	LinearInterpolator

使用時：

• 當在XML檔案設定插值器時，只需傳入對應的插值器資源ID即可

• 當在Java程式碼設定插值器時，只需建立對應的插值器物件即可

  系統預設的插值器是AccelerateDecelerateInterpolator，即先加速後減速

• 系統內建插值器的效果圖：
  

• 使用Android內建的插值器能滿足大多數的動畫需求

• 如果上述9個插值器無法滿足需求，還可以自定義插值器
• 下面將介紹如何自定義插值器（Interpolator）

c. 自定義插值器

• 本質：根據動畫的進度（0%-100%）計算出當前屬性值改變的百分比
• 具體使用：自定義插值器需要實現 Interpolator / TimeInterpolator介面 & 複寫getInterpolation（）
  

  1. 補間動畫 實現 Interpolator介面；屬性動畫實現TimeInterpolator介面
     
  2. TimeInterpolator介面是屬性動畫中新增的，用於相容Interpolator介面，這使得所有過去的Interpolator實現類都可以直接在屬性動畫使用

// Interpolator介面
public interface Interpolator {  

    // 內部只有一個方法
     float getInterpolation(float input) {  
         // 引數說明
         // input值值變化範圍是0-1，且隨著動畫進度（0% - 100% ）均勻變化
        // 即動畫開始時，input值 = 0；動畫結束時input = 1
        // 而中間的值則是隨著動畫的進度（0% - 100%）在0到1之間均勻增加

      ...// 插值器的計算邏輯

      return xxx；
      // 返回的值就是用於估值器繼續計算的fraction值，下面會詳細說明
    }  

// TimeInterpolator介面
// 同上
public interface TimeInterpolator {  

    float getInterpolation(float input);  

}  

在學習自定義插值器前，我們先來看兩個已經實現好的系統內建差值器：

• 勻速插值器：LinearInterpolator
• 先加速再減速 插值器：AccelerateDecelerateInterpolator

// 勻速差值器：LinearInterpolator
@HasNativeInterpolator  
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {  
   // 僅貼出關鍵程式碼
  ...
    public float getInterpolation(float input) {  
        return input;  
        // 沒有對input值進行任何邏輯處理，直接返回
        // 即input值 = fraction值
        // 因為input值是勻速增加的，因此fraction值也是勻速增加的，所以動畫的運動情況也是勻速的，所以是勻速插值器
    }  


// 先加速再減速 差值器：AccelerateDecelerateInterpolator
@HasNativeInterpolator  
public class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
      // 僅貼出關鍵程式碼
  ...
    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
        // input的運算邏輯如下：
        // 使用了餘弦函式，因input的取值範圍是0到1，那麼cos函式中的取值範圍就是π到2π。
        // 而cos(π)的結果是-1，cos(2π)的結果是1
        // 所以該值除以2加上0.5後，getInterpolation()方法最終返回的結果值還是在0到1之間。只不過經過了餘弦運算之後，最終的結果不再是勻速增加的了，而是經歷了一個先加速後減速的過程
        // 所以最終，fraction值 = 運算後的值 = 先加速後減速
        // 所以該差值器是先加速再減速的
    }  


    }

• 從上面看出，自定義插值器的關鍵在於：對input值 根據動畫的進度（0%-100%）通過邏輯計算 計算出當前屬性值改變的百分比
• 下面我將用一個例項來說明該如何自定義插值器

例項

• 目的：寫一個自定義Interpolator：先減速後加速

步驟1：根據需求實現Interpolator介面
DecelerateAccelerateInterpolator.java

/**
 * Created by Carson_Ho on 17/4/19.
 */

public class DecelerateAccelerateInterpolator implements TimeInterpolator {

    @Override
    public float getInterpolation(float input) {
        float result;
        if (input <= 0.5) {
            result = (float) (Math.sin(Math.PI * input)) / 2;
            // 使用正弦函式來實現先減速後加速的功能，邏輯如下：
            // 因為正弦函式初始弧度變化值非常大，剛好和餘弦函式是相反的
            // 隨著弧度的增加，正弦函式的變化值也會逐漸變小，這樣也就實現了減速的效果。
            // 當弧度大於π/2之後，整個過程相反了過來，現在正弦函式的弧度變化值非常小，漸漸隨著弧度繼續增加，變化值越來越大，弧度到π時結束，這樣從0過度到π，也就實現了先減速後加速的效果
        } else {
            result = (float) (2 - Math.sin(Math.PI * input)) / 2;
        }
        return result;
        // 返回的result值 = 隨著動畫進度呈先減速後加速的變化趨勢
    }

}

MainActivity.java

 mButton = (Button) findViewById(R.id.Button);
        // 建立動畫作用物件：此處以Button為例

        float curTranslationX = mButton.getTranslationX();
        // 獲得當前按鈕的位置

        ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);
        // 建立動畫物件 & 設定動畫
        // 表示的是:
        // 動畫作用物件是mButton
        // 動畫作用的物件的屬性是X軸平移
        // 動畫效果是:從當前位置平移到 x=1500 再平移到初始位置
        animator.setDuration(5000);
        animator.setInterpolator(new DecelerateAccelerateInterpolator());
        // 設定插值器
        animator.start();
        // 啟動動畫

效果圖

2. 估值器（TypeEvaluator）

2.1 簡介

• 定義：一個介面
• 作用：設定 屬性值 從初始值過渡到結束值 的變化具體數值
  

  1. 插值器（Interpolator）決定 值 的變化規律（勻速、加速blabla），即決定的是變化趨勢；而接下來的具體變化數值則交給
     而估值器
     
  2. 屬性動畫特有的屬性

2.2 應用場景

協助插值器 實現非線性運動的動畫效果

非線性運動：動畫改變的速率不是一成不變的，如加速 & 減速運動都屬於非線性運動

2.3 具體使用

a. 設定方式

ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator()，1，3);
// 在第4個引數中傳入對應估值器類的物件
// 系統內建的估值器有3個：
// IntEvaluator：以整型的形式從初始值 - 結束值 進行過渡
// FloatEvaluator：以浮點型的形式從初始值 - 結束值 進行過渡
// ArgbEvaluator：以Argb型別的形式從初始值 - 結束值 進行過渡

效果圖

• 如果上述內建的估值器無法滿足需求，還可以自定義估值器
  下面將介紹如何自定義插值器（Interpolator）

b. 自定義估值器

• 本質：根據 插值器計算出當前屬性值改變的百分比 & 初始值 & 結束值 來計算 當前屬性具體的數值

  如：動畫進行了50%（初始值=100，結束值=200 ），那麼勻速插值器計算出了當前屬性值改變的百分比是50%，那麼估值器則負責計算當前屬性值 = 100 + （200-100）x50% = 150.

• 具體使用：自定義估值器需要實現 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了
    }  
}  

在學習自定義插值器前，我們先來看一個已經實現好的系統內建差值器：浮點型插值器：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
  

  即系統已經預設實現了 如何從初始值 過渡到 結束值 的邏輯

• 但對於ValueAnimator.ofObject（），從上面的工作原理可以看出並沒有系統預設實現，因為對物件的動畫操作複雜 & 多樣，系統無法知道如何從初始物件過度到結束物件
• 因此，對於ValueAnimator.ofObject（），我們需自定義估值器（TypeEvaluator）來告知系統如何進行從 初始物件 過渡到 結束物件的邏輯
• 自定義實現的邏輯如下

// 實現TypeEvaluator介面
public class ObjectEvaluator implements TypeEvaluator{  

// 複寫evaluate（）
// 在evaluate（）裡寫入物件動畫過渡的邏輯
    @Override  
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
        // 引數說明
        // fraction：表示動畫完成度（根據它來計算當前動畫的值）
        // startValue、endValue：動畫的初始值和結束值

        ... // 寫入物件動畫過渡的邏輯

        return value;  
        // 返回物件動畫過渡的邏輯計算後的值
    }  

例項說明

• 下面我將用例項說明 該如何自定義TypeEvaluator介面並通過ValueAnimator.ofObject（）實現動畫效果

• 實現的動畫效果：一個圓從一個點 移動到 另外一個點
  

• 工程目錄檔案如下：
  

步驟1：定義物件類

• 因為ValueAnimator.ofObject（）是面向物件操作的，所以需要自定義物件類。
• 本例需要操作的物件是 圓的點座標
  Point.java

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;
    }
}

步驟2：根據需求實現TypeEvaluator介面

• 實現TypeEvaluator介面的目的是自定義如何 從初始點座標 過渡 到結束點座標；
• 本例實現的是一個從左上角到右下角的座標過渡邏輯。
  

PointEvaluator.java

// 實現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;
    }

}

• 上面步驟是根據需求自定義TypeEvaluator的實現
• 下面將講解如何通過對 Point 物件進行動畫操作，從而實現整個自定義View的動畫效果。

步驟3：將屬性動畫作用到自定義View當中

MyView.java

/**
 * Created by Carson_Ho on 17/4/18.
 */
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);
        }
    }


}

步驟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：在主程式碼檔案設定顯示檢視

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

效果圖

原始碼地址

3. 總結

請幫頂或評論點贊！因為你們的贊同/鼓勵是我寫作的最大動力！