Android动画之逐帧动画(FrameAnimation)详解

今天我们就来学习逐帧动画,废话少说直接上效果图如下:

帧动画的实现方式有两种：

一、在res/drawable文件夹下新建animation-list的XML实现帧动画

1、首先在res/drawable文件夹下添加img00-img24共25张图片

2、新建frame_anim.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
3. android:oneshot="true" >
4. <!-- animation-list 帧动画 -->
5. <!-- android:oneshot的值为 false代表播放多次，true代表只播放一次 -->
6. <!-- duration代表每张图片的播放时间 ,定义一个持续时间为50毫秒的动画帧 -->
7. <item
8. android:drawable="@drawable/img00"
9. android:duration="50"/>
10. <item
11. android:drawable="@drawable/img01"
12. android:duration="50"/>
13. <item
14. android:drawable="@drawable/img02"
15. android:duration="50"/>
16. <item
17. android:drawable="@drawable/img03"
18. android:duration="50"/>
19. <item
20. android:drawable="@drawable/img04"
21. android:duration="50"/>
22. <item
23. android:drawable="@drawable/img05"
24. android:duration="50"/>
25. <item
26. android:drawable="@drawable/img06"
27. android:duration="50"/>
28. <item
29. android:drawable="@drawable/img07"
30. android:duration="50"/>
31. <item
32. android:drawable="@drawable/img08"
33. android:duration="50"/>
34. <item
35. android:drawable="@drawable/img09"
36. android:duration="50"/>
37. <item
38. android:drawable="@drawable/img10"
39. android:duration="50"/>
40. <item
41. android:drawable="@drawable/img11"
42. android:duration="50"/>
43. <item
44. android:drawable="@drawable/img12"
45. android:duration="50"/>
46. <item
47. android:drawable="@drawable/img13"
48. android:duration="50"/>
49. <item
50. android:drawable="@drawable/img14"
51. android:duration="50"/>
52. <item
53. android:drawable="@drawable/img15"
54. android:duration="50"/>
55. <item
56. android:drawable="@drawable/img16"
57. android:duration="50"/>
58. <item
59. android:drawable="@drawable/img17"
60. android:duration="50"/>
61. <item
62. android:drawable="@drawable/img18"
63. android:duration="50"/>
64. <item
65. android:drawable="@drawable/img19"
66. android:duration="50"/>
67. <item
68. android:drawable="@drawable/img20"
69. android:duration="50"/>
70. <item
71. android:drawable="@drawable/img21"
72. android:duration="50"/>
73. <item
74. android:drawable="@drawable/img22"
75. android:duration="50"/>
76. <item
77. android:drawable="@drawable/img23"
78. android:duration="50"/>
79. <item
80. android:drawable="@drawable/img24"
81. android:duration="50"/>
82. </animation-list>

3、在activity_main中添加控件

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. tools:context="com.havorld.frameanimation.MainActivity" >
6. <ImageView
7. android:id="@+id/imageView"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_centerInParent="true" />
11. <!-- android:background="@drawable/frame_anim" -->
12. <LinearLayout
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content"
15. android:layout_alignParentBottom="true"
16. android:orientation="horizontal"
17. android:padding="10dp" >
18. <Button
19. android:id="@+id/start"
20. android:layout_width="0dp"
21. android:layout_height="wrap_content"
22. android:layout_weight="1"
23. android:text="播放" />
24. <Button
25. android:id="@+id/stop"
26. android:layout_width="0dp"
27. android:layout_height="wrap_content"
28. android:layout_weight="1"
29. android:text="停止" />
30. </LinearLayout>
31. </RelativeLayout>

4、在代码中获取并开启帧动画

1. public class MainActivity extends Activity implements OnClickListener {
2. private ImageView imageView;
3. private AnimationDrawable animationDrawable;
4. @Override
5. protected void onCreate(Bundle savedInstanceState) {
6. super.onCreate(savedInstanceState);
7. setContentView(R.layout.activity_main);
8. imageView = (ImageView) findViewById(R.id.imageView);
9. findViewById(R.id.start).setOnClickListener(this);
10. findViewById(R.id.stop).setOnClickListener(this);
11. setXml2FrameAnim1();
12. // setXml2FrameAnim2();
13. }
14. /**
15. * 通过XML添加帧动画方法一
16. */
17. private void setXml2FrameAnim1() {
18. // 把动画资源设置为imageView的背景,也可直接在XML里面设置
19. imageView.setBackgroundResource(R.drawable.frame_anim);
20. animationDrawable = (AnimationDrawable) imageView.getBackground();
21. }
22. /**
23. * 通过XML添加帧动画方法二
24. */
25. private void setXml2FrameAnim2() {
26. // 通过逐帧动画的资源文件获得AnimationDrawable示例
27. animationDrawable = (AnimationDrawable) getResources().getDrawable(
28. R.drawable.frame_anim);
29. imageView.setBackground(animationDrawable);
30. }
31. @Override
32. public void onClick(View v) {
33. switch (v.getId()) {
34. case R.id.start:
35. if (animationDrawable != null && !animationDrawable.isRunning()) {
36. animationDrawable.start();
37. }
38. break;
39. case R.id.stop:
40. if (animationDrawable != null && animationDrawable.isRunning()) {
41. animationDrawable.stop();
42. }
43. break;
44. default:
45. break;
46. }
47. }
48. }

二、通过代码实现帧动画

1. /**
2. * 通过代码添加帧动画方法
3. */
4. private void setSrc2FrameAnim() {
5. animationDrawable = new AnimationDrawable();
6. // 为AnimationDrawable添加动画帧
7. animationDrawable.addFrame(
8. getResources().getDrawable(R.drawable.img00), 50);
9. animationDrawable.addFrame(
10. getResources().getDrawable(R.drawable.img01), 50);
11. animationDrawable.addFrame(
12. getResources().getDrawable(R.drawable.img02), 50);
13. animationDrawable.addFrame(
14. getResources().getDrawable(R.drawable.img03), 50);
15. animationDrawable.addFrame(
16. getResources().getDrawable(R.drawable.img04), 50);
17. animationDrawable.addFrame(
18. getResources().getDrawable(R.drawable.img05), 50);
19. animationDrawable.addFrame(
20. getResources().getDrawable(R.drawable.img06), 50);
21. animationDrawable.addFrame(
22. getResources().getDrawable(R.drawable.img07), 50);
23. animationDrawable.addFrame(
24. getResources().getDrawable(R.drawable.img08), 50);
25. animationDrawable.addFrame(
26. getResources().getDrawable(R.drawable.img09), 50);
27. animationDrawable.addFrame(
28. getResources().getDrawable(R.drawable.img10), 50);
29. animationDrawable.addFrame(
30. getResources().getDrawable(R.drawable.img11), 50);
31. animationDrawable.addFrame(
32. getResources().getDrawable(R.drawable.img12), 50);
33. animationDrawable.addFrame(
34. getResources().getDrawable(R.drawable.img13), 50);
35. animationDrawable.addFrame(
36. getResources().getDrawable(R.drawable.img14), 50);
37. animationDrawable.addFrame(
38. getResources().getDrawable(R.drawable.img15), 50);
39. animationDrawable.addFrame(
40. getResources().getDrawable(R.drawable.img16), 50);
41. animationDrawable.addFrame(
42. getResources().getDrawable(R.drawable.img17), 50);
43. animationDrawable.addFrame(
44. getResources().getDrawable(R.drawable.img18), 50);
45. animationDrawable.addFrame(
46. getResources().getDrawable(R.drawable.img19), 50);
47. animationDrawable.addFrame(
48. getResources().getDrawable(R.drawable.img20), 50);
49. animationDrawable.addFrame(
50. getResources().getDrawable(R.drawable.img21), 50);
51. animationDrawable.addFrame(
52. getResources().getDrawable(R.drawable.img22), 50);
53. animationDrawable.addFrame(
54. getResources().getDrawable(R.drawable.img23), 50);
55. animationDrawable.addFrame(
56. getResources().getDrawable(R.drawable.img24), 50);
57. // 设置为循环播放
58. animationDrawable.setOneShot(false);
59. imageView.setBackground(animationDrawable);
60. }

点击下载源码