Android動(dòng)畫(huà)：手把手帶你學(xué)會(huì)如何自定義屬性動(dòng)畫(huà)(ObjectAnimator類(lèi))

前言

  • 屬性動(dòng)畫(huà)的使用 是 Android 開(kāi)發(fā)中常用的知識(shí)
  • 今天，我將講解屬性動(dòng)畫(huà)使用中最核心的一個(gè)方法類(lèi)：ObjectAnimator，希望你們會(huì)喜歡。

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

目錄

示意圖

儲(chǔ)備知識(shí)

閱讀本文前，請(qǐng)先閱讀文章：Android：這是一份全面 & 詳細(xì)的動(dòng)畫(huà)入門(mén)學(xué)習(xí)指南

1. 簡(jiǎn)介

  • 實(shí)現(xiàn)屬性動(dòng)畫(huà)中的一個(gè)核心方法類(lèi)
  • 繼承自ValueAnimator類(lèi)，即底層的動(dòng)畫(huà)實(shí)現(xiàn)機(jī)制是基于ValueAnimator類(lèi)

2. 實(shí)現(xiàn)動(dòng)畫(huà)的原理

直接對(duì)對(duì)象的屬性值進(jìn)行改變操作，從而實(shí)現(xiàn)動(dòng)畫(huà)效果

如直接改變 View的 alpha 屬性 從而實(shí)現(xiàn)透明度的動(dòng)畫(huà)效果

3. 本質(zhì)原理

通過(guò)不斷控制 值 的變化，再不斷 自動(dòng) 賦給對(duì)象的屬性，從而實(shí)現(xiàn)動(dòng)畫(huà)效果。如下圖：

示意圖

從上面的工作原理可以看出：ObjectAnimator與 ValueAnimator類(lèi)的區(qū)別：

  • ValueAnimator 類(lèi)是先改變值，然后 手動(dòng)賦值 給對(duì)象的屬性從而實(shí)現(xiàn)動(dòng)畫(huà)；是 間接 對(duì)對(duì)象屬性進(jìn)行操作；具體請(qǐng)看文章：Android：這份Android核心使用類(lèi)ValueAnimator學(xué)習(xí)指南請(qǐng)收好！
  • ObjectAnimator 類(lèi)是先改變值，然后 自動(dòng)賦值 給對(duì)象的屬性從而實(shí)現(xiàn)動(dòng)畫(huà)；是 直接 對(duì)對(duì)象屬性進(jìn)行操作；

至于是如何自動(dòng)賦值給對(duì)象的屬性，下面會(huì)詳細(xì)說(shuō)明

4. 基礎(chǔ)使用

4.1 使用步驟

由于是繼承了ValueAnimator類(lèi)，所以使用的方法十分類(lèi)似：XML 設(shè)置 / Java設(shè)置

/*
 * 設(shè)置方式1：Java
 */
 // 步驟1：創(chuàng)建ObjectAnimator對(duì)象
     ObjectAnimator animator = ObjectAnimator.ofFloat(Object object, String property, float ....values);  
    // 作用：
    // 1. 創(chuàng)建動(dòng)畫(huà)實(shí)例
    // 2. 參數(shù)設(shè)置：
    // Object object：需要操作的對(duì)象
    // String property：需要操作的對(duì)象的屬性
    // float ....values：動(dòng)畫(huà)初始值 & 結(jié)束值（不固定長(zhǎng)度）
    // 若是兩個(gè)參數(shù)a,b，則動(dòng)畫(huà)效果則是從屬性的a值到b值
    // 若是三個(gè)參數(shù)a,b,c，則則動(dòng)畫(huà)效果則是從屬性的a值到b值再到c值
    // 以此類(lèi)推
    // 至于如何從初始值過(guò)渡到結(jié)束值，同樣是由估值器決定，此處ObjectAnimator.ofFloat()是有系統(tǒng)內(nèi)置的浮點(diǎn)型估值器FloatEvaluator，同ValueAnimator講解

// 步驟2：設(shè)置動(dòng)畫(huà)屬性
    // 設(shè)置動(dòng)畫(huà)運(yùn)行的時(shí)長(zhǎng)
    anim.setDuration(500);
    
    // 設(shè)置動(dòng)畫(huà)延遲播放時(shí)間
    anim.setStartDelay(500);
    
    // 設(shè)置動(dòng)畫(huà)重復(fù)播放次數(shù) = 重放次數(shù)+1
    // 動(dòng)畫(huà)播放次數(shù) = infinite時(shí),動(dòng)畫(huà)無(wú)限重復(fù)
    anim.setRepeatCount(0);
    
    // 設(shè)置重復(fù)播放動(dòng)畫(huà)模式
    anim.setRepeatMode(ValueAnimator.RESTART);
    // ValueAnimator.RESTART(默認(rèn)):正序重放
    // ValueAnimator.REVERSE:倒序回放

// 步驟3：?jiǎn)?dòng)動(dòng)畫(huà)
animator.start();  

/*
 * 設(shè)置方式2：xml
 */
 // 步驟1：在路徑 res/animator 的文件夾里創(chuàng)建動(dòng)畫(huà)效果.xml文件
 // set_animation.xml

 // 步驟2：設(shè)置動(dòng)畫(huà)參數(shù)
 // ObjectAnimator 采用<animator>  標(biāo)簽
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  
        android:valueFrom="1"   // 初始值
        android:valueTo="0"  // 結(jié)束值
        android:valueType="floatType"  // 變化值類(lèi)型 ：floatType & intType
        android:propertyName="alpha" // 對(duì)象變化的屬性名稱(chēng)
    /> 

// 步驟3：?jiǎn)?dòng)動(dòng)畫(huà)
    // 1. 載入XML動(dòng)畫(huà)
    Animator animator = AnimatorInflater.loadAnimator(context, R.animator.view_animation);  
    // 2. 設(shè)置動(dòng)畫(huà)對(duì)象
    animator.setTarget(view);  
    // 3. 啟動(dòng)動(dòng)畫(huà)
    animator.start();

4.2 使用實(shí)例

此處先展示四種基本變換：平移、旋轉(zhuǎn)、縮放 & 透明度

平移

// 1. 創(chuàng)建動(dòng)畫(huà)作用對(duì)象：此處以Button為例
Button mButton = (Button) findViewById(R.id.Button);

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

// 3. 創(chuàng)建動(dòng)畫(huà)對(duì)象
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);

// 表示的是:
// 動(dòng)畫(huà)作用對(duì)象是mButton
// 動(dòng)畫(huà)作用的對(duì)象的屬性是X軸平移（在Y軸上平移同理，采用屬性"translationY"
// 動(dòng)畫(huà)效果是:從當(dāng)前位置平移到 x=1500 再平移到初始位置

// 4. 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
animator.setDuration(5000);

// 5. 啟動(dòng)動(dòng)畫(huà)
animator.start();
屬性動(dòng)畫(huà) - X軸平移.gif

旋轉(zhuǎn)

// 1. 創(chuàng)建動(dòng)畫(huà)作用對(duì)象：此處以Button為例
Button mButton = (Button) findViewById(R.id.Button);

// 2. 創(chuàng)建動(dòng)畫(huà)對(duì)象
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "rotation", 0f, 360f);
// 表示的是:
// 動(dòng)畫(huà)作用對(duì)象是mButton
// 動(dòng)畫(huà)作用的對(duì)象的屬性是旋轉(zhuǎn)alpha
// 動(dòng)畫(huà)效果是:0度-360度

// 3. 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
animator.setDuration(5000);

// 4. 啟動(dòng)動(dòng)畫(huà)
animator.start();
屬性動(dòng)畫(huà)- 旋轉(zhuǎn).gif

縮放

// 1. 創(chuàng)建動(dòng)畫(huà)作用對(duì)象：此處以Button為例
Button mButton = (Button) findViewById(R.id.Button);

// 2. 創(chuàng)建動(dòng)畫(huà)對(duì)象
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "scaleX", 1f, 3f, 1f);
// 表示的是:
// 動(dòng)畫(huà)作用對(duì)象是mButton
// 動(dòng)畫(huà)作用的對(duì)象的屬性是X軸縮放
// 動(dòng)畫(huà)效果是:放大到3倍,再縮小到初始大小

// 3. 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
animator.setDuration(5000);

// 4. 啟動(dòng)動(dòng)畫(huà)
animator.start();
屬性動(dòng)畫(huà) - 縮放.gif

透明度

// 1. 創(chuàng)建動(dòng)畫(huà)作用對(duì)象：此處以Button為例
Button mButton = (Button) findViewById(R.id.Button);

// 2. 創(chuàng)建動(dòng)畫(huà)對(duì)象
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "alpha", 1f, 0f, 1f);
// 表示的是:
// 動(dòng)畫(huà)作用對(duì)象是mButton
// 動(dòng)畫(huà)作用的對(duì)象的屬性是透明度alpha
// 動(dòng)畫(huà)效果是:常規(guī) - 全透明 - 常規(guī)

// 3. 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
animator.setDuration(5000);

// 4. 啟動(dòng)動(dòng)畫(huà)
animator.start();
屬性動(dòng)畫(huà) - 透明度.gif

4. 通過(guò)自定義對(duì)象屬性實(shí)現(xiàn)動(dòng)畫(huà)效果

在上面的基礎(chǔ)使用中，我們對(duì)于ObjectAnimator.ofFloat()的第二個(gè)參數(shù)傳入了：alpha、rotation、translationX 和 scaleY等對(duì)象的屬性值，從而實(shí)現(xiàn)了平移、旋轉(zhuǎn)、縮放、透明度的動(dòng)畫(huà)。

實(shí)際上，這個(gè)參數(shù)是可以傳入對(duì)象的任意屬性值的，因?yàn)镺bjectAnimator類(lèi)實(shí)現(xiàn)動(dòng)畫(huà)效果的本質(zhì)是：通過(guò)不斷控制值的變化，再不斷自動(dòng)賦值給對(duì)象的屬性。

工作原理

而 自動(dòng)賦給對(duì)象的屬性的本質(zhì)是調(diào)用該對(duì)象屬性的set() 、get()方法進(jìn)行賦值。所以，ObjectAnimator.ofFloat(Object object, String property, float ....values)的第二個(gè)參數(shù)傳入值的作用是：讓ObjectAnimator類(lèi)根據(jù)傳入的屬性名去尋找該對(duì)象對(duì)應(yīng)屬性名的 set() 、get()方法，從而進(jìn)行對(duì)象屬性值的賦值。如上面的例子：

ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "rotation", 0f, 360f);
// 其實(shí)Button對(duì)象中并沒(méi)有rotation這個(gè)屬性值
// ObjectAnimator并不是直接對(duì)我們傳入的屬性名進(jìn)行操作
// 而是根據(jù)傳入的屬性值"rotation" 去尋找對(duì)象對(duì)應(yīng)屬性名對(duì)應(yīng)的get和set方法，從而通過(guò)set()、get()對(duì)屬性進(jìn)行賦值

// 因?yàn)锽utton對(duì)象中有rotation屬性所對(duì)應(yīng)的get & set方法
// 所以傳入的rotation屬性是有效的
// 所以才能對(duì)rotation這個(gè)屬性進(jìn)行操作賦值
public void setRotation(float value);  
public float getRotation();  

// 實(shí)際上，這兩個(gè)方法是由View對(duì)象提供的，所以任何繼承自View的對(duì)象都具備這個(gè)屬性

4.1 原理解析

至于是如何進(jìn)行自動(dòng)賦值，直接看源碼分析：從啟動(dòng)動(dòng)畫(huà)的animator.start()方法開(kāi)始。

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

    ...
    
    super.start();  
   // 調(diào)用父類(lèi)的start()
   // 因?yàn)镺bjectAnimator類(lèi)繼承ValueAnimator類(lèi)，所以調(diào)用的是ValueAnimator的star()
   // 經(jīng)過(guò)層層調(diào)用，最終會(huì)調(diào)用到 自動(dòng)賦值給對(duì)象屬性值的方法 ->關(guān)注1
}  

/*
 * 關(guān)注1：自動(dòng)賦值給對(duì)象屬性值的邏輯方法
 */
// 步驟1：初始化動(dòng)畫(huà)值
private void setupValue(Object target, Keyframe kf) {  
    if (mProperty != null) {  
        kf.setValue(mProperty.get(target));  
        // 初始化時(shí)，如果屬性的初始值沒(méi)有提供，則調(diào)用屬性的get()進(jìn)行取值
    }  
        kf.setValue(mGetter.invoke(target));   
    }  
}  

// 步驟2：更新動(dòng)畫(huà)值
// 當(dāng)動(dòng)畫(huà)下一幀來(lái)時(shí)（即動(dòng)畫(huà)更新的時(shí)候），setAnimatedValue()都會(huì)被調(diào)用
void setAnimatedValue(Object target) {  
    if (mProperty != null) {  
        mProperty.set(target, getAnimatedValue());  
        // 內(nèi)部調(diào)用對(duì)象該屬性的set()，從而將新的屬性值設(shè)置給對(duì)象屬性
    }   
}

從上面的源碼分析可以看出自動(dòng)賦值的邏輯是：

  • 初始化時(shí)，若屬性的初始值沒(méi)有提供，則調(diào)用屬性的 get()進(jìn)行取值；
  • 當(dāng)值變化時(shí)，會(huì)調(diào)用對(duì)象該屬性的 set()方法，從而將新的屬性值設(shè)置給對(duì)象屬性。

所以：

  • ObjectAnimator 類(lèi)針對(duì)的是任意對(duì)象 & 任意屬性值，并不是單單針對(duì)于View對(duì)象
  • 如果需要采用ObjectAnimator 類(lèi)實(shí)現(xiàn)動(dòng)畫(huà)效果，那么需要操作的對(duì)象就必須有該屬性的set()、get()
  • 同理，針對(duì)上述另外的四種基本動(dòng)畫(huà)效果，View 也存在著對(duì)應(yīng)的set()、get()方法，如旋轉(zhuǎn)屬性的setRotation()、getRotation()、平移屬性的setTranslationX()、getTranslationX()、縮放屬性的setScaleY()、getScaleY()

4.2 具體使用

對(duì)于屬性動(dòng)畫(huà)，其拓展性在于：不局限于系統(tǒng)限定的動(dòng)畫(huà)且可以自定義動(dòng)畫(huà)(即自定義對(duì)象的屬性)，并通過(guò)操作自定義的屬性從而實(shí)現(xiàn)各種復(fù)雜多樣的動(dòng)畫(huà)效果。

那么，該如何自定義屬性呢？本質(zhì)上分為兩個(gè)步驟：

  1. 為對(duì)象設(shè)置需要操作屬性的set()、get()方法；
  2. 通過(guò)自定義估值器(實(shí)現(xiàn)TypeEvaluator類(lèi)接口）從而定義屬性變化的邏輯。

在屬性值變化的時(shí)候，會(huì)自動(dòng)調(diào)用屬性的set()、get()方法進(jìn)行賦值，從而實(shí)現(xiàn)動(dòng)畫(huà)效果。

4.3 實(shí)例講解

下面，我將用一個(gè)實(shí)例來(lái)說(shuō)明如何通過(guò)自定義屬性實(shí)現(xiàn)動(dòng)畫(huà)效果：一個(gè)圓的顏色漸變，即此處要變化、操作的對(duì)象屬性值是圓的背景顏色

屬性動(dòng)畫(huà) - 顏色變化
  • 自定義屬性的邏輯如下：（需要自定義屬性為圓的背景顏色）
自定義屬性的邏輯

步驟1：設(shè)置對(duì)象類(lèi)屬性的set() 、get()

即此處要變化、操作的對(duì)象屬性值是圓的背景顏色。共有兩種方法：

  • 直接法：通過(guò)繼承原始類(lèi)，直接給類(lèi)加上該屬性的get()、set()方法；
  • 間接法：通過(guò)包裝原始動(dòng)畫(huà)對(duì)象，間接給對(duì)象加上該屬性的get()、set()方法。即用一個(gè)類(lèi)來(lái)包裝原始對(duì)象。

此處主要使用第一種方式進(jìn)行展示。

// MyView2.java
public class MyView2 extends View {
    public static final float RADIUS = 100f;// 圓的半徑 = 100
    
     // 畫(huà)筆相關(guān)
    private Paint mPaint;

    // 初始化畫(huà)筆
    public MyView2(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

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

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

    // 設(shè)置背景顏色的set()方法
    public void setColor(String color) {
        this.color = color;

        // 將畫(huà)筆的顏色設(shè)置成可傳入顏色的參數(shù)
        mPaint.setColor(Color.parseColor(color));
        
        // 調(diào)用了invalidate(),即畫(huà)筆顏色每次改變都會(huì)刷新視圖，然后調(diào)用onDraw()方法重新繪制圓
        // 而因?yàn)槊看握{(diào)用onDraw()方法時(shí)畫(huà)筆的顏色都會(huì)改變,所以圓的顏色也會(huì)改變，從而實(shí)現(xiàn)動(dòng)畫(huà)效果
        invalidate();
    }

    // 復(fù)寫(xiě)onDraw()從而實(shí)現(xiàn)繪制邏輯
    // 繪制邏輯:先在初始點(diǎn)畫(huà)圓,通過(guò)監(jiān)聽(tīng)當(dāng)前坐標(biāo)值(currentPoint)的變化,每次變化都調(diào)用onDraw()重新繪制圓,從而實(shí)現(xiàn)圓的平移動(dòng)畫(huà)效果
    @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：自定義估值器

即通過(guò)實(shí)現(xiàn)TypeEvaluator類(lèi)接口從而定義屬性變化的邏輯。此處要定義的是：實(shí)現(xiàn)顏色過(guò)渡的邏輯。

// ColorEvaluator.java

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

    private int mCurrentRed;
    private int mCurrentGreen ;
    private int mCurrentBlue ;

    // 復(fù)寫(xiě)evaluate（）
    // 作用：寫(xiě)入對(duì)象動(dòng)畫(huà)過(guò)渡的邏輯，此處是寫(xiě)顏色過(guò)渡的邏輯
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

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

        // 通過(guò)字符串截取的方式將初始化顏色分為RGB三個(gè)部分，并將RGB的值轉(zhuǎn)換成十進(jìn)制數(shù)字
        // 那么每個(gè)顏色的取值范圍就是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);

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

        // 計(jì)算初始顏色和結(jié)束顏色之間的差值
        // 該差值決定著顏色變化的快慢:初始顏色值和結(jié)束顏色值很相近，那么顏色變化就會(huì)比較緩慢;否則,變化則很快
        // 具體如何根據(jù)差值來(lái)決定顏色變化快慢的邏輯寫(xiě)在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()決定如何根據(jù)差值來(lái)決定顏色變化的快慢 ->>關(guān)注1
        } else if (mCurrentGreen != endGreen) {
            mCurrentGreen = getCurrentColor(startGreen, endGreen, colorDiff,
                    redDiff, fraction);
        } else if (mCurrentBlue != endBlue) {
            mCurrentBlue = getCurrentColor(startBlue, endBlue, colorDiff,
                    redDiff + greenDiff, fraction);
        }

        // 將計(jì)算出的當(dāng)前顏色的值組裝返回
        String currentColor = "#" + getHexString(mCurrentRed)
                + getHexString(mCurrentGreen) + getHexString(mCurrentBlue);

        // 由于我們計(jì)算出的顏色是十進(jìn)制數(shù)字，所以需要轉(zhuǎn)換成十六進(jìn)制字符串:調(diào)用getHexString()->>關(guān)注2
        // 最終將RGB顏色拼裝起來(lái),并作為最終的結(jié)果返回
        return currentColor;
    }


    // 關(guān)注1:getCurrentColor()
    // 具體是根據(jù)fraction值來(lái)計(jì)算當(dāng)前的顏色。
    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;
    }

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

步驟4：?jiǎn)?dòng)動(dòng)畫(huà)

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    MyView2 myView2; // 自定義的view

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

        // 1. 設(shè)置自定義View對(duì)象
        // 傳入背景顏色屬性值 & 顏色估值器
        myView2 = (MyView2) findViewById(R.id.MyView2);
        ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "color", new ColorEvaluator(),
                "#0000FF", "#FF0000");
        
        // 本質(zhì)邏輯：
        // 步驟1：根據(jù)顏色估值器不斷 改變 值 
        // 步驟2：調(diào)用set()設(shè)置背景顏色的屬性值（實(shí)際上是通過(guò)畫(huà)筆進(jìn)行顏色設(shè)置）
        // 步驟3：調(diào)用invalidate()刷新視圖，即調(diào)用onDraw()重新繪制，從而實(shí)現(xiàn)動(dòng)畫(huà)效果

        // 2. 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
        anim.setDuration(8000);

        // 3. 啟動(dòng)動(dòng)畫(huà)
        anim.start();
    }
}

效果圖

屬性動(dòng)畫(huà) - 顏色變化

源碼地址

Carson_Ho的Github地址

5. 特別說(shuō)明

對(duì)于手動(dòng)設(shè)置對(duì)象類(lèi)屬性的 set()、get()

  • 直接法：通過(guò)繼承原始類(lèi)，直接給類(lèi)加上該屬性的get()、set()方法；
  • 間接法：通過(guò)包裝原始動(dòng)畫(huà)對(duì)象，間接給對(duì)象加上該屬性的get()、set()方法。即用一個(gè)類(lèi)來(lái)包裝原始對(duì)象。

對(duì)于該對(duì)象本身無(wú)這個(gè)屬性時(shí)，一般是采用使用第一種方式，即上述實(shí)例說(shuō)明。那么什么情況下會(huì)使用第二種方式，即間接法呢？

答案：當(dāng)該屬性存在set()方法但該set()方法無(wú)法帶來(lái)預(yù)期的UI變化時(shí)。

5.1 示例說(shuō)明

  • 由于View的setWidth()并不是設(shè)置View的寬度，而是設(shè)置View的最大寬度和最小寬度的；
  • 所以通過(guò)setWidth()無(wú)法改變控件的寬度；
  • 即對(duì)View視圖的width做屬性動(dòng)畫(huà)沒(méi)有效果

具體請(qǐng)看下面按鈕的例子，設(shè)置后該按鈕不會(huì)有任何動(dòng)畫(huà)效果變化。

// 創(chuàng)建動(dòng)畫(huà)作用對(duì)象：此處以Button為例
// 此Button的寬高設(shè)置具體為具體寬度200px
Button mButton = (Button) findViewById(R.id.Button);

// 對(duì)該button設(shè)置寬度變化
ObjectAnimator.ofInt(mButton, "width", 500).setDuration(5000).start();

因?yàn)閎utton的setWidth()是用于設(shè)置最大、最小寬度的，而不是設(shè)置即時(shí)寬度的。

效果圖：不會(huì)有動(dòng)畫(huà)效果
public void setWidth(int pixels) {  
    mMaxWidth = mMinWidth = pixels;  
    mMaxWidthMode = mMinWidthMode = PIXELS;  
    // 因?yàn)閟etWidth（）并不是設(shè)置View的寬度，而是設(shè)置Button的最大寬度和最小寬度的
    // 所以通過(guò)setWidth（）無(wú)法改變控件的寬度
   // 所以對(duì)width屬性做屬性動(dòng)畫(huà)沒(méi)有效果
  
    requestLayout();  
    invalidate();  
}  

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

5.2 解決方案

通過(guò)包裝原始動(dòng)畫(huà)對(duì)象，間接給對(duì)象加上該屬性的get()、set()方法。即用一個(gè)類(lèi)來(lái)包裝原始對(duì)象。

本質(zhì)上是采用了設(shè)計(jì)模式中的裝飾模式，即通過(guò)包裝類(lèi)從而擴(kuò)展對(duì)象的功能

// MainActivity.java
public class MainActivity extends AppCompatActivity {

    Button mButton;
    ViewWrapper wrapper;

    // 1. 提供ViewWrapper類(lèi),用于包裝View對(duì)象
    // 本例:包裝Button對(duì)象
    private static class ViewWrapper {
        private View mTarget;

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

        // 為view的寬度設(shè)置get()、set()
        public int getWidth() {
            return mTarget.getLayoutParams().width;
        }

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

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

        // 2. 創(chuàng)建動(dòng)畫(huà)作用對(duì)象
        // 以以Button為例
        mButton = (Button) findViewById(R.id.Button);
    
        // 3. 創(chuàng)建包裝類(lèi),并傳入動(dòng)畫(huà)作用的對(duì)象
        wrapper = new ViewWrapper(mButton);
        
        // 4. 點(diǎn)擊時(shí)設(shè)置動(dòng)畫(huà)的對(duì)象是包裝類(lèi)的對(duì)象
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(3000).start();
            }
        });
    }  
}

效果圖

效果圖 - 動(dòng)畫(huà)有效

6. 與ValueAnimator類(lèi)對(duì)比

對(duì)比于屬性動(dòng)畫(huà)中另外一個(gè)比較核心的使用類(lèi)：ValueAnimator類(lèi)：

6.1 相同點(diǎn)

其二者的本質(zhì)都是相同：不斷改變值，然后不斷賦值給對(duì)象的屬性從而實(shí)現(xiàn)動(dòng)畫(huà)效果

6.2 區(qū)別

二者的區(qū)別在于：賦值給對(duì)象屬性的操作是直接還是間接的。

  • ValueAnimator類(lèi)：不斷改變值，然后手動(dòng)賦值給對(duì)象的屬性從而實(shí)現(xiàn)動(dòng)畫(huà)效果，是間接對(duì)對(duì)象屬性進(jìn)行操作；
  • ObjectAnimator類(lèi)：不斷改變值，然后自動(dòng)賦值給對(duì)象的屬性從而實(shí)現(xiàn)動(dòng)畫(huà)效果，是直接對(duì)對(duì)象屬性進(jìn)行操作；

可以理解為：ObjectAnimator類(lèi)的使用更加智能、自動(dòng)化程度更高。

至此，關(guān)于屬性動(dòng)畫(huà)中的核心使用類(lèi)ObjectAnimator講解完畢

7. 總結(jié)

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

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

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容