2014-10-31Android学习------序列帧动画,开始,结束监听的解决--------GIF动画实现

写一篇文章很辛苦啊！！！

转载请注明，联系请邮件nlp30508@qq.com

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的个AnimationTest 源码 百度搜就知道很多下载的地方  网上源码的名字叫：序列帧动画,开始,结束监听的解决.zip

监听事件非常的常见  也经常用   我们一般都是利用系统里面的方法去实现    

监听事件可以是触摸（一般是按下，拖动，松开）  可以是点击（点击事件是指你设置了一个按钮或者图片等）

但是当你自己去定义一个View的时候，这个时候接口就需要你自己去定义了  

系统自定义定义的widget都是有相应的监听事件的处理，但是你自己定义了一个widget  就需要去自己写出来了，

这节将的就是当我们继承View实现了动画的展示，但是我们需要去监听这个动画并有操作该怎么办？该怎么去写这样的函数

其实它的原理跟前面的文章：26个字母的列表实现是一样的 点击我查看

根据前面的例子我们知道一般步骤是这样的：

1.自己定义一个类  让它继承Android.view.View   

2.重载这个类的构造函数，然后处理OnDraw（）函数  

3.如果我们想要自己定义的视图能够被监听，是需要再类中添加监听接口（定义方法不实现）

4.如果想要这个自定义的视图实现监听，在activity中，那么首先需要把它  放在  布局文件中，也就是你需要在layout中有定义

做法一般是这样的：

<com.wust.citylist.activity.MyLetterListView  
    android:id="@+id/cityLetterListView"  
    android:layout_width="30dip"  
    android:layout_height="fill_parent"  
    android:layout_alignParentRight="true"  
    android:background="#40000000" />  

  看到没有  我们只关心 这句话： com.wust.citylist.activity.MyLetterListView

这样做就把我们自己定义的视图当做一个控件显示在布局上了，这个时候我们就可以去处理它的监听事件了

5.接下来就在实现这个布局文件的activity类中去实现这个接口中的函数就可以了  也就是重载  

上面的步骤应该说的够清楚了，接下来我们就来看看  帧动画事件的监听处理

一. 定义自己的视图

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AnimationImageView extends ImageView {

	public AnimationImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public AnimationImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}

	public AnimationImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	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);
        }
        
        // 动画结束后
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
			
			@Override
			public void run() {
				if(listener != null){
					// 调用回调函数onEnd
					listener.onEnd();
				}
			}
		}, durationTime);
	}
	
}

code说明：

1.第一个这个类是继承ImageView  ,上篇文章我们是直接继承View的

2.构造函数 处理 这里不需要我们关系：右键 source  ->generate constructors from superclass....  然后全部勾选就可以了

3.监听事件的接口：

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

这个就是像我们的生命周期一样，当创建之后可以做哪些操作，结束之后有可以做哪些操作，至于怎么操作需要你自己再去重写

4.当这些做完了，我们就需要把动画加载到视图上去了，而加载到视图上是怎么实现的呢？

它是先从文件中把图片加载到动画这个类上，然后再有这个类放在视图上，就想上篇文章，我们定义一个Movie类一样，不过这里是 AnimationDrawable,

首先我们来看看官方API是怎么样介绍的：

public class

AnimationDrawable

extends  DrawableContainer
implements  Animatable  Runnable

java.lang.Object
↳	android.graphics.drawable.Drawable
	↳	android.graphics.drawable.DrawableContainer
		↳	android.graphics.drawable.AnimationDrawable

Class Overview

An object used to create frame-by-frame animations, defined by a series of Drawable objects, which can be used as a View object's background.

The simplest way to create a frame-by-frame animation is to define the animation in an XML file, placed in the res/drawable/ folder, and set it as the background to a View object. Then, call run() to start the animation.

An AnimationDrawable defined in XML consists of a single <animation-list> element, and a series of nested <item> tags. Each item defines a frame of the animation.

我们只看类概述：

该对象是用来创建序列帧动画的（一帧接一帧动画），这些系列帧动画是通过一系列可以绘制的对象来定义的，

而这些可以绘制的对象能够被作为一个View对象的背景。

创建系列帧动画最简单的方法就是在XML文件中去定义动画，把它们放在文件夹下，res/drawable/folder(folder是可以自己定义的，也可以不要这个文件)，把他们设置为一个视图对象的背景。然后，调用函数run()去启动动画

一个AnimationDrawable(可绘制动画) 是在XML中定义的，它通常是这样定义的（由下面的这些组成）：在xml文件中

根节点是<animation-list>,子节点是<item>，每一个<item>定义动画的的一帧（也就是一帧动画）

看看官方给出的例子：

See the example below.

spin_animation.xml file in res/drawable/ folder:

<!-- Animation frames are wheel0.png -- wheel5.png files inside the
 res/drawable/ folder -->
 <animation-list android:id="selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    <item android:drawable="@drawable/wheel2" android:duration="50" />
    <item android:drawable="@drawable/wheel3" android:duration="50" />
    <item android:drawable="@drawable/wheel4" android:duration="50" />
    <item android:drawable="@drawable/wheel5" android:duration="50" />
 </animation-list>

Here is the code to load and play this animation.

 // Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation (looped playback by default).
 frameAnimation.start()
 

注意到：

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

Drawable

getDrawable() Return the view's drawable, or null if no drawable has been assigned.

getBackground()和getDrawable有什么区别呢？你可以它的解释，

// 得到背景，这个背景已经被编译成为一个AnimationDrawable对象

Drawable

getBackground() Gets the background drawable

这个是一个继承的方法。

但是两个人返回的对象是一样的。我们看上面的类介绍可以看到    AnimationDrawable是继承Drawable类的：

java.lang.Object
↳	android.graphics.drawable.Drawable
	↳	android.graphics.drawable.DrawableContainer
		↳	android.graphics.drawable.AnimationDrawable

通过API的学习我们知道了要想利用这个AnimationDrawable我们必须先去定义一些XML文件，每一个xml文件描述的就是动画要显示的内容，该动画的每一帧动画内容是有<item>来定义的，以及显示的时长，既然这样，我们就必须先去了解这样的xml文件有哪些属性是可以设置的呢？

再看看官方的API:

XML Attributes
Attribute Name	Related Method	Description
android:drawable		Reference to a drawable resource to use for the frame.
android:duration		Amount of time (in milliseconds) to display this frame.
android:oneshot		If true, the animation will only run a single time and then stop.
android:variablePadding		If true, allows the drawable's padding to change based on the current state that is selected.
android:visible		Provides initial visibility state of the drawable; the default value is false.

我们要关系的就是三个属性：

1. android:drawable  ：引用一个可以绘制的资源来描述该帧  它是定义在item中的

2. android:duration   ：动画的时间长度，以毫秒为单位，来显示该帧，  它是定义在item中的

3. android:oneshot   ：如果为true，那么该动画将执行运行一次，然后停止  它是定义在<animation-list>中的

了解了这些，我们接下来就需要去写自己的动画了，使用XML：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true" >

    <item
        android:drawable="@drawable/besg00042"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/besg00041"
        android:duration="150">
    </item>

</animation-list>

这样做了之后，我们再回来这个函数的处理：

看下面的函数

public void loadAnimation(int resId){// 参数resID是资源文件对应的id

setImageResource(resId);//用这个id对应的文件来布置ImageView视图的内容，也就是当前我们继承的AnimationView类，

AnimationDrawable anim = (AnimationDrawable)getDrawable();//得到一个AnimationDrawable对象

anim.start();//然后启动动画

}

上面的函数就是上面的，如果没有监听事件，就这样写，但是如果有监听事件的话，我们是怎么让这些动画加载到视图上去的呢？

我们继续往下分析：

/**
* 带动画监听的播放
* @param resId
* @param listener  注意到这里一个final来修饰这个参数，因为我们的接口是内部定义的，如果不这样

 *  定义是会出错的。
*/
public void loadAnimation(int resId, final OnFrameAnimationListener listener) {
setImageResource(resId);
AnimationDrawable anim = (AnimationDrawable)getDrawable();
anim.start();

//到这里为止，思路跟没有监听的思路是一致的，那么有了监听事件就继续往下走
if(listener != null){//如果有监听事件的话，那么马上去调用监听事件的处理函数，也就是监听被

//触发了
// 调用回调函数onStart
listener.onStart();//这个函数是接口中定义但没有被实现的方法，到底要执行什么，需要去

//activity类中去重载它
}

// 计算动态图片所花费的时间
int durationTime = 0;
      for (int i = 0; i < anim.getNumberOfFrames(); i++) {
            durationTime += anim.getDuration(i);
       }
        
        // 动画结束后
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {

@Override
public void run() {
if(listener != null){
// 调用回调函数onEnd
listener.onEnd();
}
}
}, durationTime);
}

public int getDuration (int i)

Since:  API Level 1

Returns

• The duration in milliseconds of the frame at the specified index

返回值：指定的帧动画的时间

public int getNumberOfFrames ()

Since:  API Level 1

Returns

• The number of frames in the animation

返回值：动画的帧数（也就是一个xml文件对应有多少帧（item的个数））

到这里为止，这个类的作用和函数我们都基本掌握了，接下来就是如何在activity中去实现它呢？

二。按照上面的步骤，当这个自定义的视图View对象定义好之后，想要在activity中处理它的监听事件，必须把它放到布局文件中去，那么我们就在布局文件中去定义它

    <com.wust.animationtest.ui.AnimationImageView
        android:id="@+id/anim_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

三。当在main.xml定义好之后，我们需要去处理activity类了：

1.在onCreate（Bundle )类中先去加载这个布局

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.main);//加载布局
initView();//初始化    这里主要是找到布局文件中的各个控件
setListener();//设置监听事件  这种写法就是让当前的类去实现implements OnClickListener
}

private void initView() {
// TODO Auto-generated method stub
anim_view = (AnimationImageView) findViewById(R.id.anim_view);//找到这个控件
attack = (Button) this.findViewById(R.id.attack);
defense = (Button) this.findViewById(R.id.defense);
// 加载默认的动态图
anim_view.loadAnimation(R.drawable.anim_idle);首先是让当前的视图就有动画，初始化动画
}

private void setListener() {
// TODO Auto-generated method stub
attack.setOnClickListener(this);
defense.setOnClickListener(this);
}

接下来就是用按钮的点击事件来实现对动画的监听：

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.attack:
// 如果点击了该按钮，加载带监听的动态图  播放攻击动作  

// 注意到这个参数，是一个内部类的形式
anim_view.loadAnimation(R.drawable.anim_attack,
new OnFrameAnimationListener() {

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

// 可以加载你自己的代码，也即是用户点击了攻击按钮，你想干什么
}
@Override
public void onEnd() {
// 动画结束播放时
// 还原回默认动态图  让视图的背景重新返回初始化时设置的样子
anim_view.loadAnimation(R.drawable.anim_idle);
}
});
break;
case R.id.defense:
// 加载带监听的动态图 防御动作
anim_view.loadAnimation(R.drawable.anim_defense,
new OnFrameAnimationListener() {
@Override
public void onStart() {
// 动画刚播放时
}
@Override
public void onEnd() {
// 动画结束播放时

// 还原回默认动态图
anim_view.loadAnimation(R.drawable.anim_idle);
}
});
break;
}

}

至此activity也就完成了，接下来去配置下清单文件就可以部署了，

我们看看效果图：

关于动画还有其他的方式，这里就先不讲了，下次有机会再学习。