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补间动画与帧动画源码