Android逐帧动画的实现

转自http://blog.csdn.net/jwzhangjie/article/details/18323101

分类： android 视频播放器制作2014-01-15 21:39 3315人阅读 评论(0) 收藏 举报

在处理耗时工作的时候，大多数会弹出一个加载的框，里面有一个连续旋转的图片，很多时候都是用一张图片，使用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>

load_animation_2.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/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>

wifi_animation_1.xml

[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. <Button
7. android:layout_width="wrap_content"
8. android:layout_height="wrap_content"
9. android:text="动画加载1"
10. android:id="@android:id/button1"
11. ></Button>
12. <Button
13. android:id="@android:id/button2"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_toRightOf="@android:id/button1"
17. android:layout_marginLeft="20dip"
18. android:text="动画加载2"
19. />
20. <Button
21. android:id="@android:id/button3"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:layout_toRightOf="@android:id/button2"
25. android:layout_marginLeft="20dip"
26. android:text="动画wifi1"
27. />
28. <ImageView
29. android:id="@+id/animationIV"
30. android:layout_width="wrap_content"
31. android:layout_height="wrap_content"
32. android:layout_centerInParent="true"
33. android:contentDescription="@string/app_name"
34. />
35. <ImageView
36. android:id="@+id/animationIV2"
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:layout_toRightOf="@id/animationIV"
40. android:src="@anim/load_animation_2"
41. android:contentDescription="@string/app_name"
42. android:layout_alignBottom="@id/animationIV"
43. android:layout_marginLeft="30dip"
44. />
45. <ImageView
46. android:id="@+id/animationIV3"
47. android:layout_width="wrap_content"
48. android:layout_height="wrap_content"
49. android:layout_above="@id/animationIV"
50. android:contentDescription="@string/app_name"
51. android:layout_marginTop="20dip"
52. />
53. </RelativeLayout>

[java] view plaincopy

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