Android 实现帧动画

发表于 更新于 分类于 阅读次数： 本文字数： 8.3k 阅读时长 ≈ 8 分钟

1.在res的drawable下新建一个布局animation.xml*文件

version
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@drawable/image1"
        android:duration="32" />
    <item
        android:drawable="@drawable/image2"
        android:duration="32" />
    <item
        android:drawable="@drawable/image3"
        android:duration="32" />
    <item
        android:drawable="@drawable/image4"
        android:duration="32" />
    <item
        android:drawable="@drawable/image5"
        android:duration="32" />
    <item
        android:drawable="@drawable/image6"
        android:duration="32" />
    <item
        android:drawable="@drawable/image7"
        android:duration="32" />
    <item
        android:drawable="@drawable/image8"
        android:duration="32" />
    <item
        android:drawable="@drawable/image9"
        android:duration="32" />
    <item
        android:drawable="@drawable/image10"
        android:duration="32" />
    <item
        android:drawable="@drawable/image11"
        android:duration="32" />
    <item
        android:drawable="@drawable/image12"
        android:duration="32" />
    <item
        android:drawable="@drawable/image13"
        android:duration="32" />
    <item
        android:drawable="@drawable/image14"
        android:duration="32" />
    <item
        android:drawable="@drawable/image15"
        android:duration="32" />
    <item
        android:drawable="@drawable/image16"
        android:duration="32" />
    <item
        android:drawable="@drawable/image17"
        android:duration="32" />
    <item
        android:drawable="@drawable/image18"
        android:duration="32" />
    <item
        android:drawable="@drawable/image19"
        android:duration="32" />
    <item
        android:drawable="@drawable/image20"
        android:duration="32" />
    <item
        android:drawable="@drawable/image21"
        android:duration="32" />
    <item
        android:drawable="@drawable/image22"
        android:duration="32" />
    <item
        android:drawable="@drawable/image23"
        android:duration="32" />
    <item
        android:drawable="@drawable/image24"
        android:duration="32" />
    <item
        android:drawable="@drawable/image25"
        android:duration="32" />
    <item
        android:drawable="@drawable/image26"
        android:duration="32" />
    <item
        android:drawable="@drawable/image27"
        android:duration="32" />
    <item
        android:drawable="@drawable/image28"
        android:duration="32" />
    <item
        android:drawable="@drawable/image29"
        android:duration="32" />
    <item
        android:drawable="@drawable/image30"
        android:duration="32" />
    <item
        android:drawable="@drawable/image31"
        android:duration="32" />
    <item
        android:drawable="@drawable/image32"
        android:duration="32" />
    <item
        android:drawable="@drawable/image33"
        android:duration="32" />
    <item
        android:drawable="@drawable/image34"
        android:duration="32" />
    <item
        android:drawable="@drawable/image35"
        android:duration="32" />
    <item
        android:drawable="@drawable/image36"
        android:duration="32" />
    <item
        android:drawable="@drawable/image37"
        android:duration="32" />
    <item
        android:drawable="@drawable/image38"
        android:duration="32" />
    <item
        android:drawable="@drawable/image39"
        android:duration="32" />
    <item
        android:drawable="@drawable/image40"
        android:duration="32" />
    <item
        android:drawable="@drawable/image41"
        android:duration="32" />
    <item
        android:drawable="@drawable/image42"
        android:duration="32" />
    <item
        android:drawable="@drawable/image43"
        android:duration="32" />
    <item
        android:drawable="@drawable/image44"
        android:duration="32" />
    <item
        android:drawable="@drawable/image45"
        android:duration="32" />
    <item
        android:drawable="@drawable/image46"
        android:duration="32" />
    <item
        android:drawable="@drawable/image47"
        android:duration="32" />
    <item
        android:drawable="@drawable/image48"
        android:duration="32" />
    <item
        android:drawable="@drawable/image49"
        android:duration="32" />
    <item
        android:drawable="@drawable/image50"
        android:duration="32" />
    <item
        android:drawable="@drawable/image51"
        android:duration="32" />
    <item
        android:drawable="@drawable/image52"
        android:duration="32" />
    <item
        android:drawable="@drawable/image53"
        android:duration="32" />
    <item
        android:drawable="@drawable/image54"
        android:duration="32" />
    <item
        android:drawable="@drawable/image55"
        android:duration="32" />
    <item
        android:drawable="@drawable/image56"
        android:duration="32" />
    <item
        android:drawable="@drawable/image57"
        android:duration="32" />
    <item
        android:drawable="@drawable/image58"
        android:duration="32" />
    <item
        android:drawable="@drawable/image59"
        android:duration="32" />
    <item
        android:drawable="@drawable/image60"
        android:duration="32" />

</animation-list>

**android:oneshot=”true”**当为true时表示只播放一次，为false时表示循环播放；

2.给ImageView设置帧动画的src

1
2
3
4
5
6
7
<ImageView
       android:id="@+id/ivLoading"
       android:layout_width="300dp"
       android:layout_height="300dp"
       android:layout_centerInParent="true"
       android:src="@drawable/animation"
       android:visibility="gone" />

3.播放帧动画

1
2
3
ivLoading.setImageResource(R.drawable.animation);
drawable = (AnimationDrawable) ivLoading.getDrawable();
drawable.start();

4.以上播放默认是没有监听的，所以我们这里提供一种自定义View，可以监听帧动画播完的监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
 * 自定义可以播放动态图片的ImageView
 */
public class AnimationImageView extends ImageView {

	public AnimationImageView(Context context) {
		super(context);
	}

	public AnimationImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public AnimationImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	
	
	public interface OnFrameAnimationListener{
		/**
		 * 动画开始播放后调用
		 */
		void onStart();
		/**
		 * 动画结束播放后调用
		 */
		void onEnd();
	}

	/**
	 * 不带动画监听的播放
	 * @param resId
	 */
	public void loadAnimation(int resId){
		setImageResource(resId);
		AnimationDrawable anim = (AnimationDrawable)getDrawable();
		anim.start();
	}
	
	/**
	 * 带动画监听的播放
	 * @param resId
	 * @param listener
	 */
	public void loadAnimation(int resId, final OnFrameAnimationListener listener) {
		setImageResource(resId);
		AnimationDrawable anim = (AnimationDrawable)getDrawable();
		anim.start();
		if(listener != null){
			// 调用回调函数onStart
			listener.onStart();
		}
		
		// 计算动态图片所花费的事件
		int durationTime = 0;
        for (int i = 0; i < anim.getNumberOfFrames(); i++) {
            durationTime += anim.getDuration(i);
        }
        
        // 动画结束后
        new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				if(listener != null){
					// 调用回调函数onEnd
					listener.onEnd();
				}
			}
		}, durationTime);
	}
}

5.代码中加载并设置监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 加载带监听的帧动画
anim_view.loadAnimation(R.drawable.anim_defense,
		new OnFrameAnimationListener() {

			@Override
			public void onStart() {
				// 动画刚播放时
			}

			@Override
			public void onEnd() {
				// 动画结束播放时
			}
		});

参考文章：

http://blog.csdn.net/zuozuoshenghen/article/details/50249569

http://blog.csdn.net/u012975705/article/details/48717391

http://www.cnblogs.com/net168/p/4204797.html