1、 本文要完成的任务有:
多张连续图片组成常见的动画效果(暂时有5种)
按钮控制动画的播放与停止
2、 效果展示图如下:
3、 任务具体实现:
1--->首先我们要准备一系列连续的图片,选择其中一组图片如下:
2--->需要在res/drawable目录下新建一个名为frame_animation_02.xml文件,内容如下:
<span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<!--
根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画
根标签下,通过item标签对动画中的每一个图片进行声明
android:duration 表示展示所用的该图片的时长,单位是毫秒
-->
<item
android:drawable="@drawable/loading_f03"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f04"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f05"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f06"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f07"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f08"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f09"
android:duration="100"/>
<item
android:drawable="@drawable/loading_f10"
android:duration="100"/>
</animation-list></span>
3--->在布局文件中加入一个IamgeView图片控件用来显示动画,不加任何代码,动画会自动播放,如下:
<span style="font-family:Comic Sans MS;font-size:18px;"> <ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/frame_animation_02"
android:layout_marginTop="100dp"
android:layout_centerHorizontal="true"/></span>
4--->如果我们想在代码中控制动画的播放与停止,就需要一个特别的类型AnimationDrawable,播放与停止代码如下:
<span style="font-family:Comic Sans MS;font-size:18px;"> //播放动画
private void playAnimation(){
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.start();
}
//停止动画
private void stopAnimation(){
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.stop();
}</span>
<span style="font-family:Comic Sans MS;font-size:18px;"> private int[] animationDrawableIds = {
R.drawable.frame_animation_01,
R.drawable.frame_animation_02,
R.drawable.frame_animation_03,
R.drawable.frame_animation_04,
R.drawable.frame_animation_05
};
//播放下一组动画
private void setNextAnimationDrawable(){
currentIndex++;
if(currentIndex == animationDrawableIds.length){
currentIndex = 0;
}
//设置动画
imageView.setImageResource(animationDrawableIds[currentIndex]);
//播放动画
playAnimation();
}</span>
02_FrameAnimation逐帧动画Demo下载