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

 

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

标签： Android动画逐帧动画FrameAnimation

2017-01-17 14:44  210人阅读  评论(0)  收藏  举报

  分类：

Android动画（2） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载请注明出处：http://blog.csdn.net/xiaohao0724/article/details/54582965

Android中的动画,大概分为三种:

1、逐帧动画(FrameAnimation)

2、补间动画(TweenAnimation)

3、属性动画(PropertyAnimation)

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

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

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

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

2、新建frame_anim.xml

[html]  view plain  copy

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

3、在activity_main中添加控件

[html]  view plain  copy

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.   
7.     <ImageView  
8.         android:id="@+id/imageView"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_centerInParent="true" />  
12.     <!-- android:background="@drawable/frame_anim" -->  
13.   
14.     <LinearLayout  
15.         android:layout_width="match_parent"  
16.         android:layout_height="wrap_content"  
17.         android:layout_alignParentBottom="true"  
18.         android:orientation="horizontal"  
19.         android:padding="10dp" >  
20.   
21.         <Button  
22.             android:id="@+id/start"  
23.             android:layout_width="0dp"  
24.             android:layout_height="wrap_content"  
25.             android:layout_weight="1"  
26.             android:text="播放" />  
27.   
28.         <Button  
29.             android:id="@+id/stop"  
30.             android:layout_width="0dp"  
31.             android:layout_height="wrap_content"  
32.             android:layout_weight="1"  
33.             android:text="停止" />  
34.     </LinearLayout>  
35.   
36. </RelativeLayout>  

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

[java]  view plain  copy

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

二、通过代码实现帧动画

[java]  view plain  copy

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

点击下载源码