大家好，在前兩篇中，我們介紹了Android的補間動畫和插值器，這一篇，我們來說下屬性動畫。
- 【Android 動畫】動畫詳解之補間動畫（一）
- 【Android 動畫】動畫詳解之插值器（二）
- 【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輸入如下：
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的位置，效果如下：
我們再試試多幾個引數
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();
複製程式碼效果如下：
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();
複製程式碼效果如下：比之前柔滑了許多
@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();
複製程式碼效果如下：
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 所做的工作大概如下：
自定義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();
複製程式碼效果如下：
最後獻上原始碼 github
參考資料：自定義控制元件三部曲之動畫篇