Android屬性動畫使用(下)

  1. 屬性動畫出現的原因

屬性動畫(Property Animation)是在 Android 3.0(API 11)后才提供的一種全新動畫模式
那么為什么要提供屬性動畫(Property Animation)?
1.1 背景

實現動畫效果在Android開發中非常常見,因此Android系統一開始就提供了兩種實現動畫的方式:

逐幀動畫(Frame Animation)
補間動畫( Tweened animation )
1.2 問題

逐幀動畫 & 補間動畫存在一定的缺點:

a. 作用對象局限:View

即補間動畫 只能夠作用在視圖View上,即只可以對一個Button、TextView、甚至是LinearLayout、或者其它繼承自View的組件進行動畫操作,但無法對非View的對象進行動畫操作

有些情況下的動畫效果只是視圖的某個屬性 & 對象而不是整個視圖;
如,現需要實現視圖的顏色動態變化,那么就需要操作視圖的顏色屬性從而實現動畫效果,而不是針對整個視圖進行動畫操作
b. 沒有改變View的屬性,只是改變視覺效果

補間動畫只是改變了View的視覺效果,而不會真正去改變View的屬性。
如,將屏幕左上角的按鈕 通過補間動畫 移動到屏幕的右下角
點擊當前按鈕位置(屏幕右下角)是沒有效果的,因為實際上按鈕還是停留在屏幕左上角,補間動畫只是將這個按鈕繪制到屏幕右下角,改變了視覺效果而已。
c. 動畫效果單一

補間動畫只能實現平移、旋轉、縮放 & 透明度這些簡單的動畫需求
一旦遇到相對復雜的動畫效果,即超出了上述4種動畫效果,那么補間動畫則無法實現。
即在功能 & 可擴展性有較大局限性
1.3 問題

為了解決補間動畫的缺陷,在 Android 3.0(API 11)開始,系統提供了一種全新的動畫模式:屬性動畫(Property Animation)
下面,我將全面介紹屬性動畫(Property Animation)

  1. 簡介

作用對象:任意 Java 對象
不再局限于 視圖View對象
實現的動畫效果:可自定義各種動畫效果
不再局限于4種基本變換:平移、旋轉、縮放 & 透明度

  1. 特點

作用對象進行了擴展:不只是View對象,甚至沒對象也可以
動畫效果:不只是4種基本變換,還有其他動畫效果
作用領域:API11后引入的

  1. 工作原理

在一定時間間隔內,通過不斷對值進行改變,并不斷將該值賦給對象的屬性,從而實現該對象在該屬性上的動畫效果
可以是任意對象的任意屬性
具體的工作原理邏輯如下:

這里寫圖片描述

從上述工作原理可以看出屬性動畫有兩個非常重要的類:ValueAnimator 類 & ObjectAnimator 類
其實屬性動畫的使用基本都是依靠這兩個類
所以,在下面介紹屬性動畫的具體使用時,我會著重介紹這兩個類。
2.ObjectAnimator類
2.1實現動畫的原理
如直接改變 View的 alpha 屬性 從而實現透明度的動畫效果
繼承自ValueAnimator類,即底層的動畫實現機制是基于ValueAnimator類

本質原理: 通過不斷控制 值 的變化,再不斷 自動 賦給對象的屬性,從而實現動畫效果。如下圖:


這里寫圖片描述

從上面的工作原理可以看出:ObjectAnimator與 ValueAnimator類的區別:

ValueAnimator 類是先改變值,然后 手動賦值 給對象的屬性從而實現動畫;是 間接 對對象屬性進行操作;
ObjectAnimator 類是先改變值,然后 自動賦值 給對象的屬性從而實現動畫;是 直接 對對象屬性進行操作;
至于是如何自動賦值給對象的屬性,下面會詳細說明

2.2具體使用
由于是繼承了ValueAnimator類,所以使用的方法十分類似:XML 設置 / Java設置

設置方式1:Java 設置

ObjectAnimator animator = ObjectAnimator.ofFloat(Object object, String property, float ....values);

// ofFloat()作用有兩個
// 1. 創建動畫實例
// 2. 參數設置:參數說明如下
// Object object:需要操作的對象
// String property:需要操作的對象的屬性
// float ....values:動畫初始值 & 結束值(不固定長度)
// 若是兩個參數a,b,則動畫效果則是從屬性的a值到b值
// 若是三個參數a,b,c,則則動畫效果則是從屬性的a值到b值再到c值
// 以此類推
// 至于如何從初始值 過渡到 結束值,同樣是由估值器決定,此處ObjectAnimator.ofFloat()是有系統內置的浮點型估值器FloatEvaluator,同ValueAnimator講解

anim.setDuration(500);
// 設置動畫運行的時長

    anim.setStartDelay(500);
    // 設置動畫延遲播放時間

    anim.setRepeatCount(0);
    // 設置動畫重復播放次數 = 重放次數+1
    // 動畫播放次數 = infinite時,動畫無限重復

    anim.setRepeatMode(ValueAnimator.RESTART);
    // 設置重復播放動畫模式
    // ValueAnimator.RESTART(默認):正序重放
    // ValueAnimator.REVERSE:倒序回放

animator.start();
// 啟動動畫

設置方法2:在XML 代碼中設置

// ObjectAnimator 采用<animator> 標簽
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="1" // 初始值
android:valueTo="0" // 結束值
android:valueType="floatType" // 變化值類型 :floatType & intType
android:propertyName="alpha" // 對象變化的屬性名稱

/>

在Java代碼中啟動動畫

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.view_animation);
// 載入XML動畫

animator.setTarget(view);
// 設置動畫對象

animator.start();
// 啟動動畫

問題:那么ofFloat()的第二個參數還能傳入什么屬性值呢?
答案:任意屬性值。因為:

ObjectAnimator 類 對 對象屬性值 進行改變從而實現動畫效果的本質是:通過不斷控制 值 的變化,再不斷 自動 賦給對象的屬性,從而實現動畫效果

這里寫圖片描述

而 自動賦給對象的屬性的本質是調用該對象屬性的set() & get()方法進行賦值
所以,ObjectAnimator.ofFloat(Object object, String property, float ....values)的第二個參數傳入值的作用是:讓ObjectAnimator類根據傳入的屬性名 去尋找 該對象對應屬性名的 set() & get()方法,從而進行對象屬性值的賦值,如上面的例子:
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "rotation", 0f, 360f);
// 其實Button對象中并沒有rotation這個屬性值
// ObjectAnimator并不是直接對我們傳入的屬性名進行操作
// 而是根據傳入的屬性值"rotation" 去尋找對象對應屬性名對應的get和set方法,從而通過set() & get()對屬性進行賦值

// 因為Button對象中有rotation屬性所對應的get & set方法
// 所以傳入的rotation屬性是有效的
// 所以才能對rotation這個屬性進行操作賦值
public void setRotation(float value);
public float getRotation();

// 實際上,這兩個方法是由View對象提供的,所以任何繼承自View的對象都具備這個屬性

至于是如何進行自動賦值的,我們直接來看源碼分析:

// 使用方法
ObjectAnimator animator = ObjectAnimator.ofFloat(Object object, String property, float ....values);
anim.setDuration(500);
animator.start();
// 啟動動畫,源碼分析就直接從start()開始

<-- start() -->
@Override
public void start() {
AnimationHandler handler = sAnimationHandler.get();

if (handler != null) {  
    // 判斷等待動畫(Pending)中是否有和當前動畫相同的動畫,如果有就把相同的動畫給取消掉 
    numAnims = handler.mPendingAnimations.size();  
    for (int i = numAnims - 1; i >= 0; i--) {  
        if (handler.mPendingAnimations.get(i) instanceof ObjectAnimator) {  
            ObjectAnimator anim = (ObjectAnimator) handler.mPendingAnimations.get(i);  
            if (anim.mAutoCancel && hasSameTargetAndProperties(anim)) {  
                anim.cancel();  
            }  
        }  
    }  
  // 判斷延遲動畫(Delay)中是否有和當前動畫相同的動畫,如果有就把相同的動畫給取消掉 
    numAnims = handler.mDelayedAnims.size();  
    for (int i = numAnims - 1; i >= 0; i--) {  
        if (handler.mDelayedAnims.get(i) instanceof ObjectAnimator) {  
            ObjectAnimator anim = (ObjectAnimator) handler.mDelayedAnims.get(i);  
            if (anim.mAutoCancel && hasSameTargetAndProperties(anim)) {  
                anim.cancel();  
            }  
        }  
    }  
}  

super.start();  

// 調用父類的start()
// 因為ObjectAnimator類繼承ValueAnimator類,所以調用的是ValueAnimator的star()
// 經過層層調用,最終會調用到 自動賦值給對象屬性值的方法
// 下面就直接看該部分的方法
}

<-- 自動賦值給對象屬性值的邏輯方法 ->>

// 步驟1:初始化動畫值
private void setupValue(Object target, Keyframe kf) {
if (mProperty != null) {
kf.setValue(mProperty.get(target));
// 初始化時,如果屬性的初始值沒有提供,則調用屬性的get()進行取值
}
kf.setValue(mGetter.invoke(target));
}
}

// 步驟2:更新動畫值
// 當動畫下一幀來時(即動畫更新的時候),setAnimatedValue()都會被調用
void setAnimatedValue(Object target) {
if (mProperty != null) {
mProperty.set(target, getAnimatedValue());
// 內部調用對象該屬性的set()方法,從而從而將新的屬性值設置給對象屬性
}

}
自動賦值的邏輯:

初始化時,如果屬性的初始值沒有提供,則調用屬性的 get()進行取值;
當 值 變化時,用對象該屬性的 set()方法,從而從而將新的屬性值設置給對象屬性。
所以:

ObjectAnimator 類針對的是任意對象 & 任意屬性值,并不是單單針對于View對象
如果需要采用ObjectAnimator 類實現動畫效果,那么需要操作的對象就必須有該屬性的set() & get()
同理,針對上述另外的三種基本動畫效果,View 也存在著setRotation()、getRotation()、setTranslationX()、getTranslationX()、setScaleY()、getScaleY()等set() & get() 。

2.3 通過自定義對象屬性實現動畫效果

對于屬性動畫,其拓展性在于:不局限于系統限定的動畫,可以自定義動畫,即自定義對象的屬性,并通過操作自定義的屬性從而實現動畫。

那么,該如何自定義屬性呢?本質上,就是:

為對象設置需要操作屬性的set() & get()方法
通過實現TypeEvaluator類從而定義屬性變化的邏輯
類似于ValueAnimator的過程
下面,我將用一個實例來說明如何通過自定義屬性實現動畫效果

實現的動畫效果:一個圓的顏色漸變

這里寫圖片描述

自定義屬性的邏輯如下:(需要自定義屬性為圓的背景顏色)

這里寫圖片描述

步驟1:設置對象類屬性的set() & get()方法

設置對象類屬性的set() & get()有兩種方法:

通過繼承原始類,直接給類加上該屬性的 get()& set(),從而實現給對象加上該屬性的 get()& set()

通過包裝原始動畫對象,間接給對象加上該屬性的 get()&
set()。即 用一個類來包裝原始對象

此處主要使用第一種方式進行展示。

關于第二種方式的使用,會在下一節進行詳細介紹。

MyView2.java

public class MyView2 extends View {
// 設置需要用到的變量
public static final float RADIUS = 100f;// 圓的半徑 = 100
private Paint mPaint;// 繪圖畫筆

private String color;
// 設置背景顏色屬性

// 設置背景顏色的get() & set()方法
public String getColor() {
    return color;
}

public void setColor(String color) {
    this.color = color;
    mPaint.setColor(Color.parseColor(color));
    // 將畫筆的顏色設置成方法參數傳入的顏色
    invalidate();
    // 調用了invalidate()方法,即畫筆顏色每次改變都會刷新視圖,然后調用onDraw()方法重新繪制圓
    // 而因為每次調用onDraw()方法時畫筆的顏色都會改變,所以圓的顏色也會改變
}


// 構造方法(初始化畫筆)
public MyView2(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) {
    canvas.drawCircle(500, 500, RADIUS, mPaint);
}

}

步驟2:在布局文件加入自定義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.MyView2
    android:id="@+id/MyView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     />

</RelativeLayout>

步驟3:根據需求實現TypeEvaluator接口

ColorEvaluator.java

public class ColorEvaluator implements TypeEvaluator {
// 實現TypeEvaluator接口

private int mCurrentRed;

private int mCurrentGreen ;

private int mCurrentBlue ;

// 復寫evaluate()
// 在evaluate()里寫入對象動畫過渡的邏輯:此處是寫顏色過渡的邏輯
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {

    // 獲取到顏色的初始值和結束值
    String startColor = (String) startValue;
    String endColor = (String) endValue;

    // 通過字符串截取的方式將初始化顏色分為RGB三個部分,并將RGB的值轉換成十進制數字
    // 那么每個顏色的取值范圍就是0-255
    int startRed = Integer.parseInt(startColor.substring(1, 3), 16);
    int startGreen = Integer.parseInt(startColor.substring(3, 5), 16);
    int startBlue = Integer.parseInt(startColor.substring(5, 7), 16);

    int endRed = Integer.parseInt(endColor.substring(1, 3), 16);
    int endGreen = Integer.parseInt(endColor.substring(3, 5), 16);
    int endBlue = Integer.parseInt(endColor.substring(5, 7), 16);

    // 將初始化顏色的值定義為當前需要操作的顏色值
        mCurrentRed = startRed;
        mCurrentGreen = startGreen;
        mCurrentBlue = startBlue;


    // 計算初始顏色和結束顏色之間的差值
    // 該差值決定著顏色變化的快慢:初始顏色值和結束顏色值很相近,那么顏色變化就會比較緩慢;否則,變化則很快
    // 具體如何根據差值來決定顏色變化快慢的邏輯寫在getCurrentColor()里.
    int redDiff = Math.abs(startRed - endRed);
    int greenDiff = Math.abs(startGreen - endGreen);
    int blueDiff = Math.abs(startBlue - endBlue);
    int colorDiff = redDiff + greenDiff + blueDiff;
    if (mCurrentRed != endRed) {
        mCurrentRed = getCurrentColor(startRed, endRed, colorDiff, 0,
                fraction);
                // getCurrentColor()決定如何根據差值來決定顏色變化的快慢 ->>關注1
    } else if (mCurrentGreen != endGreen) {
        mCurrentGreen = getCurrentColor(startGreen, endGreen, colorDiff,
                redDiff, fraction);
    } else if (mCurrentBlue != endBlue) {
        mCurrentBlue = getCurrentColor(startBlue, endBlue, colorDiff,
                redDiff + greenDiff, fraction);
    }
    // 將計算出的當前顏色的值組裝返回
    String currentColor = "#" + getHexString(mCurrentRed)
            + getHexString(mCurrentGreen) + getHexString(mCurrentBlue);

    // 由于我們計算出的顏色是十進制數字,所以需要轉換成十六進制字符串:調用getHexString()->>關注2
    // 最終將RGB顏色拼裝起來,并作為最終的結果返回
    return currentColor;
}


// 關注1:getCurrentColor()
// 具體是根據fraction值來計算當前的顏色。

private int getCurrentColor(int startColor, int endColor, int colorDiff,
                            int offset, float fraction) {
    int currentColor;
    if (startColor > endColor) {
        currentColor = (int) (startColor - (fraction * colorDiff - offset));
        if (currentColor < endColor) {
            currentColor = endColor;
        }
    } else {
        currentColor = (int) (startColor + (fraction * colorDiff - offset));
        if (currentColor > endColor) {
            currentColor = endColor;
        }
    }
    return currentColor;
}

// 關注2:將10進制顏色值轉換成16進制。
private String getHexString(int value) {
    String hexString = Integer.toHexString(value);
    if (hexString.length() == 1) {
        hexString = "0" + hexString;
    }
    return hexString;
}

}

步驟4:調用ObjectAnimator.ofObject()方法

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    myView2 = (MyView2) findViewById(R.id.MyView2);
    ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "color", new ColorEvaluator(),
            "#0000FF", "#FF0000");
    // 設置自定義View對象、背景顏色屬性值 & 顏色估值器
    // 本質邏輯:
    // 步驟1:根據顏色估值器不斷 改變 值 
    // 步驟2:調用set()設置背景顏色的屬性值(實際上是通過畫筆進行顏色設置)
    // 步驟3:調用invalidate()刷新視圖,即調用onDraw()重新繪制,從而實現動畫效果

    anim.setDuration(8000);
    anim.start();
}

}
效果圖


這里寫圖片描述

2.4 特別注意:如何手動設置對象類屬性的 set() & get()

a. 背景

ObjectAnimator 類 自動賦給對象的屬性 的本質是調用該對象屬性的set() & get()方法進行賦值
所以,ObjectAnimator.ofFloat(Object object, String property, float ....values)的第二個參數傳入值的作用是:讓ObjectAnimator類根據傳入的屬性名 去尋找 該對象對應屬性名的 set() & get()方法,從而進行對象屬性值的賦值
從上面的原理可知,如果想讓對象的屬性a的動畫生效,屬性a需要同時滿足下面兩個條件:

對象必須要提供屬性a的set()方法
a. 如果沒傳遞初始值,那么需要提供get()方法,因為系統要去拿屬性a的初始值
b. 若該條件不滿足,程序直接Crash
對象提供的 屬性a的set()方法 對 屬性a的改變 必須通過某種方法反映出來
a. 如帶來ui上的變化
b. 若這條不滿足,動畫無效,但不會Crash)
上述條件,一般第二條都會滿足,主要是在第一條

比如說:由于View的setWidth()并不是設置View的寬度,而是設置View的最大寬度和最小寬度的;所以通過setWidth()無法改變控件的寬度;所以對View視圖的width做屬性動畫沒有效果
具體請看下面Button按鈕的例子
Button mButton = (Button) findViewById(R.id.Button);
// 創建動畫作用對象:此處以Button為例
// 此Button的寬高設置具體為具體寬度200px

           ObjectAnimator.ofInt(mButton, "width", 500).setDuration(5000).start();
             // 設置動畫的對象

效果圖

這里寫圖片描述

為什么沒有動畫效果呢?我們來看View 的 setWidth方法
public void setWidth(int pixels) {
mMaxWidth = mMinWidth = pixels;
mMaxWidthMode = mMinWidthMode = PIXELS;
// 因為setWidth()并不是設置View的寬度,而是設置Button的最大寬度和最小寬度的
// 所以通過setWidth()無法改變控件的寬度
// 所以對width屬性做屬性動畫沒有效果

requestLayout();  
invalidate();  

}

@ViewDebug.ExportedProperty(category = "layout")
public final int getWidth() {
return mRight - mLeft;
// getWidth的確是獲取View的寬度
}

b. 問題

那么,針對上述對象屬性的set()不是設置屬性 或 根本沒有set() / get ()的情況應該如何處理?

c. 解決方案

手動設置對象類屬性的set() & get()。共有兩種方法:

通過繼承原始類,直接給類加上該屬性的 get()& set(),從而實現給對象加上該屬性的 get()& set()

通過包裝原始動畫對象,間接給對象加上該屬性的 get()&
set()。即 用一個類來包裝原始對象

對于第一種方法,在上面的例子已經說明;下面主要講解第二種方法:通過包裝原始動畫對象,間接給對象加上該屬性的get()& set()

本質上是采用了設計模式中的裝飾模式,即通過包裝類從而擴展對象的功能
還是采用上述 Button 按鈕的例子

public class MainActivity extends AppCompatActivity {
Button mButton;
ViewWrapper wrapper;

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

    mButton = (Button) findViewById(R.id.Button);
    // 創建動畫作用對象:此處以Button為例

    wrapper = new ViewWrapper(mButton);
    // 創建包裝類,并傳入動畫作用的對象
    
    mButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(3000).start();
            // 設置動畫的對象是包裝類的對象
        }
    });

}
// 提供ViewWrapper類,用于包裝View對象
// 本例:包裝Button對象
private static class ViewWrapper {
    private View mTarget;

    // 構造方法:傳入需要包裝的對象
    public ViewWrapper(View target) {
        mTarget = target;
    }

    // 為寬度設置get() & set()
    public int getWidth() {
        return mTarget.getLayoutParams().width;
    }

    public void setWidth(int width) {
        mTarget.getLayoutParams().width = width;
        mTarget.requestLayout();
    }

}

}
效果圖

這里寫圖片描述

4 總結

對比ValueAnimator類 & ObjectAnimator 類,其實二者都屬于屬性動畫,本質上都是一致的:先改變值,然后 賦值 給對象的屬性從而實現動畫效果。
但二者的區別在于:
ValueAnimator 類是先改變值,然后 手動賦值 給對象的屬性從而實現動畫;是 間接 對對象屬性進行操作;
ValueAnimator 類本質上是一種 改變 值 的操作機制
ObjectAnimator類是先改變值,然后 自動賦值 給對象的屬性從而實現動畫;是 直接 對對象屬性進行操作;

可以理解為:ObjectAnimator更加智能、自動化程度更高

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容