Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android使用XML來做動畫

Android使用XML來做動畫

編輯：Android開發實例

在Android應用程序，使用動畫效果，能帶給用戶更好的感覺。做動畫可以通過XML或Android代碼。
本教程中，介紹使用XML來做動畫。在這裡，介紹基本的動畫，如淡入，淡出，旋轉等。

效果: http://www.56.com/u82/v_OTM4MDk5MTk.html

第一步: 創建anim文件夾放置動畫xml文件
在res文件夾下，創建一個anim的子文件夾。

         

第二步: 加載動畫
接著在Activity創建一個Animation類，然後使用AnimationUtils類加載動畫xml

  1. Animation animFadein;   
  2.     
  3. @Override 
  4. protected void onCreate(Bundle savedInstanceState) {   
  5. super.onCreate(savedInstanceState);   
  6. setContentView(R.layout.activity_fadein);   
  7.     
  8. txtMessage = (TextView) findViewById(R.id.txtMessage);   
  9. btnStart = (Button) findViewById(R.id.btnStart);   
  10.     
  11. // 加載動畫   
  12. animFadein = AnimationUtils.loadAnimation(getApplicationContext(),   
  13. R.anim.fade_in);   
  14.     
  15. ｝ 

第三步: 設置動畫監聽器
如果你要監聽動畫的事件，如開始，結束等，你需要實現AnimationListener監聽器，重寫以下方法。
onAnimationEnd(Animation animation) - 當動畫結束時調用
onAnimationRepeat(Animation animation) - 當動畫重復時調用
onAniamtionStart(Animation animation) - 當動畫啟動時調用

 

  1. @Override 
  2. public void onAnimationEnd(Animation animation) {   
  3. // 在動畫結束後使用   
  4.     
  5. // check for fade in animation   
  6. if (animation == animFadein) {   
  7. Toast.makeText(getApplicationContext(), "Animation Stopped",   
  8. Toast.LENGTH_SHORT).show();   
  9. }   
  10.     
  11. }   
  12.     
  13. @Override 
  14. public void onAnimationRepeat(Animation animation) {   
  15. //當動畫重復時使用   
  16.     
  17. }   
  18.     
  19. @Override 
  20. public void onAnimationStart(Animation animation) {   
  21. //當動畫開始使用   
  22.     
  23. } 

 

最後一步: 讓動畫動起來啦。可以使用任何UI元素調用startAnimation方法。
以下是一個Textview元素調用的。
txtMessage.startAnimation(animFadein);

完整代碼: 

  1. FadeInActivity(淡入動畫)   
  2.  
  3. ?package com.chaowen.androidanimations;   
  4.     
  5. import info.androidhive.androidanimations.R;   
  6. import android.app.Activity;   
  7. import android.os.Bundle;   
  8. import android.view.View;   
  9. import android.view.animation.Animation;   
  10. import android.view.animation.AnimationUtils;   
  11. import android.view.animation.Animation.AnimationListener;   
  12. import android.widget.Button;   
  13. import android.widget.TextView;   
  14. import android.widget.Toast;   
  15.     
  16. /**   
  17.  *    
  18.  * @author chaowen   
  19.  *   
  20.  */ 
  21. public class FadeInActivity extends Activity implements AnimationListener {   
  22.     
  23.     TextView txtMessage;   
  24.     Button btnStart;   
  25.     
  26.     Animation animFadein;   
  27.     
  28.     @Override 
  29.     protected void onCreate(Bundle savedInstanceState) {   
  30.         super.onCreate(savedInstanceState);   
  31.         setContentView(R.layout.activity_fadein);   
  32.     
  33.         txtMessage = (TextView) findViewById(R.id.txtMessage);   
  34.         btnStart = (Button) findViewById(R.id.btnStart);   
  35.     
  36.         // 加載動畫   
  37.         animFadein = AnimationUtils.loadAnimation(getApplicationContext(),   
  38.                 R.anim.fade_in);   
  39.             
  40.         // 設置監聽   
  41.         animFadein.setAnimationListener(this);   
  42.     
  43.         // 按鈕   
  44.         btnStart.setOnClickListener(new View.OnClickListener() {   
  45.     
  46.             @Override 
  47.             public void onClick(View v) {   
  48.                 txtMessage.setVisibility(View.VISIBLE);   
  49.                     
  50.                 // 開始動畫   
  51.                 txtMessage.startAnimation(animFadein);   
  52.             }   
  53.         });   
  54.     
  55.     }   
  56.     
  57.     @Override 
  58.     public void onAnimationEnd(Animation animation) {   
  59.         // 在動畫結束後使用   
  60.     
  61.         // check for fade in animation   
  62.         if (animation == animFadein) {   
  63.             Toast.makeText(getApplicationContext(), "Animation Stopped",   
  64.                     Toast.LENGTH_SHORT).show();   
  65.         }   
  66.     
  67.     }   
  68.     
  69.     @Override 
  70.     public void onAnimationRepeat(Animation animation) {   
  71.         //當動畫重復時使用   
  72.     
  73.     }   
  74.     
  75.     @Override 
  76.     public void onAnimationStart(Animation animation) {   
  77.         //當動畫開始使用   
  78.     
  79.     }   
  80.     
  81. }   

 

一些重要的XML屬性

重要的XML動畫屬性
android:duration 動畫持續時間,時間以毫秒為單位
android:startOffset 動畫之間的時間間隔，從上次動畫停多少時間開始執行下個動畫
android:interpolator 指定一個動畫的插入器
android:fillAfter 當設置為true ，該動畫轉化在動畫結束後被應用
android:repeatMode 定義重復的行為
android:repeatCount 動畫的重復次數

Fade In:  淡入

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

  1. ?fade_in.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:fillAfter="true" >   
  5.      
  6.     <alpha   
  7.         android:duration="1000" 
  8.         android:fromAlpha="0.0" 
  9.         android:interpolator="@android:anim/accelerate_interpolator" 
  10.         android:toAlpha="1.0" />   
  11.      
  12. </set>  

Fade Out ： 淡出

 以Fade In剛好相反，值由1到0.

  1. ?fade_out.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:fillAfter="true" >   
  5.      
  6.     <alpha   
  7.         android:duration="1000" 
  8.         android:fromAlpha="1.0" 
  9.         android:interpolator="@android:anim/accelerate_interpolator" 
  10.         android:toAlpha="0.0" />   
  11.      
  12. </set>  

Cross Fading:  交叉的淡入和淡出

 同時使用Fade in和Fade out可以達到交叉的效果

  1. ?public class CrossfadeActivity extends Activity implements AnimationListener {   
  2.     
  3.     TextView txtMessage1, txtMessage2;   
  4.     Button btnStart;   
  5.     
  6.         
  7.     Animation animFadeIn, animFadeOut;   
  8.     
  9.     @Override 
  10.     protected void onCreate(Bundle savedInstanceState) {   
  11.         // TODO Auto-generated method stub   
  12.         super.onCreate(savedInstanceState);   
  13.         setContentView(R.layout.activity_crossfade);   
  14.     
  15.         txtMessage1 = (TextView) findViewById(R.id.txtMessage1);   
  16.         txtMessage2 = (TextView) findViewById(R.id.txtMessage2);   
  17.         btnStart = (Button) findViewById(R.id.btnStart);   
  18.     
  19.         // load animations   
  20.         animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),   
  21.                 R.anim.fade_in);   
  22.         animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),   
  23.                 R.anim.fade_out);   
  24.     
  25.         // set animation listeners   
  26.         animFadeIn.setAnimationListener(this);   
  27.         animFadeOut.setAnimationListener(this);   
  28.     
  29.         // button click event   
  30.         btnStart.setOnClickListener(new View.OnClickListener() {   
  31.     
  32.             @Override 
  33.             public void onClick(View v) {   
  34.                     
  35.                 txtMessage2.setVisibility(View.VISIBLE);   
  36.                     
  37.                 txtMessage2.startAnimation(animFadeIn);   
  38.                     
  39.                     
  40.                 txtMessage1.startAnimation(animFadeOut);   
  41.             }   
  42.         });   
  43.     
  44.     }   
  45.     
  46.     @Override 
  47.     public void onAnimationEnd(Animation animation) {   
  48.             
  49.     
  50.             
  51.         if (animation == animFadeOut) {   
  52.             txtMessage1.setVisibility(View.GONE);   
  53.         }   
  54.             
  55.         if(animation == animFadeIn){   
  56.             txtMessage2.setVisibility(View.VISIBLE);   
  57.         }   
  58.     
  59.     }   
  60.     
  61.     @Override 
  62.     public void onAnimationRepeat(Animation animation) {   
  63.         // TODO Auto-generated method stub   
  64.     
  65.     }   
  66.     
  67.     @Override 
  68.     public void onAnimationStart(Animation animation) {   
  69.         // TODO Auto-generated method stub   
  70.     
  71.     }   
  72.     
  73. }   

BLink:  若隱若現，酷

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

　Zoom In : 放大

  1. ?zoom_in.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:fillAfter="true" >   
  5.      
  6.     <scale   
  7.         xmlns:android="http://schemas.android.com/apk/res/android" 
  8.         android:duration="1000" 
  9.         android:fromXScale="1" 
  10.         android:fromYScale="1" 
  11.         android:pivotX="50%" 
  12.         android:pivotY="50%" 
  13.         android:toXScale="3" 
  14.         android:toYScale="3" >   
  15.     </scale>   
  16.      
  17. </set>   

Zoom Out: 縮小

  1. ?zoom_out.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android" 
  4.     android:fillAfter="true" >   
  5.      
  6.     <scale   
  7.         xmlns:android="http://schemas.android.com/apk/res/android" 
  8.         android:duration="1000" 
  9.         android:fromXScale="1.0" 
  10.         android:fromYScale="1.0" 
  11.         android:pivotX="50%" 
  12.         android:pivotY="50%" 
  13.         android:toXScale="0.5" 
  14.         android:toYScale="0.5" >   
  15.     </scale>   
  16.      
  17. </set>   

Rotate: 旋轉

  1. rotate.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">   
  4.     <rotate android:fromDegrees="0" 
  5.         android:toDegrees="360" 
  6.         android:pivotX="50%" 
  7.         android:pivotY="50%" 
  8.         android:duration="600" 
  9.         android:repeatMode="restart" 
  10.         android:repeatCount="infinite" 
  11.         android:interpolator="@android:anim/cycle_interpolator"/>   
  12.      
  13. </set> 

還有幾個就不再列出，有興趣下源碼看。

 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android -- NotificationManager and Notification學習筆記 Android縮略圖類源代碼 Android開發——MediaPlayer源碼不完整分析 Android進階：打jar包獲取assets中的資源 解決selector XML文件不能解析的問題 Android開發退出提醒窗口 Android開發實例 圖片查看程序
Android中的AppWidget入門教程

什麼是AppWidget？AppWidget就是我們平常在桌面上
Android實現頂部導航菜單左右滑動效果

這篇文章主要為大家詳細介紹了Android實現頂部導航菜單左右滑動效果，
Android JSON解析器

JSON代表JavaScript對象符號。它是一個獨立的數據交換格式，是
Android Wear計時器開發

記得在2013年12月的時候，有系列文章是介紹怎麼開發一個智能手
閱讀排行版
Copyright © Android教程網 All Rights Reserved