1. 程式人生 > >【Android 動畫】動畫詳解之屬性動畫(三)

【Android 動畫】動畫詳解之屬性動畫(三)

大家好,在前兩篇中,我們介紹了Android的補間動畫和插值器,這一篇,我們來說下屬性動畫。

前言

通過前兩篇,我們已經熟悉了對View進行移動、縮放、旋轉和淡入淡出幾種動畫,還可以利用AnimationSet將其組合起來,但這些在實際應用中往往還不夠,比如說,如何實現一個View 的背景色按照一定的順序改變?帶著這個疑問,我們來了解下屬性動畫 (ValueAnimator)。

首先,ValueAnimator有幾個比較重要的方法

 public
static ValueAnimator ofFloat(float... values) {} public static ValueAnimator ofInt(int... values) {} public static ValueAnimator ofArgb(int... values){} public static ValueAnimator ofObject(TypeEvaluator evaluator, Object... values) {}

我們先來個簡單的例子:

        valueAnimator = ValueAnimator.ofFloat
(0, 1f); valueAnimator.setDuration(200); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Log.e("cheng", "value=" + animation.getAnimatedValue()); }
}); valueAnimator.start();

這是一個有0漸變到1的屬性動畫,我們只需要控制開始值0,結束值1,中間值由系統自動幫我們實現;logcat輸入如下:
image.png
看到這裡,大家大概都清楚屬性動畫的意思了吧?下面我們來實現一個位移動畫

                valueAnimator = ValueAnimator.ofInt(0, 400);
                valueAnimator.setDuration(2000);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        int curValue = (int) animation.getAnimatedValue();
                        tvDemo.layout(curValue, curValue, curValue + tvDemo.getWidth(), curValue + tvDemo.getHeight());
                    }
                });
                valueAnimator.start();

我們根據ValueAnimator返回的值,通過layout方法改變tvDemo的位置,效果如下:
20181114_162624.gif

我們再試試多幾個引數

 valueAnimator = ValueAnimator.ofFloat(0, 400f, 0, 800f, 0);
                valueAnimator.setDuration(2000);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        Float curValueFloat = (Float) animation.getAnimatedValue();
                        int curValue = curValueFloat.intValue();
                        tvDemo.layout(curValue, curValue, curValue + tvDemo.getWidth(), curValue + tvDemo.getHeight());
                    }
                });
                valueAnimator.start();

效果如下:
20181114_162759.gif
聯合插值器,插值器詳細可檢視第二篇

                valueAnimator = ValueAnimator.ofFloat(0, 400f, 0, 800f, 0);
                valueAnimator.setDuration(2000);
                valueAnimator.setInterpolator(new DecelerateInterpolator());
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        Float curValueFloat = (Float) animation.getAnimatedValue();
                        int curValue = curValueFloat.intValue();
                        tvDemo.layout(curValue, curValue, curValue + tvDemo.getWidth(), curValue + tvDemo.getHeight());
                    }
                });
                valueAnimator.start();

效果如下:比之前柔滑了許多
20181114_162828.gif
再次回到最開始的問題,如果改變背景色呢?
我們檢視View 的原始碼

 @RemotableViewMethod
    public void setBackgroundColor(@ColorInt int color) {
        if (mBackground instanceof ColorDrawable) {
            ((ColorDrawable) mBackground.mutate()).setColor(color);
            computeOpaqueFlags();
            mBackgroundResource = 0;
        } else {
            setBackground(new ColorDrawable(color));
        }
    }

發現,所謂的顏色值,其實也是個int 值,所以我們可以用ofArgb來實現。

  valueAnimator = ValueAnimator.ofArgb(0xffffff00, 0xff0000ff);
                valueAnimator.setDuration(2000);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        int curValue = (int) animation.getAnimatedValue();
                        tvDemo.setBackgroundColor(curValue);
                    }
                });
                valueAnimator.start();

效果如下:
20181114_162845.gif
看到這裡,可能有人要問了,既然顏色值是int,為什麼不用ofInt?
那是因為顏色值有它的取值範圍,設定取值範圍外的值,是不會生效的,比如tvDemo.setBackgroundColor(1);
問題又來了,ofArgb是如何保證0xffffff00和0xff0000ff 中間的所有值都是有效的顏色值?
翻原始碼唄

 public static ValueAnimator ofArgb(int... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setIntValues(values);
        anim.setEvaluator(ArgbEvaluator.getInstance());
        return anim;
    }

ArgbEvaluator?這是什麼鬼?再看它的原始碼(去掉了註釋部分)

public class ArgbEvaluator implements TypeEvaluator {
    private static final ArgbEvaluator sInstance = new ArgbEvaluator();


    public static ArgbEvaluator getInstance() {
        return sInstance;
    }
   public Object evaluate(float fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        float startA = ((startInt >> 24) & 0xff) / 255.0f;
        float startR = ((startInt >> 16) & 0xff) / 255.0f;
        float startG = ((startInt >>  8) & 0xff) / 255.0f;
        float startB = ( startInt        & 0xff) / 255.0f;

        int endInt = (Integer) endValue;
        float endA = ((endInt >> 24) & 0xff) / 255.0f;
        float endR = ((endInt >> 16) & 0xff) / 255.0f;
        float endG = ((endInt >>  8) & 0xff) / 255.0f;
        float endB = ( endInt        & 0xff) / 255.0f;

        // convert from sRGB to linear
        startR = (float) Math.pow(startR, 2.2);
        startG = (float) Math.pow(startG, 2.2);
        startB = (float) Math.pow(startB, 2.2);

        endR = (float) Math.pow(endR, 2.2);
        endG = (float) Math.pow(endG, 2.2);
        endB = (float) Math.pow(endB, 2.2);

        // compute the interpolated color in linear space
        float a = startA + fraction * (endA - startA);
        float r = startR + fraction * (endR - startR);
        float g = startG + fraction * (endG - startG);
        float b = startB + fraction * (endB - startB);

        // convert back to sRGB in the [0..255] range
        a = a * 255.0f;
        r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
        g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
        b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

        return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
    }
}

可以看到,這裡對顏色重新做了計算。
Evaluator 所做的工作大概如下:
image.png

自定義Evaluator

瞭解了Evaluator ,我們可以做點什麼呢?比如說,做個字母A-Z漸變動畫。

我們知道,字母A到字母Z之間的所有字母對應的數字區間為65到90,在程式中,我們能通過數字強轉成對應的字元。

 public class CharEvaluator implements TypeEvaluator<Character> {
        @Override
        public Character evaluate(float fraction, Character startValue, Character endValue) {
            int startInt = (int) startValue;
            int endInt = (int) endValue;
            int curInt = (int) (startInt + fraction * (endInt - startInt));
            char result = (char) curInt;
            return result;
        }
    }

動畫程式碼如下:

valueAnimator = ValueAnimator.ofObject(new CharEvaluator(), 'A', 'Z');
                valueAnimator.setDuration(2000);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        char text = (char) animation.getAnimatedValue();
                        tvDemo.setText(String.valueOf(text));
                    }
                });
                valueAnimator.start();

效果如下:
20181114_162913.gif

最後獻上原始碼 github

參考資料:自定義控制元件三部曲之動畫篇

你的認可,是我堅持更新部落格的動力,如果覺得有用,就請點個贊,謝謝