1. 程式人生 > >Android 動畫:你真的會使用插值器與估值器嗎?(含詳細例項教學)

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

<?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();
        // 啟動動畫

效果圖

差值器.gif

2. 估值器(TypeEvaluator)

2.1 簡介

  • 定義:一個介面
  • 作用:設定 屬性值 從初始值過渡到結束值 的變化具體數值
    1. 插值器(Interpolator)決定 值 的變化規律(勻速、加速blabla),即決定的是變化趨勢;而接下來的具體變化數值則交給
      而估值器
    2. 屬性動畫特有的屬性

2.2 應用場景

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

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

2.3 具體使用

a. 設定方式

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

效果圖

FloatEvaluator
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

<?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. 總結

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