Animation動畫詳解

Animations動畫介紹：

Animation動畫是將動畫經過xml或者java代碼定義，並按照定義好的圖像變換方式、觸發時間、持續時間、循環次數等相關定義來播放動畫。

Android中動畫的實現分兩種方式，一種方式是補間動畫 Tween Animation，就是說你定義一個開始和結束，中間的部分由程序運算獲得。另外一種叫逐幀動畫 Frame Animation，就是說一幀一幀的連起來播放就變成了動畫。

AnimationSet的使用方法：

什麼是  AnimationSet  ？

       一、AnimationSet是Animation的子集；

       二、一個AnimationSet包含了一系列的Animation；

       三、針對AnimationSet設置一些Animation的常見屬性（如startOffset，duration等等），能夠被包含在AnimationSet當中的Animation集成；

Interpolator的使用方法：

什麼是  Interpolator  ？

Interpolator  定義了動畫變化的速率，提供了對動畫進度的控制，在  Animations  框架當中定義瞭如下幾種  Interpolator  ：

LinearInterpolator：在動畫開始和結束過程當中以均勻的速率改變；

AccelerateInterpolator：在動畫開始的地方速率改變比較慢，而後開始加速；

DecelerateInterpolator：在動畫開始的地方速率改變比較慢，而後開始減速；

AccelerateDecelerateInterpolator：在動畫開始與結束的地方速率改變比較慢，在中間的時候加速；

CycleInterpolator：動畫循環放特定的次數，速率改變沿着正弦曲線；

1、補間動畫 (一)補間動畫介紹：

補間動畫   Tween Animation  ，就是說你定義一個開始和結束，中間的部分由程序運算獲得。

(二)補間動畫的分類：

這四種補間動畫都是Animation的子類

透明補間動畫:   AlphaAnimation    淡入淡出效果

縮放補間動畫:   ScaleAnimation   縮放效果

旋轉補間動畫:   RotateAnimation   旋轉效果

轉移補間動畫:   TranslateAnimation    移動效果

(三)補間動畫的通用屬性(設置animationSet)

1  、  setDuration(longdurationMills);  設置動畫持續時間  (  單位：毫秒  )

2  、  setFileAfter(booleanfillAfter);  若是  fillAfter  的值爲  true  ，則動畫執行後，空間將停留在執行結束的狀態；

3  、  setFillBefore(booleanfillBefore);  若是  fillBefore  的值爲  true  ，則動畫執行後，控件將回到動畫執行以前的狀態；

4  、  setStartOffSet(longstartOffSet);  設置動畫執行以前的等待時間；

5  、  setRepeatCount(intrepeatCount);  設置動畫重複執行的次數；

(四)使用補間動畫的第一種方法步驟（純java代碼）：

一、建立一個AnimationSet對象

二、根據須要建立相應的Animation對象

三、根據軟件動畫的需求，爲Animation對象設置相應的數據；

四、將Animation對象添加到AnimationSet對象當中；

五、使用控件對象開始執行AnimationSet；

AlphaAnimation（淡入淡出效果）：

AlphaAnimation alphaAnimation=  new  AlphaAnimation(fromAlpha, toAlpha);

參數介紹：

fromAlpha:  動畫開始時的透明度，  1  表示徹底不透明，  0  表示全透明

toAlpha:  動畫結束時的透明度

代碼以下：

//  建立一個  AnimationSet  對象

AnimationSet animationSet =   new   AnimationSet(  true  );

//  建立一個  AlphaAnimation  對象

AlphaAnimation alphaAnimation =   new   AlphaAnimation(1, 0);

//  設置動畫執行的時間（單位：毫秒）

      alphaAnimation.setDuration(1000);

//  將  AlphaAnimation  對象添加到  AnimationSet  當中

      animationSet.addAnimation(alphaAnimation);

//  使用  ImageView  的  startAnimation  方法開始執行動畫

        imageView  .startAnimation(animationSet);

TranslateAnimation（移動效果）：

TranslateAnimationtranslateAnimation=  new   TranslateAnimation(

fromXType,fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);

參數介紹：

fromXType:  動畫起始時  X  軸的位置

fromXValue: 0f

toXType  ：動畫結束時  X  軸的位置

toXValue:  0.5f

fromYType:  動畫起始時  Y  軸的位置

fromYValue:0f

toYType:  動畫結束時  Y  軸的位置

toYValue:   0.5f

注：若沒有指定  fromXType,toXType, fromYType,toYType  的時候，默認是以本身爲相對參照物

java  代碼以下：    

AnimationSet animationSet =   new   AnimationSet(  true  );

TranslateAnimationtranslateAnimation =   new   TranslateAnimation(

Animation.  RELATIVE_TO_SELF  ,0f,Animation.  RELATIVE_TO_SELF  , 0.5f, Animation.  RELATIVE_TO_SELF  , 0f, Animation.  RELATIVE_TO_SELF  , 1.0f);

         translateAnimation.setDuration(1000);

      animationSet.addAnimation(translateAnimation);

           imageView  .startAnimation(animationSet);

RotateAnimation（旋轉效果）：

RotateAnimationrotateAnimation=  new  RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType,pivotYValue);

參數介紹：

fromDegrees  ：  動畫起始時物件的角度

toDegrees  ：  動畫結束時物件的角度，能夠大於  360  ，也能夠是負數

pivotXType：動畫相對於物件的x軸的開始位置

Animation.RELATIVE_TO_SELF相對於自身的座標

Animation.  ABSOLUTE  絕對座標

Animation.  RELATIVE_TO_PARENT相對於父控件身的座標

pivotXValue  ：浮點數值   1f  最下面，  0f  最左邊

pivotYType：動畫相對於物件的Y軸的開始位置

pivotYValue  ：浮點數值   1f  最下面，  0f  最左邊

注：當角度爲負數時，表示逆時針旋轉；當角度爲正數時，表示順時針旋轉！

java  代碼以下：

AnimationSet animationSet =   new   AnimationSet(  true  );

   RotateAnimationrotateAnimation =   new   RotateAnimation(0, 360,

                Animation.  RELATIVE_TO_PARENT  ,1f,

                Animation.  RELATIVE_TO_PARENT  ,0f);

         rotateAnimation.setDuration(5000);

         animationSet.addAnimation(rotateAnimation);

           imageView  .startAnimation(animationSet);

ScaleAnimation（縮放效果）：

ScaleAnimationscaleAnimation =  new  ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType,pivotYValue);

參數介紹：

fromX  ：動畫起始時  X  軸上的伸縮尺寸   1f

toX  ：動畫結束時  X  軸上的伸縮尺寸    0.1f

fromY  ：動畫起始時  Y  軸上的伸縮尺寸   1f

toY  ：動畫結束時  Y  軸上的伸縮尺寸  1f
pivotXType  ：動畫相對於物件的  X  軸的開始位置

pivotXValue  ：

pivotYType  ：動畫相對於物件的  Y  軸的開始位置

pivotYValue

注：  0  表示收縮到沒有，  1  表示正常狀態！

java  代碼以下：

AnimationSet animationSet =   new   AnimationSet(  true  );

ScaleAnimation scaleAnimation =     new   ScaleAnimation(1, 0.1f, 1, 0.1f, Animation.  RELATIVE_TO_SELF,0.5f,Animation

.  RELATIVE_TO_SELF  , 0.5f);

         animationSet.addAnimation(scaleAnimation);

         animationSet.setStartOffset(1000);

         animationSet.setFillAfter(  true  );

         animationSet.setFillBefore(  false  );

         animationSet.setDuration(2000);

           imageView  .startAnimation(animationSet);

注：在  java  代碼中可使用多種動畫效果！

代碼以下：

//   聲明一個  AnimationSet  對象

         AnimationSetanimationSet =   new  AnimationSet(  false  );

         AlphaAnimationalpha =   new  AlphaAnimation(1.0f, 0.0f);

         RotateAnimationrotate =   new  RotateAnimation(0, 360,

                Animation.  RELATIVE_TO_SELF  ,0.5f,

                Animation.  RELATIVE_TO_SELF  ,0.5f);

         animationSet.addAnimation(alpha);

         animationSet.addAnimation(rotate);

         animationSet.setDuration(2000);

         animationSet.setStartOffset(500);

           imageView  .startAnimation(animationSet);

(五)使用補間動畫的第二種方法步驟：

1  、在  res  文件夾下面新建一個名爲  anim  的文件夾；

2  、建立  xml  文件，並首先加入  set  標籤，該標籤以下：

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android  :anim/accelerate_interpolator">

</  set  >

3  、在該  (set  標籤  )  標籤當中加入  rotate  ，  alpha  ，  scale  或者  translate  標籤；

4  、在代碼當中使用  AnimationUtils  當中裝載  xml  文件，並生產  Animation  對象；

AlphaAnimation（淡入淡出效果）：

alpha.xml  ：

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android  :anim/accelerate_interpolator">

     <  alpha

        android:duration="500"

        android:fromAlpha="1.0"

        android:startOffset="500"

        android:toAlpha="0.0" />

</  set  >

Java  代碼：

//  使用  AnimationUtils  裝載動畫設置文件

Animation animation=AnimationUtils.loadAnimation(

MainActivity.  this  , R.anim.  alpha  );

          imageView  .startAnimation(animation);

TranslateAnimation（移動效果）：

translate.xml

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android  :anim/accelerate_interpolator">

      <  translate

        android:fromXDelta="50%"

        android:toXDelta="100%"

        android:fromYDelta="0%"

        android:toYDelta="100%"

        android:duration="2000" />

</  set  >

Java  代碼：

//  使用  AnimationUtils  裝載動畫設置文件

Animation animation=AnimationUtils.loadAnimation(

MainActivity.  this  , R.anim.  translate  );

          imageView  .startAnimation(animation);

RotateAnimation（旋轉效果）：

rotate.xml:

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android  :anim/accelerate_interpolator">

      <  rotate   android:fromDegrees="0"

        android:toDegrees="360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:duration="5000" />

</  set  >

注：  android:pivotX  的值共有三中設置方法：

android:pivotX="50"  這種方法使用絕對位置定位；

android:pivotX="50%"  這種方法相對控件自己定位；

android:pivotX="50%p"  這種方法相對控件的父控件定位；

android:pivotY  的值同上！

Java  代碼：

//  使用  AnimationUtils  裝載動畫設置文件

Animation animation=AnimationUtils.loadAnimation(

MainActivity.  this  , R.anim.  rotate  );

          imageView  .startAnimation(animation);

ScaleAnimation（縮放效果）：

scale.xml:

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android  :anim/accelerate_interpolator">

      <  scale   android:fromXScale="1.0"

        android:toXScale="0.0"

        android:fromYScale="1.0"

        android:toYScale="0.0"

        android:pivotX="50%"

        android:pivotY="50%"

        android:duration="2000" />

</  set  >

Java  代碼：

//  使用  AnimationUtils  裝載動畫設置文件

Animation animation=AnimationUtils.loadAnimation(

MainActivity.  this  , R.anim.  sacle  );

          imageView  .startAnimation(animation);

注：在  xml  文件中能夠同時設置多種動畫效果！

代碼以下：

<?  xml   version="1.0"encoding="utf-8"?>

<  set   xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android :anim/accelerate_interpolator"

    android:shareInterpolator="true">   

      <  alpha

        android:fromAlpha="1.0"

        android:toAlpha="0.0"

        android:startOffset="500"

        android:duration="2000" />

      <  rotate   android:fromDegrees="0"

        android:toDegrees="360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:duration="2000" />

</  set  >

2、逐幀動畫Frame-By-Frame Animations

Frame動畫是經過對多張系列幀圖片的不停切換從而達到視覺上的動畫效果。

(一)Frame動畫的通用屬性(設置animationDrawable)

1  、  animationDrawable.start();    啓動動畫

2  、  animationDrawable.stop();    中止動畫

3  、  isRunning      當前動畫是否在運行

4  、  getNumberOfFrames    動畫中幀的數目

5  、  getDuration    指定索引在動畫中的毫秒數

6  、  addFrame    添加幀到動畫中

7  、  nextFrame    動畫下一幀

8  、  setOneShot    設置是否循環

2、逐幀動畫Frame-By-Frame Animations

Frame動畫是經過對多張系列幀圖片的不停切換從而達到視覺上的動畫效果。

(一)Frame動畫的通用屬性(設置animationDrawable)

1  、  animationDrawable.start();    啓動動畫

2  、  animationDrawable.stop();    中止動畫

3  、  isRunning      當前動畫是否在運行

4  、  getNumberOfFrames    動畫中幀的數目

5  、  getDuration    指定索引在動畫中的毫秒數

6  、  addFrame    添加幀到動畫中

7  、  nextFrame    動畫下一幀

8  、  setOneShot    設置是否循環

(二)逐幀動畫的使用方法：

1  、在  res/drawable  文件夾下多放幾張圖片，並在其目錄下新建一個  anim_nv.xml  文件，

代碼以下：

<?  xml   version="1.0"encoding="utf-8"?>

<  animation-list   xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

      <  item   android:drawable="@drawable/nv1" android:duration="500" />

      <  item   android:drawable="@drawable/nv2" android:duration="500" />

      <  item   android:drawable="@drawable/nv3" android:duration="500" />

      <  item   android:drawable="@drawable/nv4" android:duration="500" />

</  animation-list  >

其中：

android:oneshot  =  "false"    該屬性設置圖片循環播放 
android:duration  =  "500"     該屬性設置每幅圖片的顯示時間爲  500ms

2  、在  java  代碼中寫：

imageView  .setBackgroundResource(R.drawable.  anim_nv  );

//  建立  AnimationDrawable  對象

AnimationDrawable animationDrawable=(AnimationDrawable)

imageView.getBackground();

   animationDrawable.start();

LayoutAnimationController介紹

什麼是  LayoutAnimationController  ？

       1  、  LayoutAnimationController  用於爲一個  layout  裏面的控件，或者是一個  ViewGroup  裏面的控件設置動畫效果；

       2  、每個控件都有相同的動畫效果；

       3  、這些控件的動畫效果在不一樣的時間顯示出來；

       4  、  LayoutAnimationController  能夠在  xml  文件當中設置，也能夠在代碼中進行設置；

1、在xml佈局當中使用LayoutAnimationController的步驟：

1  、在  res/anim  文件夾當中建立一個新文件，名爲  list_anim_layout.xml

代碼以下：

<?  xml   version="1.0"encoding="utf-8"?>

<  layoutAnimation   xmlns:android="http://schemas.android.com/apk/res/android"

    android:animation="@anim/list_anim"

    android:animationOrder="normal"

android:delay=  "2"   />

其中：  list_anim.xml  爲設置動畫的文件（如  alpha.xml  ）

android:animation  =  "@anim/list_anim"   在佈局文件當中爲  ListView  添加以下配置

android:animationOrder  =  "normal"    動畫執行順序     random  隨機、  normal  正常、  reverse  倒序

android:delay  =  "2"    兩個控件顯示間隔爲  0.5s

2  、在  main.xml  佈局文件當中爲  ListView  標籤添加以下配置：

android:layoutAnimation  =  "@anim/list_anim_layout"

注：在  java  代碼中什麼也不須要寫！

2、在java代碼當中使用LayoutAnimationController的步驟：

1  、建立一個  Animation  對象

能夠經過裝載xml文件，或者直接使用Animation的構造函數建立Animation對象

Animationanimation = (Animation)AnimationUtils.loadAnimation(

MainActivity.  this  , R.anim.  list_anim  );

2  、使用以下代碼建立  LayoutAnimationController  對象

LayoutAnimationController lac =   new  LayoutAnimationController(animation);

3  、設置控件的屬性

//  圖片顯示的順序

//ORDER_NORMAL  表示順序播放，  ORDER_RANDOM  隨機播放，  ORDER_REVERSE  倒序播放

lac.setOrder(LayoutAnimationController.  ORDER_NORMAL  );
//  圖片顯示的間隔

lac.setDelay(0.5f);

4  、爲  ListView  設置  LayoutAnimationController  屬性

listView  .setLayoutAnimation(lac);

AnimationListener介紹：

什麼是  AnimationListener  ？

1  、  AnimationListener  是一個監聽器；

2  、該監聽器在動畫執行的各個階段會獲得通知，從而調用相應的方法；

3  、主要包含如下的三個方法：

一、onAnimationEnd(Animation animation) 動畫效果結束時調用

二、onAnimationRepeat(Animation animation) 動畫效果重複時調用

三、onAnimationStart(Animation animation) 動畫效果啓動時調用

操做步驟：

1  、爲佈局設置  id

2  、建立一個  ViewGroup  並初始化

ViewGroupviewGroup =(ViewGroup)findViewById(R.id.  layoutId  );

3  、在刪除按鈕  removeButton  裏設置監聽

removeButton   = (Button)findViewById(R.id.  removeButtonId  );

removeButton  .setOnClickListener(  new   OnClickListener() {

           @Override

     public     void   onClick(View v) {

              //  建立一個淡出效果的  Animation  對象

AlphaAnimation animation =   new  AlphaAnimation(1.0f,0.0f);

              //  爲  Animation  對象設置屬性

            animation.setDuration(1000);

            animation.setStartOffset(500);

              //  爲  Animation  對象設置監聽器

animation.setAnimationListener(  new   AnimationListener() {

        @Override

        public     void   onAnimationStart(Animationanimation) {

                     //   TODO   Auto-generatedmethod stub

                }

        @Override

        public     void   onAnimationRepeat(Animationanimation) {

                     //   TODO   Auto-generatedmethod stub

                }

        @Override

        public     void   onAnimationEnd(Animation animation){

                     //  從  viewGroup  當中刪除掉  imageView  控件

                     viewGroup  .removeView(  imageView  );

                }

            });

              imageView  .startAnimation(animation);

         }

      });

4  、在添加按  addButton  鈕裏設置監聽

addButton  = (Button)findViewById(R.id.  addButtonId  );

addButton  .setOnClickListener(  new   OnClickListener() {

           @Override

           public     void   onClick(View v) {

//  建立了一個淡入效果的  Animation  對象

AlphaAnimation animation =   new   AlphaAnimation(0.0f,1.0f);

            animation.setDuration(1000);

            animation.setStartOffset(500);

//  建立一個新的  ImageView

ImageView imageViewAdd =   new   ImageView(MainActivity.  this  );

      imageViewAdd.setImageResource(R.drawable.  icon  );

//  將新的  ImageView  添加到  viewGroup  當中

viewGroup  .addView(imageViewAdd,  new   LayoutParams(LayoutParams

.  FILL_PARENT  , LayoutParams.  WRAP_CONTENT  ));

              //  啓動動畫

            imageViewAdd.startAnimation(animation);

         }

      });