歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Android開發教程：簡單的animation動畫效果的實現過程

今天學習動畫：
Animations的分類：
1.TweenedAnimation ：提供旋轉、移動、伸展、和淡出的效果
      Alpha：淡入淡出效果                           Scale：縮放效果
      Rotate：旋轉效果                                 Translate： 移動效果
2.Frame-by-Frame Animation ：創建Drawable的序列，可以按照指定的時間間隙一個個顯示（1s中播放24張以上的圖片就可以變成視頻了）也可以做成動態廣告的形式

3.res文件加下加入XMl文件，可以使用XML文件實現控制動畫，XML文件中添加Set標簽，標簽中加入rotate、alpha、scale、或者translate 代碼中實現AnimationUtil裝載xml

   文件並生成，Animation對象需要注意的是

<!--pivotX  pivotY旋轉時候 的坐標絕對位置的

50這種方法使用的是絕對位置
50%相對於空間本身定位

"50%p"的意思是相對於空控件的父控件的定位 -->

4.接著咱們看看代碼的實現過程

首先看看兩種方法共同的布局文件

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  7.     android:layout_width="fill_parent"  
  8.     android:layout_height="wrap_content"  
  9.     android:orientation="horizontal">  
  10.   
  11.     <Button  
  12.         android:id="@+id/Alpha"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="淡入淡出" />  
  16.     <Button  
  17.         android:id="@+id/scale"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:text="縮放效果" />  
  21.     <Button  
  22.         android:id="@+id/rotate"  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:text="旋轉效果" />  
  26.     <Button  
  27.         android:id="@+id/translate"  
  28.         android:layout_width="wrap_content"  
  29.         android:layout_height="wrap_content"  
  30.         android:text="移動效果" />  
  31.     </LinearLayout>  
  32.     <ImageView  
  33.         android:id="@+id/image"  
  34.         android:layout_width="wrap_content"  
  35.         android:layout_height="wrap_content"  
  36.         android:src="@drawable/a" />  
  37.       
  38.   
  39. </LinearLayout>  
5.看看第一種方法的活動實現的過程
  1. package com.wang;  
  2.   
  3. import com.wang.R.id;  
  4.   
  5. import android.R.anim;  
  6. import android.R.integer;  
  7. import android.app.Activity;  
  8. import android.os.Bundle;  
  9. import android.provider.ContactsContract.CommonDataKinds.Im;  
  10. import android.view.View;  
  11. import android.view.View.OnClickListener;  
  12. import android.view.animation.AccelerateDecelerateInterpolator;  
  13. import android.view.animation.AccelerateInterpolator;  
  14. import android.view.animation.AlphaAnimation;  
  15. import android.view.animation.Animation;  
  16. import android.view.animation.AnimationSet;  
  17. import android.view.animation.RotateAnimation;  
  18. import android.view.animation.ScaleAnimation;  
  19. import android.view.animation.Transformation;  
  20. import android.view.animation.TranslateAnimation;  
  21. import android.widget.Button;  
  22. import android.widget.ImageView;  
  23.   
  24. public class AnimationTestActivity extends Activity {  
  25.     private ImageView image = null;  
  26.     private Button Alphabutton = null;  
  27.     private Button scalebutton = null;  
  28.     private Button rotatebutton = null;  
  29.     private Button translatebutton = null;  
  30.   
  31.     public void onCreate(Bundle savedInstanceState) {  
  32.         super.onCreate(savedInstanceState);  
  33.         setContentView(R.layout.main);  
  34.         image = (ImageView) findViewById(R.id.image);  
  35.         Alphabutton = (Button) findViewById(R.id.Alpha);  
  36.         scalebutton = (Button) findViewById(R.id.scale);  
  37.         rotatebutton = (Button) findViewById(R.id.rotate);  
  38.         translatebutton = (Button) findViewById(R.id.translate);  
  39.         // 淡入淡出按鈕的監聽時間   
  40.         Alphabutton.setOnClickListener(new OnClickListener() {  
  41.   
  42.             public void onClick(View v) {  
  43.                 // 創建一個AnimationSet對象   
  44.                 AnimationSet animationSet = new AnimationSet(true);  
  45.                 // j加速播放   
  46.                 animationSet.setInterpolator(new AccelerateInterpolator());  
  47.                 // //創建一個AnimationSet對象淡出旋轉二合一   
  48.                 AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);  
  49.                 RotateAnimation rotateAnimation = new RotateAnimation(0, 360,  
  50.                         Animation.RELATIVE_TO_PARENT, 1f,// X軸   
  51.                         Animation.RELATIVE_TO_PARENT, 0f);// y軸   
  52.   
  53.                 // 將alphaAnimation對象添加到animationSet中   
  54.                 animationSet.addAnimation(alphaAnimation);  
  55.                 animationSet.addAnimation(rotateAnimation);  
  56.                 // 顯示的時間為1s   
  57.                 alphaAnimation.setDuration(3000);  
  58.                 // 開始執行動畫   
  59.                 image.startAnimation(animationSet);  
  60.                 // 設置重復的次數   
  61.                 animationSet.setRepeatCount(4);  
  62.   
  63.             }  
  64.   
  65.         });  
  66.         // 縮放按鈕的監聽事件   
  67.         scalebutton.setOnClickListener(new OnClickListener() {  
  68.   
  69.             @Override  
  70.             public void onClick(View v) {  
  71.                 AnimationSet animationSet = new AnimationSet(true);  
  72.                 // 從1縮放的0.1   
  73.                 ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1,  
  74.                         0.1f, Animation.RELATIVE_TO_SELF, 0.5f,  
  75.                         Animation.RELATIVE_TO_SELF, 0.5f);  
  76.   
  77.                 animationSet.addAnimation(scaleAnimation);  
  78.   
  79.                 // 執行前等待的時間   
  80.                 animationSet.setStartOffset(1000);  
  81.   
  82.                 // dd動畫執行之前和之後的狀態   
  83.                 animationSet.setFillAfter(true);  
  84.                 animationSet.setFillBefore(false);  
  85.                 animationSet.setDuration(5000);  
  86.                 image.startAnimation(animationSet);  
  87.   
  88.             }  
  89.         });  
  90.         // 旋轉按鈕的單擊事件   
  91.         rotatebutton.setOnClickListener(new OnClickListener() {  
  92.   
  93.             @Override  
  94.             public void onClick(View v) {  
  95.   
  96.                 AnimationSet animationSet = new AnimationSet(true);  
  97.                 // 創建對象 參數 從0度轉到360度   
  98.                 /********* 
  99.                  **一個動畫控制旋轉的一個對象。這個旋轉發生int xy平面。 您可以指定點使用的中心旋轉,在那裡(0,0)是左上角點。 
  100.                  * 如果未指定,(0,0)是默認的旋轉點 
  101.                  **/  
  102.                 RotateAnimation rotateAnimation = new RotateAnimation(0, 360,  
  103.                         Animation.RELATIVE_TO_PARENT, 1f,// X軸   
  104.                         Animation.RELATIVE_TO_PARENT, 0f);// y軸   
  105.                 rotateAnimation.setDuration(5000);  
  106.                 animationSet.addAnimation(rotateAnimation);  
  107.                 image.startAnimation(animationSet);  
  108.   
  109.             }  
  110.         });  
  111.         // 移動按鈕的點擊事件   
  112.         translatebutton.setOnClickListener(new OnClickListener() {  
  113.   
  114.             public void onClick(View v) {  
  115.   
  116.                 AnimationSet animationSet = new AnimationSet(true);  
  117.                 TranslateAnimation translatebutton = new TranslateAnimation(  
  118.                         Animation.RELATIVE_TO_SELF, 0f,// //X軸   
  119.                         Animation.RELATIVE_TO_SELF, 0.5f,// y軸   
  120.                         Animation.RELATIVE_TO_SELF, 0f,// X軸   
  121.                         Animation.RELATIVE_TO_SELF, 1.0f);// y軸   
  122.                 translatebutton.setDuration(5000);  
  123.             }  
  124.         });  
  125.     }  
  126. }  
6.第二種方式實現的時候要在res的文件之下在建一個文件夾anim。文件夾裡面包含的四個文件如下
alpha.xml  淡入淡出效果的文件
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:interpolator="@android:anim/accelerate_interpolator" >  
  4.   
  5.     <alpha  
  6.         android:duration="500"  
  7.         android:fromAlpha="1.0"  
  8.         android:startOffset="500"  
  9.         android:toAlpha="0.0" />  
  10.   
  11. </set>  

rotate.xml  旋轉效果的文件

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:interpolator="@android:anim/accelerate_interpolator" >  
  4.   
  5.     <rotate  
  6.         android:fromDegrees="0"  
  7.         android:toDegrees="350"  
  8.         android:pivotX="50%p"  
  9.         android:pivotY="50%p"  
  10.         android:duration="3000" />  
  11. <!--pivotX  pivotY旋轉時候 的坐標絕對位置的  
  12. 50這種方法使用的是絕對位置  
  13. 50%相對於空間本身定位  
  14. "50%p"的意思是相對於空控件的父控件的定位  
  15.   
  16.  -->  
  17. </set>  

sacle.xml   縮放效果的文件  

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:interpolator="@android:anim/accelerate_interpolator" >  
  4.   
  5.   
  6.     <scale  
  7.         android:fromXScale="1.0"  
  8.         android:toXScale="0.0"  
  9.         android:fromYScale="1.0"  
  10.         android:toYScale="0.0"   
  11.         android:pivotX="50%"  
  12.         android:pivotY="50%"  
  13.         android:duration="3000"/>  
  14.   
  15.   
  16. </set>  

translate.xml  移動效果的文件

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:interpolator="@android:anim/accelerate_interpolator" >  
  4.   
  5.     <translate  
  6.         android:fromXDelta="50%"  
  7.         android:toXDelta="100%"  
  8.         android:fromYDelta="0%"  
  9.         android:toYDelta="100%"  
  10.         android:duration="3000" />  
  11.   
  12. </set>  

7.接著看看第二種方法的Activity的實現過程

  1. package com.wang;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7. import android.view.animation.Animation;  
  8. import android.view.animation.AnimationUtils;  
  9. import android.widget.Button;  
  10. import android.widget.ImageView;  
  11.   
  12. public class AnimationXMLActivity extends Activity {  
  13.   
  14.     private ImageView image;  
  15.     private Button alphabutton;  
  16.     private Button rotatebutton;  
  17.     private Button saclebutton;  
  18.     private Button translatebutton;  
  19.   
  20.     public void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.main);  
  23.         image = (ImageView) findViewById(R.id.image);  
  24.         alphabutton = (Button) findViewById(R.id.alpha);  
  25.         rotatebutton = (Button) findViewById(R.id.roate);  
  26.         saclebutton = (Button) findViewById(R.id.scale);  
  27.         translatebutton = (Button) findViewById(R.id.translate);  
  28.         // 淡入淡出按鈕的監聽事件   
  29.         alphabutton.setOnClickListener(new OnClickListener() {  
  30.   
  31.             @Override  
  32.             public void onClick(View v) {  
  33.                 // s使用AnimationUtils裝載動畫設置文件   
  34.                 Animation animation = AnimationUtils.loadAnimation(  
  35.                         AnimationXMLActivity.this, R.anim.alpha);  
  36.                 // 啟動   
  37.                 image.startAnimation(animation);  
  38.             }  
  39.         });  
  40.         // 旋轉效果的監聽事件   
  41.         rotatebutton.setOnClickListener(new OnClickListener() {  
  42.   
  43.             @Override  
  44.             public void onClick(View v) {  
  45.   
  46.                 // s使用AnimationUtils裝載動畫設置文件   
  47.                 Animation animation = AnimationUtils.loadAnimation(  
  48.                         AnimationXMLActivity.this, R.anim.rotate);  
  49.                 image.startAnimation(animation);// TODO Auto-generated method   
  50.                 // stub   
  51.   
  52.             }  
  53.         });  
  54.         // 縮放組件的效果監聽   
  55.         saclebutton.setOnClickListener(new OnClickListener() {  
  56.   
  57.             @Override  
  58.             public void onClick(View v) {  
  59.                 // s使用AnimationUtils裝載動畫設置文件   
  60.                 Animation animation = AnimationUtils.loadAnimation(  
  61.                         AnimationXMLActivity.this, R.anim.sacle);  
  62.                 image.startAnimation(animation); // TODO Auto-generated method   
  63.                 // stub   
  64.   
  65.             }  
  66.         });  
  67.         // 移動效果的監聽事件   
  68.         translatebutton.setOnClickListener(new OnClickListener() {  
  69.   
  70.             @Override  
  71.             public void onClick(View v) {  
  72.                 // TODO Auto-generated method stub   
  73.                 // s使用AnimationUtils裝載動畫設置文件   
  74.                 Animation animation = AnimationUtils.loadAnimation(  
  75.                         AnimationXMLActivity.this, R.anim.translate);  
  76.                 image.startAnimation(animation);  
  77.             }  
  78.         });  
  79.   
  80.     }  
  81. }  

8.殊路同歸，這兩種方法實現的功能都差不多，第一張圖片是原圖，第二張圖片是淡入淡出的效果，第三張是旋轉的效果圖，第四章是縮放的效果圖，第五章是移動的效果圖

由於是動畫效果，所以只能截取圖片的一部分

，

Linux編程

Android 用Animation-list實現逐幀動畫

Android開發之Animation 4種動畫效果

Android開發教程：左右滑屏的實現

Android動畫Animation之Tween用代碼實現動畫效果

Android動畫效果Animation之Tween實現簡單動畫

Android動畫Animation之Frame實現類似電影的動畫效果

Android開發教程：撥打電話的簡單實現

Android開發教程：用GridView實現Gallery的效果

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved