Andorid动画——补间动画与帧动画

简介

Android在3.0之前，是补间动画和帧动画的天下。后续3.0后，才出现了属性动画，补充了以上两种动画的不足之处，使android中的动画效果更丰富和适应更多的场景。

这里先介绍补间动画与帧动画。

补间动画——Tween

补间动画（英译也可称为渐变动画）主要包括淡入淡出（透明度）——alpha、移动——translation、旋转——rotation、缩放——scale。

从字面意思我们很容易看出各自代表的意思。

（1）淡入淡出效果就是透明度的设置，可以设置范围是0到1.。1代表不透明，0代表透明；

（2）移动代表的是位移，从界面上A点移动到B点；

（3）旋转代表的是图片在界面上的旋转，广角度一般设置-360到360；

（4）缩放是对本图片的缩放，放大缩小都可。

补间动画的实现

补间动画可以用代码实现，也可以使用xml配置方式实现。

现在先看用代码如何实现。

代码实现

想要用代码实现，首先要了解动画实现，会涉及哪些类，如何使用这些类。

Animation类是动画的基类，继承它的子类有AnimationSet、Animation等。而具体到各个补间动画，比如淡入淡出，也有AlphaAnimation类（Animation的子类），其他各个具体补间动画也是类似的。

通俗的做法是：

（1）新建一个AnimationSet类对象，作为容器。

（2）新建AlphaAnimation类对象，并将该对象加入到AnimationSet对象中。

（3）将要实现动画效果的图片，绑定AnimationSet，并启动。

注意：

（1）你也可以在代码中添加监听，用于监听动画执行的状态，开启，结束等。

（2）动画效果是可以混合使用的，代码中有混合的介绍和范例。

这里贴上补间动画的四种实现代码：

package com.example.animation_csdn;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class TweenActivity extends Activity implements OnClickListener{

	Button alpha,rotation,transtion,scale,hunhe,config;
	ImageView img;
	AnimationSet animationSet;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tween);
		 initView();
	}
	/**
	 * 初始化控件
	 */
	public void initView()
	{
		alpha=(Button)findViewById(R.id.alpha);
		rotation=(Button)findViewById(R.id.rotation);
		transtion=(Button)findViewById(R.id.translation);
		scale=(Button)findViewById(R.id.scale);
		hunhe=(Button)findViewById(R.id.hunhe);
		img=(ImageView)findViewById(R.id.img);
		config=(Button)findViewById(R.id.code);
		
		alpha.setOnClickListener(this);
		rotation.setOnClickListener(this);
		transtion.setOnClickListener(this);
		scale.setOnClickListener(this);
		hunhe.setOnClickListener(this);
		config.setOnClickListener(this);
	}
	
	/**
	 * 具体执行的动画
	 * @param tag 标志 
	 * 1 淡入淡出,
	 * 2 旋转,
	 * 3 移动,
	 * 4 缩放,
	 * 5 混合动画,
	 * 6 xml实现
	 */
	public void animationDo(int tag)
	{
		switch (tag) {
		case 1:
			animationSet=new AnimationSet(true);
			AlphaAnimation alphaAnimation=new AlphaAnimation(0f,1f);
			alphaAnimation.setDuration(1000);
			animationSet.addAnimation(alphaAnimation);
			animationSet.setAnimationListener(new listener());
			img.startAnimation(animationSet);
			break;
		case 2:
			animationSet=new AnimationSet(true);
			RotateAnimation rotateAnimation=new RotateAnimation(0f, 360f);
			rotateAnimation.setDuration(1000);
			animationSet.addAnimation(rotateAnimation);
			img.startAnimation(animationSet);
			break;
		case 3:
			animationSet=new AnimationSet(true);
			TranslateAnimation translateAnimation=new TranslateAnimation(0f, 180f, 0f, 90f);
			translateAnimation.setDuration(1000);
			animationSet.addAnimation(translateAnimation);
			img.startAnimation(animationSet);
			break;
		case 4:
			animationSet=new AnimationSet(true);
			ScaleAnimation scaleAnimation=new ScaleAnimation(Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
			scaleAnimation.setDuration(1000);
			animationSet.addAnimation(scaleAnimation);
			img.startAnimation(animationSet);
			break;
		case 5:
			animationSet=new AnimationSet(true);
			ScaleAnimation scaleAnimation1=new ScaleAnimation(Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
			scaleAnimation1.setDuration(1000);
			animationSet.addAnimation(scaleAnimation1);
			
			AlphaAnimation alphaAnimation2=new AlphaAnimation(1f, 0f);
			alphaAnimation2.setDuration(1000);
			animationSet.addAnimation(alphaAnimation2);
			img.startAnimation(animationSet);
			
			break;
		case 6:
			Animation animation = AnimationUtils.loadAnimation(
	                  this, R.anim.settween);
	           // 启动动画
	           img.startAnimation(animation);
			break;

		default:
			break;
		}
	}
	
	/**
	 * 动画状态监听
	 * @author 战国
	 *
	 */
	class listener implements AnimationListener
	{

		@Override
		public void onAnimationEnd(Animation animation) {
			// TODO Auto-generated method stub
			System.out.println("动画结束");
		}

		@Override
		public void onAnimationRepeat(Animation animation) {
			// TODO Auto-generated method stub
			System.out.println("动画重复播放");
		}

		@Override
		public void onAnimationStart(Animation animation) {
			// TODO Auto-generated method stub
			System.out.println("动画开始");
		}
		
	}
	
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.alpha:
			animationDo(1);
			break;
		case R.id.rotation:
			animationDo(2);
			break;
		case R.id.translation:
			animationDo(3);
			break;
		case R.id.scale:
			animationDo(4);
			break;
		case R.id.hunhe:
			animationDo(5);
			break;
		case R.id.code:
			animationDo(6);
			break;

		default:
			break;
		}
	}
   
	
}

可以看到，具体执行动画时，我们就只简单的设置了几个参数，一般是起始位置，结束位置，动画时长。

那具体它们各自的参数有哪些讲究，如下：

     １、 setDuration(long durationMills)
　　设置动画持续时间（单位：毫秒）
　　２、 setFillAfter(Boolean fillAfter)
　　如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态
　　３、 setFillBefore(Boolean fillBefore)
　　如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态
　　４、 setStartOffSet(long startOffSet)
　　设置动画执行之前的等待时间
　　５、 setRepeatCount(int repeatCount)
　　设置动画重复执行的次数

xml配置实现

这个的配置实现，是在res目录下新建一个anim文件夹，并设置相应的xml。

xml格式如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="500"
        android:duration="1000"
        />

    <rotate
        android:fromDegrees="0"
        android:toDegrees="-360"
        android:duration="1000"
        ></rotate>
    
    <scale
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        ></scale>
    
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="1000"
        ></translate>
</set>

在代码中，引用该xml，并启动动画：

	Animation animation = AnimationUtils.loadAnimation(
	                  this, R.anim.settween);
	           // 启动动画
	           img.startAnimation(animation);

以上，我们就实现了补间动画的代码实现和配置实现，效果可以下载源码观看。

帧动画——Frame

帧动画在实际应用中，运用也是很多的。在很多app的过场动画都使用的是帧动画。

帧动画同样有两种实现方式，代码实现和配置实现。日常中我们使用更多的是配置实现。

先看看配置是如何实现的帧动画。

xml配置实现

同样的，在res/anim下新建xml文件，格式如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:oneshot="false" >
    
    <item android:drawable="@drawable/house1" android:duration="50" />
<item android:drawable="@drawable/house2" android:duration="50" />
<item android:drawable="@drawable/house3" android:duration="50" />

</animation-list>

在代码中引用该配置：

 img.setBackgroundResource(R.anim.list);
	            animationDrawable = (AnimationDrawable) img.getBackground();
	            animationDrawable.start();

简单实现，主要区别于补间动画的是，我们这里使用了一个AnimationDrawable。

代码实现

animationDrawable = new AnimationDrawable();
			animationDrawable.setOneShot(false);
	        animationDrawable.addFrame(getResources().getDrawable(R.drawable.house1), 100);
	        animationDrawable.addFrame(getResources().getDrawable(R.drawable.house2), 100);
	        animationDrawable.addFrame(getResources().getDrawable(R.drawable.house3), 100);
	        img.setBackground(animationDrawable);
	        animationDrawable.start();

与xml配置相比，这样显的麻烦一些，因此一般不这样使用。

以上就是帧动画。

源码

源码包含了以上的实现，可下载观看效果：

Andorid补间动画与帧动画源码