Animation 动画介绍和实现

Android 平台提供了两类动画。

第一类就是 Frame动画(AnimationDrawable)，

帧动画。 由一张张的图片连续显示呈现出来的动画。

在drawable目录下创建一个配置文件。标签是animation-list。

oneshot属性，如果为true，一发。 false，停不下来。

使用的时候当做一个Drawable用就行了。

注意

如果是当src设置的，动画会自动播放

如果是当background设置的，动画不会自动播放

AnimationDrawable drawable = (AnimationDrawable)iv.getBackground();
drawable.start();

二类是Tween动画(补间动画)

就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变），but只是做动画，真正的组件位置是没有发生变化的。

anim.setRepeatCount(Animation.INFINITE);

//设置重复次数。如果0，带表不重复。如果为1，带表重复一次。如果为Animation.INFINITE，无限循环

anim.setRepeatMode(Animation.REVERSE);

Animation.REVERSE： 动画正反循环做

Animation.RESTART: 重新开始做。默认值

setFillAfter ： 动画结束之后，停留在最后的位置。

下面就讲一下Tweene Animations。

主要类：

Animation —— 动画

AlphaAnimation —— 渐变透明度

RotateAnimation —— 画面旋转

ScaleAnimation —— 渐变尺寸缩放

TranslateAnimation —— 位置移动

AnimationSet —— 动画集

有了这些类，那么我们如何来实现动画效果呢？

以自定义View为例，该View很简单，画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。

AlphaAnimation(渐变透明度)

代码：

<textarea cols="50" rows="15" name="code" class="java">//初始化
Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
</textarea>
其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。

/*方法二：*/
public void alpha(View view)
{
Animation anim = new AlphaAnimation(0, 1);
anim.setDuration(500);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
animationView.startAnimation(anim);
}

RotateAnimation(画面旋转)

代码：

<textarea cols="50" rows="15" name="code" class="java">
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);
</textarea>
其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。
另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

/*方法二：*/
public void rotate(View view)
{
int width = animationView.getWidth();
int height = animationView.getHeight();
Animation anim = new RotateAnimation(0,90,width/2,height/2);
anim.setDuration(2000);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
animationView.startAnimation(anim);
}

ScaleAnimation(渐变尺寸缩放)

代码：

<textarea cols="50" rows="15" name="code" class="java">
//初始化
Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
//设置动画时间
scaleAnimation.setDuration(500);
this.startAnimation(scaleAnimation);
</textarea>
ScaleAnimation类中
第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。
另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

/*方法二：*/
public void scale(View view)
{
int width = animationView.getWidth();
int height = animationView.getHeight();
Animation anim = new ScaleAnimation(0.5f, 2, 1, 2,width/2, height/2);
anim.setDuration(2000);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
animationView.startAnimation(anim);
}

TranslateAnimation(位置移动)

代码：

<textarea cols="50" rows="15" name="code" class="java">
//初始化
Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//设置动画时间
translateAnimation.setDuration(1000);
this.startAnimation(translateAnimation);
</textarea>
TranslateAnimation类

第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。
第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。

参数详细说明：

表二

XML节点 功能说明

alpha 渐变透明度动画效果

<alpha
android:fromAlpha=”0.1″
android:toAlpha=”1.0″
android:duration=”3000″
/>
fromAlpha
属性为动画起始时透明度
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字
toAlpha 属性为动画结束时透明度

scale 渐变尺寸伸缩动画效果

<scale
android:interpolator= “@android:anim/accelerate_decelerate_interpolator”
android:fromXScale=”0.0″
android:toXScale=”1.4″
android:fromYScale=”0.0″
android:toYScale=”1.4″
android:pivotX=”50%”
android:pivotY=”50%”
android:fillAfter=”false”
android:startOffset=“700”
android:duration=”700″
android:repeatCount=”10″
/>
fromXScale[float] fromYScale[float] 为动画起始时，X、Y坐标上的伸缩尺寸  0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
toXScale [float]
toYScale[float] 为动画结束时，X、Y坐标上的伸缩尺寸
pivotX[float]
pivotY[float]   为动画相对于物件的X、Y坐标的开始位置 属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置

translate 画面转换位置移动动画效果

<translate
android:fromXDelta=”30″
android:toXDelta=”-80″
android:fromYDelta=”30″
android:toYDelta=”300″
android:duration=”2000″
/>
fromXDelta
toXDelta    为动画、结束起始时 X坐标上的位置
fromYDelta
toYDelta    为动画、结束起始时 Y坐标上的位置

rotate 画面转移旋转动画效果

<rotate                                 android:interpolator=”@android:anim/accelerate_decelerate_interpolator”
android:fromDegrees=”0″
android:toDegrees=”+350″
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”3000″
/>
fromDegrees 为动画起始时物件的角度 说明
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数from——to正数:顺时针旋转)
(负数from——to负数:逆时针旋转)
(正数from——to正数:顺时针旋转)
(正数from——to负数:逆时针旋转)
toDegrees   属性为动画结束时物件旋转的角度 可以大于360度
pivotX
pivotY  为动画相对于物件的X、Y坐标的开始位  说明：以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置

以上都是单独的使用某个动画，那么如何让多个动画同时生效呢？

[b]答案是 AnimationSet。[/b]

初看整个类名，还以为只是用来存放 Animation的一个Set， 细看才发现，该类也是继承自 Animation的。

下面我们实现一个动画，该动画会让图片移动的同时，图片透明度渐变，直接上代码：

<textarea cols="50" rows="15" name="code" class="java">
//初始化 Translate动画
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//初始化 Alpha动画
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//动画集 AnimationSet set = new AnimationSet(true);
set.addAnimation(translateAnimation);
set.addAnimation(alphaAnimation);
//设置动画时间 (作用到每个动画)
set.setDuration(1000);
this.startAnimation(set);
</textarea>

/*方法二：*/
public void set(View view)
{
AnimationSet all = new AnimationSet(false);
AnimationSet set = new AnimationSet(false);

//透明度动画
Animation anim = new AlphaAnimation(0, 1);
anim.setDuration(500);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
set.addAnimation(anim);

//缩放动画
int width = animationView.getWidth();
int height = animationView.getHeight();
anim = new ScaleAnimation(0.5f, 2, 1, 2,width/2, height/2);
anim.setDuration(2000);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
set.addAnimation(anim);

//旋转动画
anim = new RotateAnimation(0,90,width/2,height/2);
anim.setDuration(2000);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
set.addAnimation(anim);

//位移动画
anim = new TranslateAnimation(-100, 0, 0, 0);
anim.setDuration(2000);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
set.addAnimation(anim);

set.setFillAfter(true);

TranslateAnimation trans = new TranslateAnimation(0, 0, 0 , 200);
trans.setRepeatCount(2);
trans.setRepeatMode(Animation.REVERSE);
trans.setFillBefore(true);
all.setRepeatCount(0);
all.addAnimation(trans);
all.addAnimation(set);
animationView.startAnimation(all);

}

是不是觉得很简单呢？

附上整个View类的代码吧。

<textarea cols="50" rows="15" name="code" class="java">
package com.yfz.view; import com.yfz.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;

public class TweenAnim extends View
{
//Alpha动画 - 渐变透明度
private Animation alphaAnimation = null;
//Sacle动画 - 渐变尺寸缩放
private Animation scaleAnimation = null;
//Translate动画 - 位置移动
private Animation translateAnimation = null;
//Rotate动画 - 画面旋转
private Animation rotateAnimation = null;

public TweenAnim(Context context)
{
super(context);
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Log.e("Tween", "onDraw");
//加载一个图片
canvas.drawBitmap(
((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)
).getBitmap(), 0, 0, null);
}
@Override public boolean onKeyDown(int keyCode, KeyEvent event)
{
Log.e("Tween", "onKeyDown");
return true;
}
@Override public boolean onKeyUp(int keyCode, KeyEvent event)
{
Log.e("Tween", "onKeyDown");
switch (keyCode)
{
case KeyEvent.KEYCODE_DPAD_UP:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//设置动画时间
alphaAnimation.setDuration(3000);
this.startAnimation(alphaAnimation);
break;
case KeyEvent.KEYCODE_DPAD_DOWN:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
rotateAnimation = new RotateAnimation(0f, 360f);
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);
break;
case KeyEvent.KEYCODE_DPAD_LEFT:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
//初始化
scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
//设置动画时间
scaleAnimation.setDuration(500);
this.startAnimation(scaleAnimation);
break;
case KeyEvent.KEYCODE_DPAD_RIGHT:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
//初始化
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//设置动画时间
translateAnimation.setDuration(1000);
this.startAnimation(translateAnimation);
break;
case KeyEvent.KEYCODE_DPAD_CENTER:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
//初始化 Translate动画
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//初始化 Alpha动画
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//动画集 AnimationSet set = new AnimationSet(true);
set.addAnimation(translateAnimation);
set.addAnimation(alphaAnimation);
//设置动画时间 (作用到每个动画)
set.setDuration(1000); this.startAnimation(set);
break;
default:
break;
}
return true;
}
}
</textarea>

在Activity中调用该类时，需要注意一定setFocusable(true)， 否则焦点在Activity上的话，onKeyUp方法是不会生效的。

调用该View的代码：

<textarea cols="50" rows="15" name="code" class="java">
TweenAnim anim = new TweenAnim(Lesson_11.this);
anim.setFocusable(true); setContentView(anim);
</textarea>

以下代码非原创，转自“幻影浪子”

通过Java代码，实现了4中不同的Tween动画，在Android中可以完全通过 XML文件来实现动画。这种方式可能更加简洁、清晰，也更利于重用。

下面我们分别对这几种动画改用xml来实现。

首先是AlphaAnimation。

alpha_anim.xml：

<textarea cols="50" rows="15" name="code" class="xhtml">
<?xml version="1.0"
encoding="
utf-8"?>
<set xmlns:android=" http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="2000"
/> </
set>
</textarea>

RotateAnimation

rotate_anim.xml：

<textarea cols="50" rows="15" name="code" class="xhtml"><
?xml version="1.0"
encoding="utf-8"?>
<set xmlns:android=" http://schemas.android.com/apk/res/android"> <rotate android:interpolator="
@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
/> </set>
</textarea>

ScaleAnimation

scale_anim.xml：

<textarea cols="50" rows="15" name="code" class="xhtml"><
?xml version="1.0"
encoding="utf-8"
?> <set xmlns:android=" http://schemas.android.com/apk/res/android"> <scale android:interpolator="
@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="500"
/>   </set>
</textarea>

TranslateAnimation

translate_anim.xml：

<textarea cols="50" rows="15" name="code" class="xhtml"><
?xml version="1.0"
encoding="utf-8"
?> <set xmlns:android=" http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="10"
android:toXDelta="100"
android:fromYDelta="10"
android:toYDelta="100"
/> </set>
</textarea>

布局文件都已经写完，那么如何来使用这些文件呢？

使用AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。

如：

<textarea cols="50" rows="15" name="code" class="java">
rotateAnimation =
AnimationUtils.loadAnimation(
this.getContext(), R.anim.rotate_anim);
</textarea>

这次View类的代码如下：

<textarea cols="50" rows="15" name="code" class="java">
package com.yfz.view;
import com.yfz.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
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;

public class TweenAnim2 extends View
{
//Alpha动画 - 渐变透明度
private Animation alphaAnimation = null;
//Sacle动画 - 渐变尺寸缩放
private Animation scaleAnimation = null;
//Translate动画 - 位置移动
private Animation translateAnimation = null;
//Rotate动画 - 画面旋转
private Animation rotateAnimation = null;
public TweenAnim2(Context context)
{
super(context);
}
@Override protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Log.e("Tween", "onDraw");
//加载一个图片
canvas.drawBitmap(
((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)
).getBitmap(), 0, 0, null);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
Log.e("Tween", "onKeyDown");
return true;
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event)
{
Log.e("Tween", "onKeyDown");
switch (keyCode)
{
case KeyEvent.KEYCODE_DPAD_UP:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
this.startAnimation(alphaAnimation);
break;
case KeyEvent.KEYCODE_DPAD_DOWN:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
this.startAnimation(rotateAnimation);
break;
case KeyEvent.KEYCODE_DPAD_LEFT:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);
this.startAnimation(scaleAnimation);
break;
case KeyEvent.KEYCODE_DPAD_RIGHT:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
this.startAnimation(translateAnimation);
break;
case KeyEvent.KEYCODE_DPAD_CENTER:

Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
//初始化 Translate动画
translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
//初始化 Alpha动画
alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
//动画集
AnimationSet set = new AnimationSet(true); set.addAnimation(translateAnimation);
set.addAnimation(alphaAnimation);
//设置动画时间 (作用到每个动画)
set.setDuration(1000);
this.startAnimation(set);
break;
default: break;
}
return true;
}
}
</textarea>