zoukankan html css js c++ java

Android学习笔记14：Tween Animation动画的实现

　　在Android中，有两种动画模式：Tween Animation（渐变动画）和Frame Animation（帧动画）。渐变动画是通过对场景里的对象不断做图像变换（平移、缩放、旋转等）来产生动画效果。帧动画则是通过顺序播放事先准备好的图像来产生动画效果，和电影类似。

1.通过Java代码实现Tween Animation

　　Tween Animation动画效果是通过Animation类来实现的。Animation类有五个直接子类，分别为AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation和AnimationSet。其中，AlphaAnimation用来实现透明度渐变动画效果；ScaleAnimation用来实现尺寸伸缩渐变动画效果；TranslateAnimation用来实现画面转换位置移动动画效果；RotateAnimation用来实现画面转移旋转动画效果；AnimationSet则用于对多个动画进行组合。

1.1AlphaAnimation类的常用方法

　　AlphaAnimation类的常用方法如下：

　　AlphaAnimation(float fromAlpha, float toAlpha);

　　其中，参数fromAlpha表示动画起始时透明度；参数toAlpha表示动画结束时透明度（0.0表示完全透明，1.0表示完全不透明）

　　willChangeBounds();//动画是否影响指定的视图范围

　　willChangeTransformationMatrix();//动画是否影响转换矩阵

1.2ScaleAnimation类的常用方法

　　ScaleAnimation类的常用方法如下：

　　ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);

　　其中，参数fromX、toX分别表示起始和结束时x坐标上的伸缩尺寸；参数fromY、toY分别表示起始和结束时y坐标上的伸缩尺寸；参数pivotXType、pivotYType分别表示x、y的伸缩模式；参数pivotXValue、pivotYValue分别表示伸缩动画相对于x、y的坐标的开始位置。

1.3TranslateAnimation类的常用方法

　　TranslateAnimation类的常用方法如下：

　　TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta);

　　其中，参数fromXDelta、fromYDelta分别表示起始时x、y坐标；参数toXDelta、toYDelta分别表示结束时x、y坐标。

1.4RotateAnimation类的常用方法

　　RotateAnimation类的常用方法如下：

　　RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);

　　其中，参数fromDegrees表示开始时的角度；参数toDegrees表示结束时的角度；参数pivotXType、pivotYType分别表示x、y的伸缩模式；参数pivotXValue、pivotYValue分别表示伸缩动画相对于x、y的坐标的开始位置。

1.5AnimationSet类的常用方法

　　AnimationSet类的常用方法如下：

　　AddAnimation(Animation a);//添加一个动画到动画组件中

　　computeDurationHint();//动画组件的最大持续时间

　　getAnimation();//获取动画

　　getDuration();//获取动画组件的持续时间

　　getStartTime();//获取动画开始的时间

　　setDuration(long durationMillis);//设置动画持续时间

　　setFillAfter(boolean fillAfter);//设置动画转换在动画结束后被应用

　　setFillBefore(boolean fillBefore);//设置动画转换在动画开始前被应用

　　setStartOffset(long startOffset);//设置动画之间的时间间隔

　　etRepeatMode(int repeatMode);//设置动画的重复模式

2.通过xml布局文件实现Tween Animation

　　使用xml布局文件可以更简单的实现Tween Animation动画效果。

　　Animation的xml布局文件存放在工程的res/anim目录下。

　　在xml布局文件中必须包含根元素<set>。节点<alpha>、<scale>、<translate>和<rotate>分别对应AlphaAnimation、ScaleAnimation、TranslateAnimation和RotateAnimation四种动画效果。

2.1Tween Animation的共同节点属性

　　Tween Animation的共同节点属性有以下一些：

　　android:duration[long]//动画的持续时间，单位为ms

　　android:fillAfter[boolean]//设置为true时，动画转换在动画结束后被应用

　　android:fillBefore[boolean]//设置为true时，动画转换在动画开始前被应用

　　android:interpolator//设置动画的插入器，可选值有accelerate_decelerate_interpolator加速减速动画插入器，accelerate_interpolator加速动画插入器，decelerate_interpolator减速动画插入器

　　android:repeatCount[int]//动画的重复次数

　　android:repeatMode[int]//动画的重复模式，1表示重头开始重新播放，2表示从后往前重新播放

　　android:startOffset[long]//设置动画之间的时间间隔

　　android:zAdjustment[int]//

2.2节点<alpha>的常用属性

　　节点<alpha>的常用属性如下：

　　android:fromAlpha[float]表示起始时透明度

　　android:toAlpha[float]表示结束时透明度

　　取值说明：0.0表示完全透明，1.0表示完全不透明

2.3节点<scale>的常用属性

　　节点<scale>的常用属性如下：

　　android:fromXScale[float]表示动画起始时x坐标上的伸缩尺寸

　　android:toXScale[float]表示动画结束时x坐标上的伸缩尺寸

　　android:fromYScale[float]表示动画起始时y坐标上的伸缩尺寸

　　android:toYScale[float]表示动画结束时y坐标上的伸缩尺寸

　　取值说明：0.0表示收缩到没有，1.0表示正常无收缩，值大于1.0表示放大，值小于1.0表示收缩

　　android:pivotX[float]表示动画相对于物件的x坐标的开始位置

　　android:pivotY[float]表示动画相对于物件的y坐标的开始位置

2.4节点<translate>的常用属性

　　节点<translate>的常用属性如下：

　　android:fromXDelta[int]表示动画起始时x坐标上的位置

　　android:toXDelta[int]表示动画结束时x坐标上的位置

　　android:fromYDelta[int]表示动画起始时y坐标上的位置

　　android:toYDelta[int]表示动画结束时y坐标上的位置

2.5节点<translate>的常用属性

　　节点<rotate>的常用属性如下：

　　android:fromDegrees表示动画起始时物件的角度

　　android:toDegrees表示动画结束时物件的角度

　　取值说明：负数from—正数to表示顺时针旋转，负数from—负数to表示逆时针旋转，正数from—正数to表示顺时针旋转，正数from—负数to表示逆时针旋转

　　android:pivotX表示动画相对于物件的x坐标的开始位置

　　android:pivotY表示动画相对于物件的y坐标的开始位置

3.实例

　　在本实例中，分别使用Java代码和xml布局文件实现了Tween Animation动画效果。通过使用上下左右键可以分别实现AlphaAnimation、ScaleAnimation、TranslateAnimation和RotateAnimation四种动画效果。

　　TweenAnimation.java源代码如下：

TweenAnimation.java源代码

 1 package com.example.android_tweenanimation;
 2 
 3 import android.content.Context;
 4 import android.graphics.Bitmap;
 5 import android.graphics.Canvas;
 6 import android.graphics.drawable.BitmapDrawable;
 7 import android.view.KeyEvent;
 8 import android.view.View;
 9 import android.view.animation.AlphaAnimation;
10 import android.view.animation.Animation;
11 import android.view.animation.AnimationUtils;
12 import android.view.animation.RotateAnimation;
13 import android.view.animation.ScaleAnimation;
14 import android.view.animation.TranslateAnimation;
15 
16 public class TweenAnimation extends View {
17 
18     private Animation mAnimationAlpha = null;                        //Alpha动画
19     private Animation mAnimationScale = null;                         //Scale动画
20     private Animation mAnimationTranslate = null;                //Translate动画
21     private Animation mAnimationRotate = null;                      //Rotate动画
22     
23     Context mContext = null;
24     Bitmap mBitmap_fuwa = null;                      //Bitmap对象
25     
26     public TweenAnimation(Context context) {
27         super(context);
28         mContext = context;
29         mBitmap_fuwa = ((BitmapDrawable) getResources().getDrawable
30                 (R.drawable.fuwa)).getBitmap();                  //加载Bitmap对象
31     }
32 
33     public void onDraw(Canvas canvas) {
34         super.onDraw(canvas);
35         canvas.drawBitmap(mBitmap_fuwa, 0, 0, null);
36     }
37     
38     //按键按下事件
39     public boolean onKeyDown(int keyCode, KeyEvent event) {
40         switch(keyCode) {
41         case KeyEvent.KEYCODE_DPAD_UP:                              //上键：Alpha动画效果
42             mAnimationAlpha = new AlphaAnimation(0.1f, 1.0f);
43             mAnimationAlpha.setDuration(3000);
44 //            mAnimationAlpha = AnimationUtils.loadAnimation(mContext, R.anim.alpha_animation);
45             this.startAnimation(mAnimationAlpha);
46             break;
47         case KeyEvent.KEYCODE_DPAD_DOWN:                      //下键：Scale动画效果
48             mAnimationScale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
49                     Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
50             mAnimationScale.setDuration(3000);
51 //            mAnimationScale = AnimationUtils.loadAnimation(mContext, R.anim.scale_animation);
52             this.startAnimation(mAnimationScale);
53             break;
54         case KeyEvent.KEYCODE_DPAD_LEFT:                         //左键：Translate动画效果
55             mAnimationTranslate = new TranslateAnimation(10, 100, 10, 100);
56             mAnimationTranslate.setDuration(3000);
57 //            mAnimationTranslate = AnimationUtils.loadAnimation(mContext, R.anim.translate_animation);
58             this.startAnimation(mAnimationTranslate);
59             break;
60         case KeyEvent.KEYCODE_DPAD_RIGHT:                       //右键：Rotate动画效果
61             mAnimationRotate = new RotateAnimation(0.0f, 360.0f, 
62                     Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
63             mAnimationRotate.setDuration(3000);
64 //            mAnimationRotate = AnimationUtils.loadAnimation(mContext, R.anim.rotate_animation);
65             this.startAnimation(mAnimationRotate);
66             break;
67         }
68         return true;
69     }
70     
71     //按键弹起事件
72     public boolean onKeyUp(int keyCode, KeyEvent event) {
73         return false;
74     }
75 }

　　alpha_animation.xml源代码如下：

alpha_animation.xml源代码

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3     <alpha
4         android:fromAlpha="0.1"
5         android:toAlpha="1.0"
6         android:duration="3000"
7     /> 
8 </set>

　　scale_animation.xml源代码如下：

scale_animation.xml源代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3    <scale
 4           android:interpolator="@android:anim/accelerate_decelerate_interpolator"          
 5           android:fromXScale="0.0"
 6           android:toXScale="1.0"         
 7           android:fromYScale="0.0"
 8           android:toYScale="1.0"       
 9           android:pivotX="50%"
10           android:pivotY="50%"          
11           android:fillAfter="false"
12           android:duration="500" 
13     />
14 </set>

　　translate_animation.xml源代码如下：

translate_animation.xml源代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3     <translate
 4         android:fromXDelta="10"
 5         android:toXDelta="100"
 6         android:fromYDelta="10"
 7         android:toYDelta="100"
 8         android:duration="3000"
 9     />
10 </set>

　　rotate_animation.xml源代码如下：

rotate_animation.xml源代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3         
 4     <rotate 
 5         android:interpolator="@android:anim/accelerate_decelerate_interpolator"     
 6         android:fromDegrees="0" 
 7         android:toDegrees="+360"      
 8         android:pivotX="50%" 
 9         android:pivotY="50%"     
10         android:duration="3000"
11     />
12 </set>

4.实例（补充）

　　在本实例中，首先在MainActivity.java中定义了四个Animation对象：mAnimation_alpha、mAnimation_scale、mAnimation_translate和mAnimation_rotate，分别表示透明度渐变动画对象、尺寸伸缩渐变动画对象、位置移动动画对象和画面旋转动画对象。并定义了四个Button对象，当点击这四个按钮时，可以分别运行上述四种不同的动画效果。该实例运行界面如图1所示。

图1 效果图

　　MainActivity.java源代码如下：

MainActivity.java源代码

 1 package com.example.android_tweenanimation;
 2 
 3 import android.os.Bundle;
 4 import android.view.View;
 5 import android.view.animation.Animation;
 6 import android.view.animation.AnimationUtils;
 7 import android.widget.Button;
 8 import android.widget.ImageView;
 9 import android.app.Activity;
10 
11 public class MainActivity extends Activity {
12 
13     Animation mAnimation_alpha;          //透明度渐变动画对象
14     Animation mAnimation_scale;           //尺寸伸缩渐变动画对象
15     Animation mAnimation_translate;  //位置移动动画对象
16     Animation mAnimation_rotate;        //画面旋转动画对象
17     
18     ImageView mImageView;                    //图像视图对象
19     
20     Button mButton_alpha;                         //透明度渐变按钮
21     Button mButton_scale;                          //尺寸伸缩渐变按钮
22     Button mButton_translate;                 //位置移动按钮
23     Button mButton_rotate;                       //画面旋转按钮
24     
25     @Override
26     public void onCreate(Bundle savedInstanceState) {
27         super.onCreate(savedInstanceState);
28         setContentView(R.layout.activity_main);    
29         
30         //加载动画效果
31         mAnimation_alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_animation);
32         mAnimation_scale = AnimationUtils.loadAnimation(this, R.anim.scale_animation);
33         mAnimation_translate = AnimationUtils.loadAnimation(this, R.anim.translate_animation);
34         mAnimation_rotate = AnimationUtils.loadAnimation(this, R.anim.rotate_animation);
35         
36         //加载布局
37         mImageView =(ImageView)this.findViewById(R.id.imageview);   
38         mButton_alpha = (Button)this.findViewById(R.id.button_alpha);
39         mButton_scale = (Button)this.findViewById(R.id.button_scale);    
40         mButton_translate = (Button)this.findViewById(R.id.button_translate);
41         mButton_rotate = (Button)this.findViewById(R.id.button_rotate);   
42        
43         //透明度渐变按钮事件监听
44         mButton_alpha.setOnClickListener(new Button.OnClickListener() {
45             public void onClick(View v) {
46                 mImageView.startAnimation(mAnimation_alpha);
47             }            
48         });
49         
50         //尺寸伸缩渐变按钮事件监听
51         mButton_scale.setOnClickListener(new Button.OnClickListener() {
52             public void onClick(View v) {
53                 mImageView.startAnimation(mAnimation_scale);
54             }            
55         });
56         
57         //位置移动按钮事件监听
58         mButton_translate.setOnClickListener(new Button.OnClickListener() {
59             public void onClick(View v) {
60                 mImageView.startAnimation(mAnimation_translate);
61             }            
62         });
63         
64         //画面旋转按钮事件监听
65         mButton_rotate.setOnClickListener(new Button.OnClickListener() {
66             public void onClick(View v) {
67                 mImageView.startAnimation(mAnimation_rotate);
68             }            
69         });
70     }
71 }

　　对应的activity_main.xml源代码如下：

activity_main.xml源代码

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent" >
 6     
 7     <ImageView
 8         android:id="@+id/imageview"
 9         android:layout_marginLeft="25dp"
10         android:layout_marginTop="50dp"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:src="@drawable/fuwa"
14         android:contentDescription="fuwa"    />
15     
16     <LinearLayout 
17         android:orientation="horizontal"
18         android:layout_marginTop="50dp"
19         android:layout_width="match_parent"
20         android:layout_height="wrap_content"    >
21         
22         <Button 
23             android:id="@+id/button_alpha"
24             android:layout_weight="1"
25             android:layout_width="0dp"
26             android:layout_height="wrap_content"
27             android:text="透明度渐变"    />
28         
29         <Button 
30             android:id="@+id/button_scale"
31             android:layout_weight="1"
32             android:layout_width="0dp"
33             android:layout_height="wrap_content"
34             android:text="尺寸伸缩渐变"    />
35         
36     </LinearLayout>
37     
38     <LinearLayout 
39         android:orientation="horizontal"
40         android:layout_width="match_parent"
41         android:layout_height="wrap_content"    >
42         
43         <Button 
44             android:id="@+id/button_translate"
45             android:layout_weight="1"
46             android:layout_width="0dp"
47             android:layout_height="wrap_content"
48             android:text="画面位置移动"    />
49         
50         <Button 
51             android:id="@+id/button_rotate"
52             android:layout_weight="1"
53             android:layout_width="0dp"
54             android:layout_height="wrap_content"
55             android:text="画面旋转"    />
56         
57     </LinearLayout>
58     
59 </LinearLayout>