Android 動畫：你真的會使用插值器與估值器嗎？（含詳細例項教學）

Carson_Ho發表於2017-06-27
Android動畫

前言

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

實現原理
實現原理

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

目錄

目錄
目錄

1. 插值器（Interpolator）

1.1 簡介

  • 定義：一個介面
  • 作用：設定 屬性值 從初始值過渡到結束值 的變化規律
    1. 如勻速、加速 & 減速 等等
    2. 即確定了 動畫效果變化的模式，如勻速變化、加速變化 等等

1.2 應用場景

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

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

1.3 具體使用

a. 設定方式

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

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


複製程式碼

設定方法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="" (2="" -="" math.sin(math.pi="" return="" result;="" 返回的result值="隨著動畫進度呈先減速後加速的變化趨勢" }<="" code="">=>複製程式碼

}

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();
        // 啟動動畫複製程式碼

效果圖

差值器.gif
差值器.gif

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型別的形式從初始值 - 結束值 進行過渡複製程式碼

效果圖

FloatEvaluator
FloatEvaluator

IntEvaluator
IntEvaluator

  • 如果上述內建的估值器無法滿足需求，還可以自定義估值器
    下面將介紹如何自定義插值器（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




    
複製程式碼

步驟5：在主程式碼檔案設定顯示檢視

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}複製程式碼

效果圖

效果圖
效果圖

原始碼地址

Carson_Ho的Github地址

3. 總結

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

相關文章