ValueAnimator(好用的動畫類別)

這裡介紹簡單又好用的動畫類別 ValueAnimator ,有時候我們想做些簡單的過場動畫或是特別按鍵動畫,遊戲的實現上相當簡單,以分工而言,程式設計師基本上只要負責影格的播放即可,其他的部分都交給視覺人員來完成,但在應用程式上,各部份元件(按鈕,清單,佈局等等)就沒有影格來達到特別的動畫呈現,此時 ValueAnimator 就能達到我們的需求,先給個簡單的範例如下

   1:  ValueAnimator fadein = ObjectAnimator.ofFloat(button, "alpha", 0f, 1f);

   2:  fadein.setDuration(4000);

   3:  fadein.start();

第 1 行建立 ValueAnimator 物件 fadein , ObjectAnimator 是其子類別,這裡使用多型建立 fadein 第 1 個參數為動畫的目標,第 2 個參數為改變的特性, 第 3 個參數為起始的數值, 第 4 個參數為結束的數值
第 2 行設定動畫時間,為 4 秒
第 3 行執行動畫

簡單的 3 行就能達到淡入的效果,當然還有其它的動畫種類能選擇,如放大縮小(scale),旋轉(rotation)等等,開始執行動畫後如果需要取得動畫結束,取消等等的狀態,這時候就需要加入 AnimatorListener 來偵測,如下

   1:          ValueAnimator fadein = ObjectAnimator.ofFloat(logoView, "alpha", 0f, 1f);

   2:          fadein.setDuration(5000);

   3:          fadein.addListener(new AnimatorListener() {

   4:              

   5:              @Override

   6:              public void onAnimationStart(Animator animation) {

   7:                  // TODO Auto-generated method stub

   8:                  

   9:              }

  10:              

  11:              @Override

  12:              public void onAnimationRepeat(Animator animation) {

  13:                  // TODO Auto-generated method stub

  14:                  

  15:              }

  16:              

  17:              @Override

  18:              public void onAnimationEnd(Animator animation) {

  19:                  // TODO Auto-generated method stub

  20:                  //動畫結束後要做的事寫在這

  21:              }

  22:              

  23:              @Override

  24:              public void onAnimationCancel(Animator animation) {

  25:                  // TODO Auto-generated method stub

  26:                  

  27:              }

  28:          });

第 3 行加入監聽器之後就能知道甚麼時候動畫結束,也可以同時或依序來執行多種動畫,這時候建議使用 AnimatorSet 來搭配使用,以下是 1 個 2 秒淡入,2秒靜止,2秒淡出的動畫範例

   1:          ValueAnimator fadein = ObjectAnimator.ofFloat(logoView, "alpha", 0f, 1f);

   2:          fadein.setDuration(2000);

   3:          

   4:          ValueAnimator standby = ObjectAnimator.ofFloat(logoView, "alpha", 1f, 1f);

   5:          standby.setDuration(2000);

   6:          

   7:          ValueAnimator fadeout = ObjectAnimator.ofFloat(logoView, "alpha", 1f, 0f);

   8:          fadeout.setDuration(2000);

   9:          

  10:          AnimatorSet bouncer = new AnimatorSet();

  11:          bouncer.playSequentially(fadein,standby,fadeout);

  12:          bouncer.start();

和上述的範例一樣,先建立 3 段動畫
第 10 行建立 AnimatorSet 物件
第 11 行使用依序播放,參數順序代表播放順序
第 12 行播放

同時播放動畫的範例如下

   1:                  ValueAnimator rotationY = ObjectAnimator.ofFloat(bYes, "rotationY", 0f, 360f);

   2:                  ValueAnimator rotationX = ObjectAnimator.ofFloat(bYes, "rotationX", 0f, 360f);

   3:                  rotationY.setDuration(1000);                

   4:                  rotationX.setDuration(500);

   5:                 

   6:                  AnimatorSet as = new AnimatorSet();

   7:                  as.playTogether(rotationY,rotationX);

   8:                  as.start();

只要修改 playSequentially 為 playTogether 就OK囉,上面的範例可以用在按鍵的特效, AnimatorSet 也可以參雜使用如下

   1:          ValueAnimator rotationY = ObjectAnimator.ofFloat(logoView, "rotationY", 0f, 360f);

   2:          ValueAnimator rotationX = ObjectAnimator.ofFloat(logoView, "rotationX", 0f, 360f);

   3:          rotationY.setDuration(5000);                

   4:          rotationX.setDuration(2500);

   5:          

   6:          AnimatorSet scalexy = new AnimatorSet();

   7:          scalexy.playTogether(rotationY,rotationX);

   8:          

   9:          

  10:          ValueAnimator standby = ObjectAnimator.ofFloat(logoView, "alpha", 1f, 1f);

  11:          standby.setDuration(1000);

  12:          

  13:          ValueAnimator fadeout = ObjectAnimator.ofFloat(logoView, "alpha", 1f, 0f);

  14:          fadeout.setDuration(2000);

  15:          

  16:          AnimatorSet bouncer = new AnimatorSet();

  17:          bouncer.playSequentially(scalexy,standby,fadeout);

  18:          

  19:          bouncer.start();

第 1 ~ 7行為第 1 個 AnimatorSet ,動畫內容為同時旋轉X,Y軸
第 10 ~ 16行為第 2 個 AnimatorSet ,動畫內容為播放第 1 個 AnimatorSet 後,再播放靜止和淡出

只要使用上述的技巧就能組合出自己想要的動畫,不只如此,在每個動畫中還能設定反轉,重複播放,動畫播放速度的細節,以及加速器,減速器,線性加速器等等,相當好用~~

結果為
Logo翻轉中

Posted in: Android App