玩转Android---2D图形及动画---Tween动画

原址：http://hualang.iteye.com/category/143855

Android平台提供了两类动画，分别是Tween动画，和Frame动画。Tween通过场景里的对象不断的进行图片的变换，比如平移、渐变、缩放、旋转等来产生动画效果；Frame动画叫做顺序播放实现做好的图像和电影类似。另外加上gif动画，因为如果直接使用Bitmap或其他方法直接调用gif图片资源的话，显示的是静态的，如果要做成动态的，就需要一些其他的方法来实现。

 

首先来谈谈Tween动画，它有四种

 

①Alpha：渐变透明度动画

②Scale：渐变尺寸伸缩动画

③Translate：画面转换位置移动动画

④Rotate：画面转移旋转动画

 

这些动画的执行步骤差不多：先定义Animation动画对象，然后设置动画的一些属性，最后通过startAnimation()方法开始动画。

 

setDuration(long durationMillis);

功能：设置动画显示的时间

参数：durationMillis为动画显示时间的长短，以毫秒为单位

 

startAnimation(Animation animation)

功能：animation为要播放的动画

参数：animation为要播放的动画

 

第一种：AlphaAnimation(float fromAlpha, float toAlpha)

功能：创建一个透明度渐变的动画

参数说明：fromAlpha是动画起始时透明度；toAlpha是动画结束时透明度

注：0.0表示完全透明，1.0表示完全不透明

 

实现它有两种方式。

1、直接在程序中创建动画

 

Java代码  

1. //创建Alpha动画  
2. Animation    alpha = new AlphaAnimation(0.1f, 1.0f);  
3. //设置动画时间为5秒  
4. alpha.setDuration(5000);  
5. //开始播放  
6. img.startAnimation(alpha);  

 

 

2、通过XML来创建动画

alpha_anim.xml。在res/anim目录下

 

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="5000">  
7.     </alpha>  
8. </set>  

 

 程序中直接调用

 

Java代码  

1. Animation scale = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.scale_anim);  
2. //开始动画  
3. img.startAnimation(scale);  

 

效果：

 

 

第二种：ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, floatXValue,

int pivotYType, float pivotYValue)

功能：创建一个渐变尺寸伸缩动画

参数：fromX，toX分别是起始和结束时x坐标上的伸缩尺寸。fromY,toY分别是起始和结束时ye坐标上的伸缩尺寸。

pivotXValue，pivotYValue分别为伸缩动画相对于x,y坐标开始的位置，pivotXType，pivotYType分别为x,y的

伸缩模式。

 

它有两种实现方式。

1、直接在程序中实现的方式

 

Java代码  

1. Animation scale = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);  
2. //设置动画持续时间  
3. scale.setDuration(5000);  
4. //开始动画  
5. img.startAnimation(scale);  

 

 2、在XML中是创建动画

scale_anim.xml，在res/anim目录下

 

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="5000"  
13. />  
14. </set>  

 Animation scale = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.scale_anim);

Java代码  

1. //开始动画  
2. img.startAnimation(scale);  

 

 

效果

第3种:TranslateAnimation(float fromXDelta, float toXDelta, float YDelta, float toYDelta)

功能：创建一个移动画面位置的动画

参数：fromXDelta,fromYDelta分别是其实坐标；toXDelta,toYDelta分别是结束坐标

 

它有两种是实现方式

1、直接在程序中实现

Java代码  

1. Animation translate = new TranslateAnimation(10, 100, 10, 100);  
2. //设置动画持续时间  
3. translate.setDuration(3000);  
4. //开始动画  
5. img.startAnimation(translate);  

 

2、在XML中创建动画

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="5000"  
9. />  
10. </set>  

 在程序中可以定义其实现，比如在Button中的按钮事件

Java代码  

1. Animation translate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.translate_anim);  
2. //开始动画  
3. img.startAnimation(translate);  

 

第4种：Rotate(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType,

float pivotYValue)

功能：创建一个旋转画面的动画

参数：fromDegrees为开始的角度；toDegrees为结束的角度。pivotXValue、pivotYType分别为x,y的伸缩模式。

pivotXValue，pivotYValue分别为伸缩动画相对于x,y的坐标开始位置

 

它有两种实现方式。

1、直接在程序中创建动画

Java代码  

1. Animation rotate =  new RotateAnimation(0f,+360f,  
2. Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);  
3. rotate.setDuration(3000);  
4. img.startAnimation(rotate);  

 

2、在XML中创建动画

rotate_anim.xml

在res/anim目录下

Java代码  

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

  Animation rotate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.rotate_anim);

Java代码  

1. img.startAnimation(rotate);  

 

 

下面是程序的全部代码。XML定义的动画部分在上面

 

在程序中直接实现

Java代码  

1. package com.loulijun.tween;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.animation.AlphaAnimation;  
7. import android.view.animation.Animation;  
8. import android.view.animation.RotateAnimation;  
9. import android.view.animation.ScaleAnimation;  
10. import android.view.animation.TranslateAnimation;  
11. import android.widget.Button;  
12. import android.widget.ImageView;  
13.   
14. public class TweenActivity extends Activity {  
15.     Button btn1,btn2,btn3,btn4;  
16.     ImageView img;  
17.     //定义Alpha动画  
18.     private Animation alpha = null;  
19.     //定义Scale动画  
20.     private Animation scale = null;  
21.     //定义Translate动画  
22.     private Animation translate = null;  
23.     //定义Rotate动画  
24.     private Animation rotate = null;  
25.     @Override  
26.     public void onCreate(Bundle savedInstanceState) {  
27.         super.onCreate(savedInstanceState);  
28.         setContentView(R.layout.main);  
29.           
30.         //装载图片资源  
31.         img = (ImageView)findViewById(R.id.imgview);  
32.           
33.         btn1 = (Button)findViewById(R.id.btn1);  
34.         btn2 = (Button)findViewById(R.id.btn2);  
35.         btn3 = (Button)findViewById(R.id.btn3);  
36.         btn4 = (Button)findViewById(R.id.btn4);  
37.         //定义Alpha动画  
38.         btn1.setOnClickListener(new Button.OnClickListener()  
39.         {  
40.   
41.             @Override  
42.             public void onClick(View v) {  
43.                 //创建Alpha动画  
44.                 alpha = new AlphaAnimation(0.1f, 1.0f);  
45.                 //设置动画时间为5秒  
46.                 alpha.setDuration(5000);  
47.                 //开始播放  
48.                 img.startAnimation(alpha);  
49.             }  
50.               
51.         });  
52.         //定义Scale动画  
53.         btn2.setOnClickListener(new Button.OnClickListener()  
54.         {  
55.   
56.             @Override  
57.             public void onClick(View v) {  
58.                 scale = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f,   
59.                         Animation.RELATIVE_TO_SELF, 0.5f);  
60.                 //设置动画持续时间  
61.                 scale.setDuration(5000);  
62.                 //开始动画  
63.                 img.startAnimation(scale);  
64.             }  
65.               
66.         });  
67.         //定义Translate动画  
68.         btn3.setOnClickListener(new Button.OnClickListener()  
69.         {  
70.   
71.             @Override  
72.             public void onClick(View v) {  
73.                 translate = new TranslateAnimation(10, 100, 10, 100);  
74.                 //设置动画持续时间  
75.                 translate.setDuration(3000);  
76.                 //开始动画  
77.                 img.startAnimation(translate);  
78.             }  
79.               
80.         });  
81.         //定义Rotate动画  
82.         btn4.setOnClickListener(new Button.OnClickListener()  
83.         {  
84.   
85.             @Override  
86.             public void onClick(View v) {  
87.                 rotate =  new RotateAnimation(0f, +360f,  
88.                         Animation.RELATIVE_TO_SELF, 0.5f,  
89.                         Animation.RELATIVE_TO_SELF, 0.5f);  
90.                 rotate.setDuration(3000);  
91.                 img.startAnimation(rotate);  
92.             }  
93.               
94.         });  
95.     }  
96. }  

 

在XML中定义动画

Java代码  

1. package com.loulijun.tween2;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.animation.Animation;  
7. import android.view.animation.AnimationUtils;  
8. import android.view.animation.RotateAnimation;  
9. import android.view.animation.ScaleAnimation;  
10. import android.view.animation.TranslateAnimation;  
11. import android.widget.Button;  
12. import android.widget.ImageView;  
13.   
14. public class TweenActivity extends Activity {  
15.     Button btn1,btn2,btn3,btn4;  
16.     ImageView img;  
17.     //定义Alpha动画  
18.     private Animation alpha = null;  
19.     //定义Scale动画  
20.     private Animation scale = null;  
21.     //定义Translate动画  
22.     private Animation translate = null;  
23.     //定义Rotate动画  
24.     private Animation rotate = null;  
25.     @Override  
26.     public void onCreate(Bundle savedInstanceState) {  
27.         super.onCreate(savedInstanceState);  
28.         setContentView(R.layout.main);  
29.           
30.         //装载图片资源  
31.         img = (ImageView)findViewById(R.id.imgview);  
32.           
33.         btn1 = (Button)findViewById(R.id.btn1);  
34.         btn2 = (Button)findViewById(R.id.btn2);  
35.         btn3 = (Button)findViewById(R.id.btn3);  
36.         btn4 = (Button)findViewById(R.id.btn4);  
37.         //定义Alpha动画  
38.         btn1.setOnClickListener(new Button.OnClickListener()  
39.         {  
40.   
41.             @Override  
42.             public void onClick(View v) {  
43.                 //创建Alpha动画  
44.                 alpha = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.alpha_anim);  
45.                 //开始播放  
46.                 img.startAnimation(alpha);  
47.             }  
48.               
49.         });  
50.         //定义Scale动画  
51.         btn2.setOnClickListener(new Button.OnClickListener()  
52.         {  
53.   
54.             @Override  
55.             public void onClick(View v) {  
56.                 scale = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.scale_anim);  
57.                 //开始动画  
58.                 img.startAnimation(scale);  
59.             }  
60.               
61.         });  
62.         //定义Translate动画  
63.         btn3.setOnClickListener(new Button.OnClickListener()  
64.         {  
65.   
66.             @Override  
67.             public void onClick(View v) {  
68.                 translate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.translate_anim);  
69.                 //开始动画  
70.                 img.startAnimation(translate);  
71.             }  
72.               
73.         });  
74.         //定义Rotate动画  
75.         btn4.setOnClickListener(new Button.OnClickListener()  
76.         {  
77.   
78.             @Override  
79.             public void onClick(View v) {  
80.                 rotate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.rotate_anim);  
81.                 img.startAnimation(rotate);  
82.             }  
83.               
84.         });  
85.     }  
86. }