閱讀(43.3k) 書(shū)簽贊(0) 我要糾錯(cuò)

Android Android動(dòng)畫(huà)合集之屬性動(dòng)畫(huà)-又見(jiàn)

2023-03-31 14:22 更新

本節(jié)引言：

上節(jié)我們對(duì)Android的屬性動(dòng)畫(huà)進(jìn)行了初步的學(xué)習(xí)，相信大家對(duì)于屬性動(dòng)畫(huà)已經(jīng)不再是一知半解的狀態(tài)了，本節(jié)我們繼續(xù)來(lái)探究Android屬性動(dòng)畫(huà)的一些更高級(jí)的用法！依舊貼下郭神的三篇文章~

Android屬性動(dòng)畫(huà)完全解析(上)，初識(shí)屬性動(dòng)畫(huà)的基本用法

Android屬性動(dòng)畫(huà)完全解析(中)，ValueAnimator和ObjectAnimator的高級(jí)用法

Android屬性動(dòng)畫(huà)完全解析(下)，Interpolator和ViewPropertyAnimator的用法

內(nèi)容依舊是參考的上述三篇文章，好的，開(kāi)始本節(jié)內(nèi)容~

1.Evaluator自定義

1）Evaluator介紹

上一節(jié)中的8.4.3 Android動(dòng)畫(huà)合集之屬性動(dòng)畫(huà)-初見(jiàn)，使用動(dòng)畫(huà)的第一步都是：

調(diào)用ValueAnimator的ofInt()，ofFloat()或ofObject()靜態(tài)方法創(chuàng)建ValueAnimator實(shí)例！

在例子中，ofInt和ofFloat我們都用到了，分別用于對(duì)浮點(diǎn)型和整型的數(shù)據(jù)進(jìn)行動(dòng)畫(huà)操作！

那么ofObject()？初始對(duì)象和結(jié)束對(duì)象？如何過(guò)渡法？或者說(shuō)這玩意怎么用？

好的，帶著疑問(wèn)，我們先來(lái)了解一個(gè)東西：Evaluator，在屬性動(dòng)畫(huà)概念叨叨逼處其實(shí)我們就說(shuō)到了這個(gè)東西：

用來(lái)告訴動(dòng)畫(huà)系統(tǒng)如何從初始值過(guò)渡到結(jié)束值！好的，我們的入手點(diǎn)沒(méi)錯(cuò)！我們進(jìn)去IntEvaluator的源碼，看下里面寫(xiě)了些什么？

嗯，實(shí)現(xiàn)了TypeEvaluator接口，然后重寫(xiě)了evaluate()方法，參數(shù)有三個(gè)，依次是：

fraction：動(dòng)畫(huà)的完成度，我們根據(jù)他來(lái)計(jì)算動(dòng)畫(huà)的值應(yīng)該是多少
startValue：動(dòng)畫(huà)的起始值
endValue：動(dòng)畫(huà)的結(jié)束值

*動(dòng)畫(huà)的值 = 初始值 + 完成度 (結(jié)束值 - 初始值)**

同樣的還有FloatEvaluator，我們想告訴系統(tǒng)如何從初始對(duì)象過(guò)度到結(jié)束對(duì)象，那么我們就要自己來(lái)實(shí)現(xiàn)TypeEvaluator接口，即自定義Evaluator了，說(shuō)多無(wú)益，寫(xiě)個(gè)例子來(lái)看看：

2）使用示例

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

定義一個(gè)對(duì)象Point.java，對(duì)象中只有x，y兩個(gè)屬性以及get，set方法~

/**
 * Created by Jay on 2015/11/18 0018.
 */
public class Point {

    private float x;
    private float y;

    public Point() {
    }

    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    public float getX() {
        return x;
    }

    public float getY() {
        return y;
    }

    public void setX(float x) {
        this.x = x;
    }

    public void setY(float y) {
        this.y = y;
    }
}

接著自定義Evaluator類(lèi)：PointEvaluator.java，實(shí)現(xiàn)接口重寫(xiě)evaluate方法~

/**
 * Created by Jay on 2015/11/18 0018.
 */
public class PointEvaluator implements TypeEvaluator<Point>{
    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
        float x = startValue.getX() + fraction * (endValue.getX() - startValue.getX());
        float y = startValue.getY() + fraction * (endValue.getY() - startValue.getY());
        Point point = new Point(x, y);
        return point;
    }
}

然后自定義一個(gè)View類(lèi)：AnimView.java，很簡(jiǎn)單~

/**
 * Created by Jay on 2015/11/18 0018.
 */
public class AnimView extends View {

    public static final float RADIUS = 80.0f;
    private Point currentPoint;
    private Paint mPaint;

    public AnimView(Context context) {
        this(context, null);
    }

    public AnimView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public AnimView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

    private void drawCircle(Canvas canvas){
        float x = currentPoint.getX();
        float y = currentPoint.getY();
        canvas.drawCircle(x, y, RADIUS, mPaint);
    }

    private void startAnimation() {
        Point startPoint = new Point(RADIUS, RADIUS);
        Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);
        ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentPoint = (Point) animation.getAnimatedValue();
                invalidate();
            }
        });
        anim.setDuration(3000l);
        anim.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            drawCircle(canvas);
            startAnimation();
        } else {
            drawCircle(canvas);
        }
    }
}

最后MainActivity.java處實(shí)例化這個(gè)View即可~

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new AnimView(this));
    }
}

3)示例增強(qiáng)版

我們上面示例的基礎(chǔ)上加上圓移動(dòng)時(shí)的顏色變化~ 這里我們另外用一個(gè)ObjectAnimator來(lái)加載顏色變化的動(dòng)畫(huà)，我們?cè)赩iew中加多個(gè) int color來(lái)控制顏色，另外寫(xiě)上getColor()和setColor()的方法，我們先來(lái)自定義個(gè)Evaluator吧~

運(yùn)行效果圖：

實(shí)現(xiàn)代碼：

ColorEvaluator.java：

/**
 * Created by Jay on 2015/11/18 0018.
 */
public class ColorEvaluator implements TypeEvaluator<Integer>{
    @Override
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int alpha = (int) (Color.alpha(startValue) + fraction *
                (Color.alpha(endValue) - Color.alpha(startValue)));
        int red = (int) (Color.red(startValue) + fraction *
                (Color.red(endValue) - Color.red(startValue)));
        int green = (int) (Color.green(startValue) + fraction *
                (Color.green(endValue) - Color.green(startValue)));
        int blue = (int) (Color.blue(startValue) + fraction *
                (Color.blue(endValue) - Color.blue(startValue)));
        return Color.argb(alpha, red, green, blue);
    }
}

然后自定義View那里加個(gè)color，get和set方法；創(chuàng)建一個(gè)ObjectAnimator，和AnimatorSet，接著把動(dòng)畫(huà)組合到一起就到，這里就加點(diǎn)東西而已，怕讀者有問(wèn)題，直接另外建個(gè)View吧~

AnimView2.java：

/**
 * Created by Jay on 2015/11/18 0018.
 */
public class AnimView2 extends View {

    public static final float RADIUS = 80.0f;
    private Point currentPoint;
    private Paint mPaint;
    private int mColor;

    public AnimView2(Context context) {
        this(context, null);
    }

    public AnimView2(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public AnimView2(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

    private void drawCircle(Canvas canvas){
        float x = currentPoint.getX();
        float y = currentPoint.getY();
        canvas.drawCircle(x, y, RADIUS, mPaint);
    }

    private void startAnimation() {
        Point startPoint = new Point(RADIUS, RADIUS);
        Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);
        ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentPoint = (Point) animation.getAnimatedValue();
                invalidate();
            }
        });

        ObjectAnimator objectAnimator = ObjectAnimator.ofObject(this, "color", new ColorEvaluator(),
                Color.BLUE, Color.RED);
        //動(dòng)畫(huà)集合將前面兩個(gè)動(dòng)畫(huà)加到一起，with同時(shí)播放
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(anim).with(objectAnimator);
        animatorSet.setStartDelay(1000l);
        animatorSet.setDuration(3000l);
        animatorSet.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            drawCircle(canvas);
            startAnimation();
        } else {
            drawCircle(canvas);
        }
    }

    //color的get和set方法~
    public int getColor() {
        return mColor;
    }

    public void setColor(int color) {
        mColor = color;
        mPaint.setColor(color);
        invalidate();
    }
}

然后MainActivity，setContentView那里把AnimView改成AnimView2就好~

2.Interpolator(補(bǔ)間器)

嗯，在講補(bǔ)間動(dòng)畫(huà)的時(shí)候我們就講過(guò)這個(gè)東東了~不知道你還有印象沒(méi)？

上面的補(bǔ)間器補(bǔ)間動(dòng)畫(huà)和屬性動(dòng)畫(huà)都可用，而且補(bǔ)間動(dòng)畫(huà)還新增了一個(gè)TimeInterpolator接口該接口是用于兼容之前的Interpolator的，這使得所有過(guò)去的Interpolator實(shí)現(xiàn)類(lèi)都可以直接拿過(guò)來(lái) 放到屬性動(dòng)畫(huà)當(dāng)中使用！我們可以調(diào)用動(dòng)畫(huà)對(duì)象的setInterpolator()方法設(shè)置不同的Interpolator！我們先該點(diǎn)東西，讓小球從屏幕正中央的頂部掉落到底部~ 然后我們會(huì)我們?yōu)槲覀兊募蟿?dòng)畫(huà)調(diào)用下述語(yǔ)句： animatorSet.setInterpolator(new AccelerateInterpolator(2f)); 括號(hào)里的值用于控制加速度~

運(yùn)行效果：

好像有點(diǎn)不和常理，正常應(yīng)該是會(huì)彈起來(lái)的吧，我們換成BounceInterpolator試試~

嘿嘿，效果蠻贊的，當(dāng)然還有N多個(gè)系統(tǒng)提供好的Interpolator，大家可以自己一一嘗試，這里就不慢慢跟大家糾結(jié)了~

下面我們來(lái)看看：

1）Interpolator的內(nèi)部實(shí)現(xiàn)機(jī)制

我們先到TimeInterpolator接口的源碼，發(fā)現(xiàn)這里只有一個(gè)getInterpolation()方法；

簡(jiǎn)單的解釋： getInterpolation()方法中接收一個(gè)input參數(shù)，這個(gè)參數(shù)的值會(huì)隨著動(dòng)畫(huà)的運(yùn)行而不斷變化，不過(guò)它的變化是非常有規(guī)律的，就是根據(jù)設(shè)定的動(dòng)畫(huà)時(shí)長(zhǎng)勻速增加，變化范圍是0到1。也就是說(shuō)當(dāng)動(dòng)畫(huà)一開(kāi)始的時(shí)候input的值是0，到動(dòng)畫(huà)結(jié)束的時(shí)候input的值是1，而中間的值則是隨著動(dòng)畫(huà)運(yùn)行的時(shí)長(zhǎng)在0到1之間變化的。

這里的input值決定了我們TypeEvaluator接口里的fraction的值。 input的值是由系統(tǒng)經(jīng)過(guò)計(jì)算后傳入到getInterpolation()方法中的，然后我們可以自己實(shí)現(xiàn) getInterpolation()方法中的算法，根據(jù)input的值來(lái)計(jì)算出一個(gè)返回值，而這個(gè)返回值就是fraction了。

我們可以看看LinearInterpolator里的代碼：

這里沒(méi)有處理過(guò)直接返回input值，即fraction的值就是等于input的值，這就是勻速運(yùn)動(dòng)的 Interpolator的實(shí)現(xiàn)方式！其實(shí)無(wú)非就是算法不同，這就涉及到一些數(shù)學(xué)的東西了，又一次體會(huì)到數(shù)學(xué)的重要性了，這里再貼個(gè)BounceInterpolator的源碼吧：

別問(wèn)我這里的算法，我也不知道哈，我們?cè)僬覀€(gè)容易理解點(diǎn)的：AccelerateDecelerateInterpolator

這個(gè)Interpolator是先加速后減速效果的： (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f 的算法理解：

解：由input的取值范圍為[0,1]，可以得出cos中的值的取值范圍為[π,2π]，對(duì)應(yīng)的值為-1和1；再用這個(gè)值來(lái)除以2加上0.5之后，getInterpolation()方法最終返回的結(jié)果值范圍還是[0,1]，對(duì)應(yīng)的曲線圖如下：

所以是一個(gè)先加速后減速的過(guò)程！

嗯，學(xué)渣沒(méi)法玩了... ，上面全是郭大叔文章里搬過(guò)來(lái)的...我想靜靜...

2）自定義Interpolator

好吧，還是等會(huì)兒再憂傷吧，寫(xiě)個(gè)自定義的Interpolator示例先：非常簡(jiǎn)單，實(shí)現(xiàn)TimeInterpolator接口，重寫(xiě)getInterpolation方法

示例代碼如下

private class DecelerateAccelerateInterpolator implements TimeInterpolator {
    @Override
    public float getInterpolation(float input) {
        if (input < 0.5) {
            return (float) (Math.sin(input * Math.PI) / 2);
        } else {
            return 1 - (float) (Math.sin(input * Math.PI) / 2);
        }
    }
}

調(diào)用setInterpolator(new DecelerateAccelerateInterpolator())設(shè)置下即可~ 限于篇幅就不貼圖了~

3.ViewPropertyAnimator

3.1后系統(tǒng)當(dāng)中附增的一個(gè)新的功能，為View的動(dòng)畫(huà)操作提供一種更加便捷的用法！假如是以前，讓一個(gè)TextView從正常狀態(tài)變成透明狀態(tài)，會(huì)這樣寫(xiě)：

ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 0f);  
animator.start();

而使用ViewPropertyAnimator來(lái)實(shí)現(xiàn)同樣的效果則顯得更加易懂：

textview.animate().alpha(0f);

還支持連綴用法，組合多個(gè)動(dòng)畫(huà)，設(shè)定時(shí)長(zhǎng)，設(shè)置Interpolator等~

textview.animate().x(500).y(500).setDuration(5000)  
        .setInterpolator(new BounceInterpolator());

用法很簡(jiǎn)單，使用的時(shí)候查下文檔就好~，另外下面有幾個(gè)細(xì)節(jié)的地方要注意一下！

整個(gè)ViewPropertyAnimator的功能都是建立在View類(lèi)新增的animate()方法之上的，這個(gè)方法會(huì)創(chuàng)建并返回一個(gè)ViewPropertyAnimator的實(shí)例，之后的調(diào)用的所有方法，設(shè)置的所有屬性都是通過(guò)這個(gè)實(shí)例完成的。
使用ViewPropertyAnimator將動(dòng)畫(huà)定義完成之后，動(dòng)畫(huà)就會(huì)自動(dòng)啟動(dòng)。并且這個(gè)機(jī)制對(duì)于組合動(dòng)畫(huà)也同樣有效，只要我們不斷地連綴新的方法，那么動(dòng)畫(huà)就不會(huì)立刻執(zhí)行，等到所有在ViewPropertyAnimator上設(shè)置的方法都執(zhí)行完畢后，動(dòng)畫(huà)就會(huì)自動(dòng)啟動(dòng)。當(dāng)然如果不想使用這一默認(rèn)機(jī)制的話，我們也可以顯式地調(diào)用 start()方法來(lái)啟動(dòng)動(dòng)畫(huà)。
ViewPropertyAnimator的所有接口都是使用連綴的語(yǔ)法來(lái)設(shè)計(jì)的，每個(gè)方法的返回值都是它自身的實(shí)例，因此調(diào)用完一個(gè)方法之后可以直接連綴調(diào)用它的另一個(gè)方法，這樣把所有的功能都串接起來(lái)，我們甚至可以?xún)H通過(guò)一行代碼就完成任意復(fù)雜度的動(dòng)畫(huà)功能。

4.本節(jié)示例代碼下載

AnimatorDemo3.zip

在Github上找到一個(gè)動(dòng)畫(huà)合集的項(xiàng)目，很多動(dòng)畫(huà)效果都有，下面貼下地址：

BaseAnimation 動(dòng)畫(huà)合集

想研究各種動(dòng)畫(huà)是如何實(shí)現(xiàn)的可自行查看源碼~

本節(jié)小結(jié)

嗯，本節(jié)我們講了一些稍微高深一點(diǎn)的東西Evaluator啊，Interpolator啊，還有 ViewPropertyAnimator，是不是又拓展了大家的見(jiàn)識(shí)~本節(jié)也是Android基礎(chǔ)入門(mén)繪圖與的最后一小節(jié)了，如果大家把這一章節(jié)的內(nèi)容都掌握了，再去學(xué)自定義控件，或者看別人寫(xiě)的自定義控件，應(yīng)該不會(huì)再那么地不知道從何入手，遇到一堆新面孔了吧！嗯，還是謝謝郭神的文章，屬性動(dòng)畫(huà)部分的內(nèi)容很都是直接在郭神那里搬過(guò)來(lái)的

以上內(nèi)容是否對(duì)您有幫助：

← Android Android動(dòng)畫(huà)合集之屬性動(dòng)畫(huà)-初見(jiàn)

Android 使用SoundPool播放音效(Duang~) →

寫(xiě)筆記

我要補(bǔ)充