屬性動畫與補間動畫總結篇(篇1)

- 這幾天在學習郭霖大神關於Android屬性動畫的博客,順便也總結總結那個那個冬天學習動畫的筆記,之所以說那個冬天,意義深刻,呵呵

屬性動畫是Android3.0之後推出的動畫機制，在3.0之前的動畫機制為補間動畫，那麼在學習屬性動畫的同時，也順便了解補間動畫以及兩者的區別

1.補間動畫

補間動畫只可以對View進行移動、旋轉、縮放和明暗度操作

通過代碼實現補間動畫的各類效果

1.1 補間動畫實現平移效果

    ImageView imgView =  (ImageView) findViewById(R.id.click);  //find控件對象

    //補間動畫實現平移效果
    TranslateAnimation translation = new TranslateAnimation(0,150,0,150);
    translation.setDuration(2000);              //設置動畫執行的時間
    translation.setFillAfter(true);             //保持動畫執行後的效果
    imgView.startAnimation(translation);        //開啟動畫

1.2 補間動畫實現透明度改變的效果

    AlphaAnimation alpha = new AlphaAnimation(0.2F,1F);
    alpha.setDuration(2000);                    //設置動畫執行的時間
    imgView.startAnimation(alpha);              //開啟動畫

1.3 補間動畫實現旋轉的效果

    //RotateAnimation rotate = new RotateAnimation(0,360,0,0);
    /**注釋:當imaghView的寬高為wrap_content時,旋轉的中心點為圖片的左上角位置
      *    當imageView的寬高為match_parent時，旋轉的中心點為屏幕左上角的位置
      *    在源碼中可以看到此Api 默認中心點的類型為Animation.ABSOLUTE;
     */

    /**
     *Animation.RELATIVE_TO_SELF 相對於imageView的位置，0.5f為imageView的中心位置
     *參數1、2 為開始旋轉和最終旋轉的角度值
     *參數3、5 為旋轉的中心點的類型
     *參數4、6 為旋轉中心點的值，位置跟中心點對應的的類型有關
     */
    RotateAnimation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5F
                                                ,Animation.RELATIVE_TO_SELF,0.5F);
    rotate.setDuration(2000);
    imgView.startAnimation(rotate);

1.4. 補間動畫實現縮放的效果

    /**
     * 參數1,2為水平方向的縮放因子,即imageView在橫向上從自身0.2倍的大小縮放到自身10倍的大小,
     * 參數3,4為豎直方向的縮放因子,即imageView在縱向上從自身0.2倍的大小縮放到自身10倍的大小,
     * 參數5,7為縮放的中心點的類型
     * 參數6,8為縮放的中心點的值
     */
    ScaleAnimation scale = new ScaleAnimation(0.2F,10,0.2F,10,Animation.RELATIVE_TO_SELF,0.5F,
            Animation.RELATIVE_TO_SELF,0.5F);
    scale.setDuration(2000);
    scale.setFillAfter(true);
    imgView.startAnimation(scale);

1.5.補間動畫的集成效果演示

    /**
     * 參數為true時,表示使用AnimationSet相關的差值器,差值器會在之後的筆記學習到
     * 參數為false時,表示使用各自動畫自身的差值器
     */
    AnimationSet set = new AnimationSet(false);         //實現集成的效果
    set.addAnimation(scale);                            //scale為上面ScaleAnimation對象
    set.addAnimation(rotate);                           //rotate為上面RotateAnimation對象
    imgView.startAnimation(set);

通過xml實現補間動畫的各類效果

1.在 res 文件夾下建立一個 anim 文件夾,然後在該文件夾下創建 xml 文件； 2.根標簽可以為scale、alpha、translate、rotate、set等,看本文後面的總結部分的3.2節； 3.根標簽的實現 看下面示例，跟上面的代碼實現基本一樣； 4.在代碼當中使用 AnimationUtils 加載 步驟1中創建的 xml 文件，並生成 Animation 對象。 附：因為AnimationSet 是 Animation 的子類，當需要使用 “AnimationSet”時， 可向上轉型，用 Animation 對象接收。

示例代碼：

    /**
     * 文件目錄:res/anim/scale_in.xml
     */
    
    

    

    /**
     *  在代碼當中使用 AnimationUtils 進行加載
     */
    Animation scaleAnimation = AnimationUtils.loadAnimation(this,R.anim.scale_in);
    scaleAnimation.setDuration(2000);
    view.startAnimation(scaleAnimation);

注意：

    在xml文件中關於旋轉縮放的中心點：

                    1)當值為"50"，表示使用絕對位置定位                    ABSOLUT 
                    2)當值為"50%"，表示使用相對於控件本身定位              RELATIVE_TO_SELF
                    3)當值為"50%p"，表示使用相對於該控件的父控件定位            RELATIVE_TO_PARENT

    確定 x 軸/y軸中心點坐標的類型：

                    1)有 ABSOLUT 絕對坐標
                    2)RELATIVE_TO_SELF 相對於自身坐標
                    3)RELATIVE_TO_PARENT 相對於父控件的坐標

2.屬性動畫

兼容包：NineOldAndroids
Android studio 引入方式： compile ‘com.nineoldandroids:library:2.4.0’

2.1 示例: 平移/旋轉屬性動畫

ObjectAnimator類 是屬性動畫中非常重要的一個類,繼承自ValueAnimator,其工作機制是通過特定屬性的get/set方法對屬性值進行改變,從而實現動畫效果.

    /**
     * 附:可以在View類的代碼中看到translationX/translationY/rotation屬性的get/set方法,
     * 通過get/set方法改變屬性值,從而實現動畫效果,下面三種屬性的動畫將同時施加在view上
     *
     * 參數1 為被施加動畫的對象
     * 參數2 為對象需要改變的屬性
     * 參數3 為可變數組,一組動畫值,開始過渡到結束...
     * setDuration 方法設置動畫的執行時間
     * start       方法用於開啟動畫
     */
       ObjectAnimator.ofFloat(view,"translationX",0,200F).setDuration(500).start(); //X軸平移
       ObjectAnimator.ofFloat(view,"translationY",0,200F).setDuration(500).start(); //Y軸平移
       ObjectAnimator.ofFloat(view,"rotation",0,360F).setDuration(500).start();     //旋轉



      /**
       * 示例
       * 設置圖片左右反轉的效果
       */
          //從0度旋轉到180度再旋轉到360度
         ObjectAnimator animator = ObjectAnimator.ofFloat(mIvlogo,"rotationY",0,180,360);   

         animator.setDuration(2000);                        //從開始到結束的時長
         animator.setRepeatCount(ObjectAnimator.INFINITE);  //設置無限循環
         animator.setRepeatMode(ObjectAnimator.REVERSE);    //設置動畫的類型為反轉
         animator.start();                                  //開啟動畫

2.2 疑惑：上面的第二個參數是不是可以隨意寫，如不可隨意寫，又有那些屬性可以設置？

當然不是可以隨意寫的，這些屬性都可以在View類中看到，看下面的截圖，大致就這些，其他的可以去查找View類裡面屬性的get/set方法

2.3 屬性動畫的組合：平移/旋轉 PropertyValuesHolder<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxibG9ja3F1b3RlPg0KCTxwPlByb3BlcnR5VmFsdWVzSG9sZGVyus1BbmltYXRvcqGhzazR+cq1z9bX1ENsb25lYWJsZb3Tv9osucvD+8u80uUsyvTQ1Ne0zKzWtbXEs9bT0NXfLLy0z8i2qNLlyvTQ1LXEzNjV9yzIu7rz1NnX99PD1Nq21M/zyc88L3A+DQo8L2Jsb2NrcXVvdGU+DQo8cHJlIGNsYXNzPQ=="brush:java;"> /** * api的展示上更加簡潔 */ PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("rotation",0,360F); //旋轉 PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationX",0,250F); //X軸平移 PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("translationY",0,250F); //Y軸平移 ObjectAnimator.ofPropertyValuesHolder(view,p1,p2,p3).setDuration(2000).start();

2.4 屬性動畫的組合：平移/旋轉 AnimatorSet

屬性動畫AnimatorSet類 跟 補間動畫的AnimationSet類的效果類似,都是將多個動畫組合到一起播放

    ObjectAnimator animator1 = ObjectAnimator.ofFloat(imgView,"translationX",0,200F).setDuration(2000);
    ObjectAnimator animator2 = ObjectAnimator.ofFloat(imgView,"translationY",0,200F).setDuration(2000);
    ObjectAnimator animator3 = ObjectAnimator.ofFloat(imgView,"rotation",0,360F).setDuration(2000);

    AnimatorSet set = new AnimatorSet();                                
    //set.playTogether(animator1,animator2,animator3);      //動畫效果疊加一同執行

    //順序是依照playSequentially()裡的參數依次執行
    set.playSequentially(animator1,animator2,animator3);    //按照代碼的順序，效果不疊加，依個執行
    set.start();

3.總結：

3.1 屬性動畫有強大的交互性，而且也能用於效果的顯示，而補間動畫則交互性非常差，所以屬性動畫的出現大大提高了與用戶的交互性

例如：假如我們對圖片設置了點擊可show Toast的事件，當設置補間位移動畫，圖片從（0，0）坐標移
動到（20，20）坐標後保持動畫執行後的效果，也就是停留在（20，20）的位置時，
點擊圖片讓其show Toast沒有任何反應，點擊（0，0）位置時則show toast。

3.2 補間動畫的定義：定義初始狀態和結束狀態，讓視圖在這兩種狀態之間實現漸變，動畫執行完後，視圖的初始狀態不會改變

AlphaAnimation：透明度（alpha）漸變效果，對應標簽。
TranslateAnimation：位移漸變，需要指定移動點的開始和結束坐標，對應標簽。
ScaleAnimation：縮放漸變，可以指定縮放的參考點，對應標簽。
RotateAnimation：旋轉漸變，可以指定旋轉的參考點，對應標簽。
AnimationSet：組合漸變，支持組合多種漸變效果，對應標簽。

 

3.3 屬性動畫與補間動畫的不同之處在於，動畫的執行會改變View的屬性狀態，故名屬性動畫。

translationX 和 translationY：這兩個屬性控制了View所處的位置，它們的值是由 layout容器設置的，是相對於坐標原點（0，0左上角）的一個偏移量;

rotation(三維), rotationX 和 rotationY：控制View繞著軸點（pivotX和pivotY）旋轉;

scaleX 和 scaleY：控制View基於pivotX和pivotY的縮放;

pivotX 和 pivotY：旋轉的軸點和縮放的基准點，默認是View的中心點;

x 和 y：描述了view在其父容器中的最終位置，是左上角左標和偏移量（translationX，translationY）的和;

aplha：透明度，1是完全不透明，0是完全透明.