Android Animation動畫的xml使用

標籤：android   animation   xml   

在Android應用程式，使用動畫效果，能帶給使用者更好的感覺，做動畫可以通過XML或Android代碼來實現。

Animation動畫效果的實現可以通過兩種方式進行實現，一種是tweened animation （漸層動畫），另一種是frame by frame animation （畫面轉換動畫）。

tweened animation漸層動畫有以下兩種類型：

1.alpha     漸層透明度動畫效果

2.scale    漸層尺寸伸縮動畫效果

frame by frame animation 畫面轉換動畫有以下兩種類型：

1.translate   畫面轉換位置移動動畫效果

2.rotate    畫面轉移旋轉動畫效果

在這裡，我使用XML來做動畫。實現基本的動畫，如淡入，旋轉等。

步驟：1、首先在res目錄中建立anim的檔案夾，在anim中建立需要的動畫xml資源檔。

anim/alpha.xml（漸層動畫）

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <alpha        android:fromAlpha="0.1"        android:toAlpha="1.0"        android:duration="3000"/> <!-- 透明度控制動畫效果 alpha        浮點型值：            fromAlpha 屬性為動畫起始時透明度  0.0表示完全透明            toAlpha   屬性為動畫結束時透明度  1.0表示完全不透明            以上值取0.0-1.0之間的float資料類型的數字                長整型值：            duration  屬性為動畫期間 以毫秒為單位--></set>

anim/scale.xml（伸縮動畫）

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">   <scale            android:interpolator="@android:anim/accelerate_decelerate_interpolator"          android:fromXScale="0.0"          android:toXScale="1.4"          android:fromYScale="0.0"          android:toYScale="1.4"          android:pivotX="50%"          android:pivotY="50%"          android:fillAfter="false"          android:duration="700" /></set><!-- 尺寸伸縮動畫效果 scale       屬性：interpolator 指定一個動畫的插入器        在實驗過程中，使用android.res.anim中的資源時候發現        有三種動畫插入器:            accelerate_decelerate_interpolator  加速-減速 動畫插入器            accelerate_interpolator        加速-動畫插入器            decelerate_interpolator        減速- 動畫插入器        其他的屬於特定的動畫效果      浮點型值：            fromXScale 屬性為動畫起始時 X座標上的伸縮尺寸            toXScale   屬性為動畫結束時 X座標上的伸縮尺寸                    fromYScale 屬性為動畫起始時Y座標上的伸縮尺寸            toYScale   屬性為動畫結束時Y座標上的伸縮尺寸            說明:以上四種屬性值                        0.0表示收縮到沒有                     1.0表示正常無伸縮                         值小於1.0表示收縮                      值大於1.0表示放大            pivotX     屬性為動畫相對於物件的X座標的開始位置            pivotY     屬性為動畫相對於物件的Y座標的開始位置            說明:   以上兩個屬性值 從0%-100%中取值                    50%為物件的X或Y方向座標上的中點位置                長整型值：            duration  屬性為動畫期間   以毫秒為單位        布爾型值:            fillAfter 屬性 當設定為true ，該動畫轉化在動畫結束後被應用-->

anim/translate.xml(移動動畫)

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">     <translate        android:fromXDelta="30"        android:toXDelta="-80"        android:fromYDelta="30"        android:toYDelta="300"        android:duration="2000"/><!-- translate 位置轉移動畫效果        整型值:            fromXDelta 屬性為動畫起始時 X座標上的位置                toXDelta   屬性為動畫結束時 X座標上的位置            fromYDelta 屬性為動畫起始時 Y座標上的位置            toYDelta   屬性為動畫結束時 Y座標上的位置            注意:                     沒有指定fromXType toXType fromYType toYType 時候，                     預設是以自己為相對參照物                     長整型值：            duration  屬性為動畫期間   以毫秒為單位--></set>

anim/rotate.xml(旋轉動畫)

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <rotate         android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:fromDegrees="0"         android:toDegrees="+350"                 android:pivotX="50%"         android:pivotY="50%"             android:duration="3000" />  <!-- rotate 旋轉動畫效果       屬性：interpolator 指定一個動畫的插入器             在實驗過程中，使用android.res.anim中的資源時候發現             有三種動畫插入器:                accelerate_decelerate_interpolator   加速-減速 動畫插入器                accelerate_interpolator               加速-動畫插入器                decelerate_interpolator               減速- 動畫插入器             其他的屬於特定的動畫效果                                  浮點數型值:            fromDegrees 屬性為動畫起始時物件的角度                toDegrees   屬性為動畫結束時物件旋轉的角度 可以大於360度                       說明:    當角度為負數——表示逆時針旋轉                     當角度為正數——表示順時針旋轉                                   (負數from——to正數:順時針旋轉)                        (負數from——to負數:逆時針旋轉)                      (正數from——to正數:順時針旋轉)                      (正數from——to負數:逆時針旋轉)                   pivotX     屬性為動畫相對於物件的X座標的開始位置            pivotY     屬性為動畫相對於物件的Y座標的開始位置                            說明:  以上兩個屬性值 從0%-100%中取值                   50%為物件的X或Y方向座標上的中點位置        長整型值：            duration  屬性為動畫期間   以毫秒為單位--></set>

2、xml資源檔建立完成之後，接下來就是調用這些資源檔。以alpha為例，先建立AlphaActivity。

在activity_alpha.xml中隨便放一張背景圖片

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/test_bg"    tools:context=".AlphaActivity" ></RelativeLayout>

AlphaActivity.java

package com.example.animation_demo; import android.os.Bundle;import android.app.Activity;import android.view.View;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationUtils;import android.widget.Toast; public class AlphaActivity extends Activity {     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        View view=View.inflate(this, R.layout.activity_alpha, null);        setContentView(view);        //使用AnimationUtils類的靜態方法loadAnimation()來載入XML中的動畫XML檔案        Animation animation=AnimationUtils.loadAnimation(this, R.anim.alpha);        view.startAnimation(animation);        animation.setAnimationListener(new AnimationListener() {            @Override            public void onAnimationStart(Animation arg0) {}   //在動畫開始時使用                         @Override            public void onAnimationRepeat(Animation arg0) {}  //在動畫重複時使用            @Override            public void onAnimationEnd(Animation arg0) {                Toast.makeText(AlphaActivity.this, "在動畫結束時使用", Toast.LENGTH_SHORT).show();            }        });    }}

這個是整個layout檔案的動畫，也可以讓任何UI元素調用starAnimation方法。

例如：textMsg.startAnimation(animation); 這時候就不需要下面代碼 動畫填充指定xml了

View view=View.inflate(this, R.layout.activity_alpha, null);setContentView(view);

直接setContentView(R.layout.activity_alpha); 就OK了。卒。

今天剛用到，遲點貼出圖片。。

附上找到的一些基本的xml效果：

Fade In：淡入

alpha是漸層透明度效果，值由0到1

fade_in.xml  <?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android"      android:fillAfter="true" >         <alpha          android:duration="1000"          android:fromAlpha="0.0"          android:interpolator="@android:anim/accelerate_interpolator"          android:toAlpha="1.0" />  </set> 

Fade Out ：淡出
以Fade In剛好相反，值由1到0

fade_out.xml  <?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android"      android:fillAfter="true" >         <alpha          android:duration="1000"          android:fromAlpha="1.0"          android:interpolator="@android:anim/accelerate_interpolator"          android:toAlpha="0.0" />  </set>  

Cross Fading:  交叉的淡入和淡出
同時使用Fade in和Fade out可以達到交叉的效果

public class CrossfadeActivity extends Activity implements AnimationListener {        TextView txtMessage1, txtMessage2;      Button btnStart;      Animation animFadeIn, animFadeOut;      @Override      protected void onCreate(Bundle savedInstanceState) {          // TODO Auto-generated method stub          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_crossfade);          txtMessage1 = (TextView) findViewById(R.id.txtMessage1);          txtMessage2 = (TextView) findViewById(R.id.txtMessage2);          btnStart = (Button) findViewById(R.id.btnStart);          // load animations          animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),                  R.anim.fade_in);          animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),                  R.anim.fade_out);          // set animation listeners          animFadeIn.setAnimationListener(this);          animFadeOut.setAnimationListener(this);            // button click event          btnStart.setOnClickListener(new View.OnClickListener() {                @Override              public void onClick(View v) {                  txtMessage2.setVisibility(View.VISIBLE);                  txtMessage2.startAnimation(animFadeIn);                  txtMessage1.startAnimation(animFadeOut);              }        });    }      @Override      public void onAnimationEnd(Animation animation) {                    if (animation == animFadeOut) {              txtMessage1.setVisibility(View.GONE);          }                    if(animation == animFadeIn){              txtMessage2.setVisibility(View.VISIBLE);          }      }        @Override      public void onAnimationRepeat(Animation animation) {          // TODO Auto-generated method stub      }        @Override      public void onAnimationStart(Animation animation) {          // TODO Auto-generated method stub      }  }

BLink：若隱若現

blink.xml  <?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android">      <alpha android:fromAlpha="0.0"          android:toAlpha="1.0"          android:interpolator="@android:anim/accelerate_interpolator"          android:duration="600"          android:repeatMode="reverse"          android:repeatCount="infinite"/>  </set>  

Zoom In：放大

zoom_in.xml  <?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android"      android:fillAfter="true" >      <scale          xmlns:android="http://schemas.android.com/apk/res/android"          android:duration="1000"          android:fromXScale="1"          android:fromYScale="1"          android:pivotX="50%"          android:pivotY="50%"          android:toXScale="3"          android:toYScale="3" >      </scale>  </set>  

Zoom Out：縮小

<?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android"      android:fillAfter="true" >      <scale          xmlns:android="http://schemas.android.com/apk/res/android"          android:duration="1000"          android:fromXScale="1.0"          android:fromYScale="1.0"          android:pivotX="50%"          android:pivotY="50%"          android:toXScale="0.5"          android:toYScale="0.5" >      </scale>  </set>  

Rotate：旋轉

rotate.xml<?xml version="1.0" encoding="utf-8"?>  <set xmlns:android="http://schemas.android.com/apk/res/android">      <rotate android:fromDegrees="0"          android:toDegrees="360"          android:pivotX="50%"          android:pivotY="50%"          android:duration="600"          android:repeatMode="restart"          android:repeatCount="infinite"          android:interpolator="@android:anim/cycle_interpolator"/>  </set>

好長啊。。。既然你們都看到這裡了，再多說幾句。。

根節點<set>的屬性：

名稱	屬性	備忘
android:shareInterpolator	是否共用插入器	共用時，四個子節點都用一個插入器
android:interpolator	指定一個動畫的插入器	使用系統資源
android:fillEnabled		當設定為true時，fillAfter和fill, Befroe將會都為true，此時會忽略fillBefore 和fillAfter兩種屬性
android:fillAfter	該動畫轉化是否在動畫結束後被應用	boolean
android:fillBefore	該動畫轉化是否在動畫開始前被應用	boolean
android:repeatMode	重複模式	"restart"  或者 "reverse"
android:repeatCount	重複次數	integer
android:duration	動畫期間	integer
android:startOffset	動畫時間間隔	long
android:zAdjustment	定義動畫z order的變換	[normal] or [top] or [bottom]
android:detachWallpaper		boolean

Android Animation動畫的xml使用