【Android 基礎】詳解Animation 動畫介紹和實現_Android

在前面 PopupWindow 實現顯示仿騰訊新聞底部快顯功能表有用到Animation動畫效果來實現菜單的顯示和隱藏，本文就來介紹下吧。

1.Animation 動畫類型

Android的animation由四種類型組成：

XML中

alph	漸層透明度動畫效果
scale	漸層尺寸伸縮動畫效果
translate	畫面轉換位置移動動畫效果
rotate	畫面轉移旋轉動畫效果

JavaCode中

AlphaAnimation	漸層透明度動畫效果
ScaleAnimation	漸層尺寸伸縮動畫效果
TranslateAnimation	畫面轉換位置移動動畫效果
RotateAnimation	畫面轉移旋轉動畫效果

2.Android動畫模式

Animation主要有兩種動畫模式：

一種是tweened animation(漸層動畫)

XML中	JavaCode
alpha	AlphaAnimation
scale	ScaleAnimation

一種是frame by frame(畫面轉換動畫)

XML中	JavaCode
translate	TranslateAnimation
rotate	RotateAnimation

3.如何在XML檔案中定義動畫

步驟如下：

①建立 Android 項目

②在res目錄中建立anim檔案夾

③在anim目錄中建立一個my_anim.xml(注意檔案名稱小寫)

④在 my_anim.xml 加入動畫代碼

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >  <alpha />  <scale />  <translate />  <rotate /></set>

4.Android動畫解析--XML

4.1 alpha 漸層透明度動畫效果

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

4.2 scale 漸層尺寸伸縮動畫效果

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >  <scale    android:duration="1000"    android:fillAfter="false"    android:fromXScale="0.0"    android:fromYScale="0.0"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:pivotX="50%"    android:pivotY="50%"    android:toXScale="1.4"    android:toYScale="1.4" /></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 ，該動畫轉化在動畫結束後被應用-->

4.3 translate 畫面轉換位置移動動畫效果

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

4.4 rotate 畫面轉移旋轉動畫效果

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >  <rotate    android:duration="3000"    android:fromDegrees="0"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"    android:pivotX="50%"    android:pivotY="50%"    android:toDegrees="+350" />  <!--   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>

5.如何使用XML中的動畫效果

public static Animation loadAnimation (Context context, int id)//第一個參數Context為程式的上下文  //第二個參數id為動畫XML檔案的引用//例子：myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);//使用AnimationUtils類的靜態方法loadAnimation()來載入XML中的動畫XML檔案

6.如何使用XML中的動畫效果

//在代碼中定義 動畫執行個體對象private Animation myAnimation_Alpha;private Animation myAnimation_Scale;private Animation myAnimation_Translate;private Animation myAnimation_Rotate;  //根據各自的構造方法來初始化一個執行個體對象myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,       Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);myAnimation_Translate=new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,        Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

7.Android動畫解析--JavaCode

7.1 AlphaAnimation

①　AlphaAnimation類對象定義

private AlphaAnimation myAnimation_Alpha

②　AlphaAnimation類物件建構

//第一個參數fromAlpha為 動畫開始時候透明度//第二個參數toAlpha為 動畫結束時候透明度AlphaAnimation(float fromAlpha, float toAlpha) //說明:0.0表示完全透明,1.0表示完全不透明myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);

③　設定動畫期間

//設定時間期間為 5000毫秒myAnimation_Alpha.setDuration(5000);

7.2 ScaleAnimation

①　ScaleAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　ScaleAnimation類物件建構

ScaleAnimation(float fromX, float toX, float fromY, float toY,      int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)//第一個參數fromX為動畫起始時 X座標上的伸縮尺寸  //第二個參數toX為動畫結束時 X座標上的伸縮尺寸   //第三個參數fromY為動畫起始時Y座標上的伸縮尺寸  //第四個參數toY為動畫結束時Y座標上的伸縮尺寸 /*說明:          以上四種屬性值            0.0表示收縮到沒有           1.0表示正常無伸縮             值小於1.0表示收縮           值大於1.0表示放大*///第五個參數pivotXType為動畫在X軸相對於物件位置類型 //第六個參數pivotXValue為動畫相對於物件的X座標的開始位置//第七個參數pivotXType為動畫在Y軸相對於物件位置類型  //第八個參數pivotYValue為動畫相對於物件的Y座標的開始位置myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,       Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

③　設定動畫期間

//設定時間期間為 700毫秒myAnimation_Scale.setDuration(700);

7.3 TranslateAnimation

①　TranslateAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　TranslateAnimation類物件建構

//第一個參數fromXDelta為動畫起始時 X座標上的移動位置  //第二個參數toXDelta為動畫結束時 X座標上的移動位置   //第三個參數fromYDelta為動畫起始時Y座標上的移動位置   //第四個參數toYDelta為動畫結束時Y座標上的移動位置TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta)

③　設定動畫期間

//設定時間期間為 2000毫秒myAnimation_Translate.setDuration(2000);

 7.4 RotateAnimation

①　RotateAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　RotateAnimation類物件建構

RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)      //第一個參數fromDegrees為動畫起始時的旋轉角度  //第二個參數toDegrees為動畫旋轉到的角度  //第三個參數pivotXType為動畫在X軸相對於物件位置類型 //第四個參數pivotXValue為動畫相對於物件的X座標的開始位置//第五個參數pivotXType為動畫在Y軸相對於物件位置類型  //第六個參數pivotYValue為動畫相對於物件的Y座標的開始位置myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

③　RotateAnimation類物件建構

//設定時間期間為 3000毫秒myAnimation_Rotate.setDuration(3000);

8.如何使用Java代碼中的動畫效果

 使用從View父類繼承過來的方法startAnimation()來為View或是子類View等等添加一個動畫效果

public void startAnimation (Animation animation)

9.還是來個栗子吧

9.1 使用XML檔案方式

①效果圖如下：

②在XML檔案中定義動畫，前面已提及

③主介面布局，這沒啥好說的，很簡單 o(∩_∩)o

④主介面邏輯代碼，主要就是這個了，控制動畫顯示

package com.yanis.base;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;public class AnimationActivity extends Activity implements OnClickListener {  private ImageView imgPic;  private Button btnAlpha, btnScale, btnTranslate, btnRotate;  private Animation myAnimation;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_animation);    intiView();    initData();  }  /**   * 初始化組件   */  private void intiView() {    imgPic = (ImageView) findViewById(R.id.imgPic);    btnAlpha = (Button) findViewById(R.id.btnAlpha);    btnScale = (Button) findViewById(R.id.btnScale);    btnTranslate = (Button) findViewById(R.id.btnTranslate);    btnRotate = (Button) findViewById(R.id.btnRotate);  }  /**   * 初始化資料   */  private void initData() {    btnAlpha.setOnClickListener(this);    btnScale.setOnClickListener(this);    btnTranslate.setOnClickListener(this);    btnRotate.setOnClickListener(this);  }  @Override  public void onClick(View v) {    switch (v.getId()) {    case R.id.btnAlpha:      /**       * 使用XML中的動畫效果 第一個參數Context為程式的上下文 第二個參數id為動畫XML檔案的引用       */      myAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);      imgPic.startAnimation(myAnimation);      break;    case R.id.btnScale:      myAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);      imgPic.startAnimation(myAnimation);      break;    case R.id.btnTranslate:      myAnimation = AnimationUtils.loadAnimation(this,          R.anim.translate_anim);      imgPic.startAnimation(myAnimation);      break;    case R.id.btnRotate:      myAnimation = AnimationUtils          .loadAnimation(this, R.anim.rotate_anim);      imgPic.startAnimation(myAnimation);      break;    }  }}

 10. 用Animation-list實現逐幀動畫

栗子效果圖如下：

步驟如下：

①在res/drawable目錄添加圖片素材

②在drawable檔案夾中添加動畫Animation-list幀布局檔案

<?xml version="1.0" encoding="utf-8"?><!--  根標籤為animation-list，其中oneshot代表著是否只展示一遍，設定為false會不停的迴圈播放動畫   根標籤下，通過item標籤對動畫中的每一個圖片進行聲明   android:duration 表示展示所用的該圖片的時間長度 --><animation-list xmlns:android="http://schemas.android.com/apk/res/android"  android:oneshot="false" >  <item    android:drawable="@drawable/cmmusic_progress_1"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_2"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_3"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_4"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_5"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_6"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_7"    android:duration="150">  </item>  <item    android:drawable="@drawable/cmmusic_progress_8"    android:duration="150">  </item></animation-list>

③主介面頁面配置設定，太簡單，不贅述了

④主介面代碼如下：

package com.yanis.base;import android.app.Activity;import android.graphics.drawable.AnimationDrawable;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.ImageView;public class AnimationActivity extends Activity implements OnClickListener {  private ImageView imgPic;  private Button btnStart, btnStop;  private AnimationDrawable animationDrawable;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_animation);    intiView();    initData();  }  /**   * 初始化組件   */  private void intiView() {    imgPic = (ImageView) findViewById(R.id.imgPic);    btnStart = (Button) findViewById(R.id.btnStart);    btnStop = (Button) findViewById(R.id.btnStop);  }  /**   * 初始化資料   */  private void initData() {    btnStart.setOnClickListener(this);    btnStop.setOnClickListener(this);    //Sets a drawable as the content of this ImageView.    imgPic.setImageResource(R.drawable.loading_anim);    //給動畫資源賦值    animationDrawable = (AnimationDrawable) imgPic.getDrawable();  }  @Override  public void onClick(View v) {    switch (v.getId()) {    case R.id.btnStart:      animationDrawable.start();//開始      break;    case R.id.btnStop:        animationDrawable.stop(); //停止      break;    }  }}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。