Android逐帧动画的实现

在处理耗时工作的时候，大多数会弹出一个加载的框，里面有一个连续旋转的图片，很多时候都是用一张图片，使用rotate来设定旋转，不过看起来不太美观，没有形象感，在3.0之前Android有两种动画效果分别是补间动画和帧动画，用一张图片实现的是使用补间动画，定义给出两个关键帧，通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。我个人比较倾向的是帧动画，不过这个需要美工的支持，还有一种方式就是通过反编译其他的软件获取图片，我不是美工也没有美工的支持，所以就解压QQ的apk，获取它里面的显示加载动画的图片，图片资源http://download.csdn.net/download/jwzhangjie/6852981。

看看如何实现的

load_animation_1.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--   
3.     根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画  
4.     根标签下，通过item标签对动画中的每一个图片进行声明  
5.     android:duration 表示展示所用的该图片的时间长度  
6.  -->  
7.  <animation-list  
8.      xmlns:android="http://schemas.android.com/apk/res/android"  
9.      android:oneshot="false"  
10.      >  
11.     <item android:drawable="@drawable/qb_tenpay_loading_1" android:duration="150"></item>  
12.     <item android:drawable="@drawable/qb_tenpay_loading_2" android:duration="150"></item>  
13.     <item android:drawable="@drawable/qb_tenpay_loading_3" android:duration="150"></item>  
14.     <item android:drawable="@drawable/qb_tenpay_loading_4" android:duration="150"></item>  
15.     <item android:drawable="@drawable/qb_tenpay_loading_5" android:duration="150"></item>  
16.     <item android:drawable="@drawable/qb_tenpay_loading_6" android:duration="150"></item>  
17.     <item android:drawable="@drawable/qb_tenpay_loading_7" android:duration="150"></item>  
18.     <item android:drawable="@drawable/qb_tenpay_loading_8" android:duration="150"></item>  
19.     <item android:drawable="@drawable/qb_tenpay_loading_9" android:duration="150"></item>  
20.     <item android:drawable="@drawable/qb_tenpay_loading_10" android:duration="150"></item>  
21.     <item android:drawable="@drawable/qb_tenpay_loading_11" android:duration="150"></item>  
22.     <item android:drawable="@drawable/qb_tenpay_loading_12" android:duration="150"></item>  
23.  </animation-list>  
24.    

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--   
3.     根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画  
4.     根标签下，通过item标签对动画中的每一个图片进行声明  
5.     android:duration 表示展示所用的该图片的时间长度  
6.  -->  
7.  <animation-list  
8.      xmlns:android="http://schemas.android.com/apk/res/android"  
9.      android:oneshot="false"  
10.      >  
11.     <item android:drawable="@drawable/common_loading_0" android:duration="150"></item>  
12.     <item android:drawable="@drawable/common_loading_1" android:duration="150"></item>  
13.     <item android:drawable="@drawable/common_loading_2" android:duration="150"></item>  
14.     <item android:drawable="@drawable/common_loading_3" android:duration="150"></item>  
15.     <item android:drawable="@drawable/common_loading_4" android:duration="150"></item>  
16.     <item android:drawable="@drawable/common_loading_5" android:duration="150"></item>  
17.     <item android:drawable="@drawable/common_loading_6" android:duration="150"></item>  
18.     <item android:drawable="@drawable/common_loading_7" android:duration="150"></item>  
19.     <item android:drawable="@drawable/common_loading_8" android:duration="150"></item>  
20.     <item android:drawable="@drawable/common_loading_9" android:duration="150"></item>  
21.     <item android:drawable="@drawable/common_loading_10" android:duration="150"></item>  
22.     <item android:drawable="@drawable/common_loading_11" android:duration="150"></item>  
23.  </animation-list>  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list  
3.      xmlns:android="http://schemas.android.com/apk/res/android"  
4.      android:oneshot="false"  
5.      >  
6.     <item android:drawable="@drawable/wifi_1" android:duration="150"></item>  
7.     <item android:drawable="@drawable/wifi_2" android:duration="150"></item>  
8.     <item android:drawable="@drawable/wifi_3" android:duration="150"></item>  
9.     <item android:drawable="@drawable/wifi_4" android:duration="150"></item>  
10.     <item android:drawable="@drawable/wifi_5" android:duration="150"></item>  
11.     <item android:drawable="@drawable/wifi_6" android:duration="150"></item>  
12.  </animation-list>  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <Button  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="动画加载1"  
11.         android:id="@android:id/button1"  
12.         ></Button>  
13.     <Button   
14.         android:id="@android:id/button2"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:layout_toRightOf="@android:id/button1"  
18.         android:layout_marginLeft="20dip"  
19.         android:text="动画加载2"  
20.         />  
21.     <Button   
22.         android:id="@android:id/button3"  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="wrap_content"  
25.         android:layout_toRightOf="@android:id/button2"  
26.         android:layout_marginLeft="20dip"  
27.         android:text="动画wifi1"  
28.         />  
29.     <ImageView   
30.         android:id="@+id/animationIV"  
31.         android:layout_width="wrap_content"  
32.         android:layout_height="wrap_content"  
33.         android:layout_centerInParent="true"  
34.         android:contentDescription="@string/app_name"  
35.         />  
36.       
37.     <ImageView  
38.         android:id="@+id/animationIV2"  
39.         android:layout_width="wrap_content"  
40.         android:layout_height="wrap_content"  
41.         android:layout_toRightOf="@id/animationIV"  
42.         android:src="@anim/load_animation_2"  
43.         android:contentDescription="@string/app_name"  
44.         android:layout_alignBottom="@id/animationIV"  
45.         android:layout_marginLeft="30dip"  
46.         />  
47.       
48.     <ImageView  
49.         android:id="@+id/animationIV3"  
50.         android:layout_width="wrap_content"  
51.         android:layout_height="wrap_content"  
52.         android:layout_above="@id/animationIV"  
53.         android:contentDescription="@string/app_name"  
54.         android:layout_marginTop="20dip"  
55.         />  
56. </RelativeLayout>  

[java] view plaincopy

1. public class Test extends BaseActivity{  
2.   
3.     private Button button1,button2,button3;  
4.     private ImageView animationIV;  
5.     private ImageView animationIV2;  
6.     private ImageView animationIV3;  
7.     private AnimationDrawable AniDraw, AniDraw2, AniDraw3;  
8.     @Override  
9.     protected void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.test);  
12.         button1 = (Button)findViewById(android.R.id.button1);  
13.         button1.setOnClickListener(new OnClickListener() {  
14.             @Override  
15.             public void onClick(View v) {  
16.                 if (AniDraw.isRunning()) {  
17.                     AniDraw.stop();  
18.                 }else {  
19.                     AniDraw.start();  
20.                 }  
21.                   
22.             }  
23.         });  
24.         button2 = (Button)findViewById(android.R.id.button2);  
25.         button2.setOnClickListener(new OnClickListener() {  
26.             @Override  
27.             public void onClick(View v) {  
28.                 if (AniDraw2.isRunning()) {  
29.                     AniDraw2.stop();  
30.                 }else {  
31.                     AniDraw2.start();  
32.                 }  
33.             }  
34.         });  
35.         button3 = (Button)findViewById(android.R.id.button3);  
36.         button3.setOnClickListener(new OnClickListener() {  
37.             @Override  
38.             public void onClick(View v) {  
39.                 if (AniDraw3.isRunning()) {  
40.                     AniDraw3.stop();  
41.                 }else {  
42.                     AniDraw3.start();  
43.                 }  
44.             }  
45.         });  
46.           
47.         animationIV = (ImageView)findViewById(R.id.animationIV);  
48.         /** 
49.          * 这里设置的是setBackgroundResource，那么你获取的时候通过getBackground 
50.          */  
51.         animationIV.setBackgroundResource(R.anim.load_animation_1);  
52.         AniDraw = (AnimationDrawable)animationIV.getBackground();  
53.         /** 
54.          * 在xml里面通过src来设置跟在代码里面使用setImageResource获取的时候通过getDrawable 
55.          * 例如：animationIV2.setImageResource(R.anim.load_animation_2);是一样的 
56.          */  
57.         animationIV2 = (ImageView)findViewById(R.id.animationIV2);  
58.         AniDraw2 = (AnimationDrawable)animationIV2.getDrawable();  
59.         animationIV3 = (ImageView)findViewById(R.id.animationIV3);  
60.         animationIV3.setImageResource(R.anim.wifi_animation_1);  
61.         AniDraw3 = (AnimationDrawable)animationIV3.getDrawable();  
62.     }