[Android] Android Tweened Animations动画使用详解一

Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。

第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。

下面就讲一下Tweene Animations。

主要类：

Animation           动画

AlphaAnimation      渐变透明度

RotateAnimation     画面旋转

ScaleAnimation          渐变尺寸缩放

TranslateAnimation      位置移动

AnimationSet            动画集

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

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

AlphaAnimation

通过代码实现 AlphaAnimation，如下：

1 2 3 4

//初始化Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);//设置动画时间            alphaAnimation.setDuration(3000);                 this.startAnimation(alphaAnimation);

其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。

setDuration用来设置动画持续时间。

RotateAnimation

代码：

1 2 3

Animation rotateAnimation = new RotateAnimation(0f, 360f);                 rotateAnimation.setDuration(1000);                 this.startAnimation(rotateAnimation);

其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

ScaleAnimation

代码：

1 2 3 4 5

//初始化Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);//设置动画时间scaleAnimation.setDuration(500);                 this.startAnimation(scaleAnimation);

ScaleAnimation类中

第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。

第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

TranslateAnimation

代码：

1 2 3 4

//初始化Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);//设置动画时间                translateAnimation.setDuration(1000);                             this.startAnimation(translateAnimation);

TranslateAnimation类

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

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

参数详细说明：

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

答案是 AnimationSet。

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

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

1  2  3  4  5  6  7  8  9 10 11 12 13

//初始化 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);

是不是觉得很简单呢？

附上整个View类的代码吧。

1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100

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;     }}

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

调用该View的代码：

1 2 3

TweenAnim anim = new TweenAnim(Lesson_11.this);                 anim.setFocusable(true);                 setContentView(anim);

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

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

首先是**AlphaAnimation**。

alpha_anim.xml：

1 2 3 4 5 6 7 8

<?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>

不用解释了吧。

RotateAnimation

rotate_anim.xml：

1  2  3  4  5  6  7  8  9 10 11

<?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>

ScaleAnimation

scale_anim.xml：

1  2  3  4  5  6  7  8  9 10 11 12 13 14

<?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>

TranslateAnimation

translate_anim.xml：

1 2 3 4 5 6 7 8 9

<?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>

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

其实也很简单，此时需要用到AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。

如：

1	rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);

这次View类的代码如下：

1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100

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;     }}