擒猿小舖

大家都知道 Android 提供了 View Animation 可以簡單地在程式中對元件實現動畫效果

View Animation 中又分為 Tween Animation 和 Frame Anmation

Tween Animation 提供設定 Alpha、Scale、Translate 和 Rotate 等動畫效果

Frame Anmation 則是可以指定每一個影格的影像檔和播放長度，以卡通的方式播放

但這兩種都太簡單了，所以今天不想講

今天研究的主題是 Android 3.0 後開始支援的 Property Animation

這是一個功能更強大的動畫技術，實現了 View Animation 無法達成的動畫效果

如：變更文字大小與顏色的動畫、當元件旋轉至特定角度時執行某樣工作等

幹你娘太強啦~~

Property Animation 主要由兩個元件來實現：ObjectAminator 和 ValueAminator

首先來看 Property Animation 的初階用法：

對一個 TextView 達成旋轉效果：

ObjectAnimator animTxtRotate =
        ObjectAnimator.ofFloat(mTxt, "rotation", 0, 360);
animTxtRotate.setDuration(3000);
animTxtRotate.setRepeatCount(1);
animTxtRotate.setRepeatMode(ObjectAnimator.REVERSE);
animTxtRotate.setInterpolator(new AccelerateDecelerateInterpolator());
animTxtRotate.start();

對一個 TextView 達成透明度變換效果：

ObjectAnimator animTxtAlpha =
        ObjectAnimator.ofFloat(mTxt, "alpha", 1, 0);
animTxtAlpha.setDuration(2000);
animTxtAlpha.setRepeatCount(1);
animTxtAlpha.setRepeatMode(ObjectAnimator.REVERSE);
animTxtAlpha.setInterpolator(new LinearInterpolator());
animTxtAlpha.start();

對一個 TextView 達成掉落效果：

ObjectAnimator animTxtFalling =
        ObjectAnimator.ofFloat(mTxt, "y", 0, 500);
animTxtFalling.setDuration(2000);
animTxtFalling.setRepeatCount(ObjectAnimator.INFINITE);
animTxtFalling.setInterpolator(new BounceInterpolator());
animTxtFalling.start(); 

用法很簡單，宣告一個 ObjectAnimator 物件，然後把要套用動畫的元件和屬性指定給它

這些用 View Animation 也可以達成，以下是介紹 Property Animation 的進階用法：

對一個 TextView 達成文字放大效果：

ValueAnimator animTxtScale =
        ValueAnimator.ofInt(0, 50);
animTxtScale.setDuration(500);
animTxtScale.setRepeatCount(1);
animTxtScale.setRepeatMode(ObjectAnimator.REVERSE);
animTxtScale.setInterpolator(new LinearInterpolator());
animTxtScale.addUpdateListener(new AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        // TODO Auto-generated method stub
        int val = (Integer) animation.getAnimatedValue();
        mTxt.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15 + val);
    }
});
animTxtScale.start();

此例我們可以看到，先用 ValueAnimator 計算出動畫畫面所對應的參數值，然後指定一個AnimatorUpdatorListener 給它

當動畫播放時的 onAnimationUpate() call back 被觸發時，再去對目標元件執行 SetTextSize 的動作，如此一來文字的大小就會隨著時間而變化，強！

對一個 TextView 達成左右移動效果：

float x, xEnd1, xEnd2;

x = mTxt.getX();
xEnd1 = 0;
xEnd2 = mLinLay.getWidth() - mTxt.getWidth();

ObjectAnimator animTxtMove1 =
        ObjectAnimator.ofFloat(mTxt, "x", x, xEnd1);
animTxtMove1.setDuration(500);
animTxtMove1.setInterpolator(new  AccelerateDecelerateInterpolator());

ObjectAnimator animTxtMove2 =
        ObjectAnimator.ofFloat(mTxt, "x", xEnd1, xEnd2);
animTxtMove2.setDuration(500);
animTxtMove2.setInterpolator(new  AccelerateDecelerateInterpolator());

ObjectAnimator animTxtMove3 =
        ObjectAnimator.ofFloat(mTxt, "x", xEnd2, x);
animTxtMove3.setDuration(500);
animTxtMove3.setInterpolator(new  AccelerateDecelerateInterpolator());

AnimatorSet animTxtMove = new AnimatorSet();
animTxtMove.playSequentially(animTxtMove1, animTxtMove2, animTxtMove3);
animTxtMove.start();

此例中，先建立好向左移動、向右移動、回到原點等三個  ObjectAnimator 動畫物件

再利用 AnimatorSet 的 platSequentially 方式設定好撥放順序，start 之後便會依序執行這三個動畫元件，強！

對背景達成顏色漸層動畫效果：

int iBackColorRedVal, iBackColorRedEnd;
final int iBackColor = ((ColorDrawable)(mLinLay.getBackground())).getColor();
iBackColorRedVal = (iBackColor & 0x00FF0000) >> 16;

if (iBackColorRedVal > 127)
    iBackColorRedEnd = 0;
else
    iBackColorRedEnd = 255;

ValueAnimator animScreenBackColor =
        ValueAnimator.ofInt(iBackColorRedVal, iBackColorRedEnd);
animScreenBackColor.setDuration(3000);
animScreenBackColor.setInterpolator(new LinearInterpolator());
animScreenBackColor.addUpdateListener(new AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        // TODO Auto-generated method stub
        int val = (Integer) animation.getAnimatedValue();
        mLinLay.setBackgroundColor(iBackColor & 0xFF00FFFF | val << 16);
    }
});
animScreenBackColor.start();

此例中我們欲漸層變化背景顏色的紅色強度

為了達成顏色漸層的效果，我們先取得背景的顏色值，將該值與 0x00FF0000 做 bit 運算

若結果 > 127 表示目前背景的紅色強度為偏強，則漸層減弱，反之則漸層增加其紅色強度

一樣用 ValueAnimator 計算出動畫畫面所對應的參數值，然後指定一個 AnimatorUpdatorListener 給它

當 onAnimationUpate() 被觸發時，動態去更改背景顏色的紅色強度，如此便可以看到背景的紅色隨著時間而顯示的漸層效果

強！