Android Animation 高手必读 之一 Tweened Animations 代码实现

Android提供了两种动画的机制，可以通过SurfaceView来一帧一帧的绘制，同样也可以通过Animation机制。

Animations分类

Animations分为两种机制：Tweened Animations和Frame-by-FrameAnimations。

Tweened类似于flash，通过旋转、移动、缩放等实现动画效果，而Frame-by-FrameAnimations是类似于电影，通过改变每一帧的显示来实现动画效果。

其实Animation就是先写好对象要发生的动作，比如说平移，变形等。然后你需要哪个View或者View的子类，来完成这些预定义好的动作，只要给他们添加，就可以了。这部分的内容还是蛮多的，但是相对简单，本节只介绍Tweened Animations。

Tweened Animations

如图1所示，Tweened Animations有如下四种方式实现动画，对于每一种方式，Android都提供了一个类来实现。[url=]AlphaAnimation[/url], [url=]AnimationSet[/url], [url=]RotateAnimation[/url], [url=]ScaleAnimation[/url], [url=]TranslateAnimation[/url] 。

2011-9-30 12:35:17 上传

下载附件 (6.66 KB)

图1 Tweened Animations四种方式实现动画

对于每一种，笔者都会给出例子来详细解释。出于由简到难的考虑，首先介绍Alpha。

Alpha

alpha这个词详细如果有过opengl 开发经验的朋友一定不会陌生，没错，他就是设置透明度的。让我们先看一组图标，这样你就会加深对alpha的认识。如图2所示，实现了透明度变化的图标和按钮的效果。

2011-9-30 12:35:13 上传

下载附件 (17.33 KB)

图2 颜色渐变demo

如果要实现view的透明度变化，就要去实现alpha 的Animation。具体方法分为如下4部分：

q 实例化AnimationSet对象

q 实例化Animation对象

q 设置Animation对象属性

q 为View添加AnimationSet

这里要强调的就是Animation的构造方法如下：

AlphaAnimation aa = new AlphaAnimation(1, 0);//2.创建需要的animation

相对来说，alpha的构造方法最为简单。其第一个参数是出示时的透明度，0为完全透明，1为不透明。第二个参数为动画结束时的透明度。

aa.setDuration(2000);//设置动画的时间

通过上面这句可以设置动画播放的时间。

具体代码我会在最后给出。

Scale

scale为缩放，在了解Scale之前我们先看看其运行效果。如图3所示。

2011-9-30 12:35:14 上传

下载附件 (30.44 KB)

图3 scale demo

以上是Scale最简单的构造方法：

ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.创建需要的animation,这种构造方法是以自身为pivot

q 第1个参数为初始时x的大小，其中1为自身长度，同一2为自身长度的2倍，下同

q 第2个参数为结束动画时x的大小

q 第3个参数为初始时y的大小

q 第4个参数为结束动画时y的大小

如果你以为你已经学会了Scale，那我只能说你是浅尝辄止。下面介绍其另一个构造方法，该方法更加灵活。

ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);

q 其四个参数同上，不解释

q 第五个参数是设置枢轴，可以是以自身，亦可以使用父view的，甚至可以谁用绝对数值。这里之后会解释。如果不明白可先忽略。

q 第六个参数是设置x枢轴的坐标。

q 接下来的两个参数同上，是设置y坐标的。

也许这里读者肯定不会明白枢轴的意思，那么我就用上面的方法来构造Animation并运行看看效果。请看图4.

2011-9-30 12:35:15 上传

下载附件 (47.83 KB)

图4 scale Demo2

如图所示，View控件在自身大小变化的同时，位置也在改变。后面的几个参数是设置其初始位置。如果以父view为参考，值为0.5f的话，那么就是当前父View的中间。

读者可能会问到，怎么不是屏幕的中心位置，我认为他是根据布局文件来决定位置的，当前的布局文件为LinearLayout，其设置为向下一次添加内容，如果设置y坐标为0.5f，则Android会认为你是要在当前布局接下来添加内容的位置的y轴中间。

Transfer

如果明白了枢轴的概念，那么Transfer平移就很简单了，如图5所示，为平移的例子。

2011-9-30 12:35:16 上传

下载附件 (32.76 KB)

图5 平移 demo

以上平移的实例化方法如下：

TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1);

读者结合api，相信理解这个方法应该还是比较容易的，这里就不在赘述，如果有问题，可以给留言。

Rotate

旋转，这个也是比较容易，看演示，如图6所示。

2011-9-30 12:35:16 上传

下载附件 (35.43 KB)

图6 旋转demo

其构造方法如下：

RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f);

综合

Animation不但可以单独使用，还可以设置多个Animation然后添加到AnimationSet中。在对View调用，在例子中我给出了一个综合的例子，读者自行查看，检测自己是否已经明白这块知识。

代码

本节参考AnimationDemo1例子。

限于本人水平有限，如有不足之处，请多多指正。

Java代码

1. <?xml version="1.0" encoding="utf-8"?>
   
2. 
   
3. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   
4. android:layout_width="fill_parent"
   
5. android:layout_height="wrap_content"
   
6. >
   
7. <LinearLayout
   
8. android:orientation="vertical"
   
9. android:layout_width="fill_parent"
   
10. android:layout_height="fill_parent"
    
11. >
    
12. <Button
    
13. android:text="alpha"
    
14. android:id="@+id/Button01"
    
15. android:layout_width="wrap_content"
    
16. android:layout_height="wrap_content">
    
17. 
    
18. </Button>
    
19. <ImageView
    
20. android:id="@+id/iv1"
    
21. android:layout_width="wrap_content"
    
22. android:layout_height="wrap_content"
    
23. android:src = "@drawable/icon"
    
24. >
    
25. </ImageView>
    
26. 
    
27. <Button
    
28. android:text="scale"
    
29. android:id="@+id/Button02"
    
30. android:layout_width="wrap_content"
    
31. android:layout_height="wrap_content">
    
32. 
    
33. </Button>
    
34. <ImageView
    
35. android:id="@+id/iv2"
    
36. android:layout_width="wrap_content"
    
37. android:layout_height="wrap_content"
    
38. android:src = "@drawable/icon"
    
39. >
    
40. </ImageView>
    
41. 
    
42. <Button
    
43. android:text="rotate"
    
44. android:id="@+id/Button03"
    
45. android:layout_width="wrap_content"
    
46. android:layout_height="wrap_content">
    
47. 
    
48. </Button>
    
49. <ImageView
    
50. android:id="@+id/iv3"
    
51. android:layout_width="wrap_content"
    
52. android:layout_height="wrap_content"
    
53. android:src = "@drawable/icon"
    
54. >
    
55. </ImageView>
    
56. 
    
57. <Button
    
58. android:text="transf"
    
59. android:id="@+id/Button04"
    
60. android:layout_width="wrap_content"
    
61. android:layout_height="wrap_content">
    
62. 
    
63. </Button>
    
64. <ImageView
    
65. android:id="@+id/iv4"
    
66. android:layout_width="wrap_content"
    
67. android:layout_height="wrap_content"
    
68. android:src = "@drawable/icon"
    
69. >
    
70. </ImageView>
    
71. 
    
72. <Button
    
73. android:text="complex"
    
74. android:id="@+id/Button05"
    
75. android:layout_width="wrap_content"
    
76. android:layout_height="wrap_content">
    
77. 
    
78. </Button>
    
79. <ImageView
    
80. android:id="@+id/iv5"
    
81. android:layout_width="wrap_content"
    
82. android:layout_height="wrap_content"
    
83. android:src = "@drawable/icon"
    
84. >
    
85. </ImageView>
    
86. </LinearLayout>
    
87. </ScrollView>

复制代码

Java代码

1. package cn.edu.heut.zcl;
   
2. 
   
3. import android.app.Activity;
   
4. import android.os.Bundle;
   
5. import android.view.View;
   
6. import android.view.View.OnClickListener;
   
7. import android.view.animation.AlphaAnimation;
   
8. import android.view.animation.Animation;
   
9. import android.view.animation.AnimationSet;
   
10. import android.view.animation.RotateAnimation;
    
11. import android.view.animation.ScaleAnimation;
    
12. import android.view.animation.TranslateAnimation;
    
13. import android.widget.Button;
    
14. import android.widget.ImageButton;
    
15. import android.widget.ImageView;
    
16. 
    
17. public class DemoActivity extends Activity implements OnClickListener{
    
18. /** Called when the activity is first created. */
    
19. Button alphaBut ;
    
20. Button scaleBut ;
    
21. Button rotateBut ;
    
22. Button transfBut ;
    
23. Button complexBut ;
    
24. 
    
25. ImageView iv1;
    
26. ImageView iv2;
    
27. ImageView iv3;
    
28. ImageView iv4;
    
29. ImageView iv5;
    
30. 
    
31. AnimationSet as ;
    
32. @Override
    
33. public void onCreate(Bundle savedInstanceState) {
    
34. super.onCreate(savedInstanceState);
    
35. setContentView(R.layout.main);
    
36. alphaBut = (Button)findViewById(R.id.Button01);
    
37. scaleBut = (Button)findViewById(R.id.Button02);
    
38. rotateBut = (Button)findViewById(R.id.Button03);
    
39. transfBut = (Button)findViewById(R.id.Button04);
    
40. complexBut = (Button)findViewById(R.id.Button05);
    
41. 
    
42. alphaBut.setOnClickListener(this);
    
43. scaleBut.setOnClickListener(this);
    
44. rotateBut.setOnClickListener(this);
    
45. transfBut.setOnClickListener(this);
    
46. complexBut.setOnClickListener(this);
    
47. 
    
48. iv1 = (ImageView)findViewById(R.id.iv1);
    
49. iv2 = (ImageView)findViewById(R.id.iv2);
    
50. iv3 = (ImageView)findViewById(R.id.iv3);
    
51. iv4 = (ImageView)findViewById(R.id.iv4);
    
52. iv5 = (ImageView)findViewById(R.id.iv5);
    
53. 
    
54. }
    
55. @Override
    
56. public void onClick(View v) {
    
57. Button b = (Button)v;
    
58. switch(b.getId()){
    
59. case R.id.Button01://alpha
    
60. alphaAnimation();
    
61. break;
    
62. case R.id.Button02://scale
    
63. scaleAnimation();
    
64. break;
    
65. case R.id.Button03://rotate
    
66. rotateAnimation();
    
67. break;
    
68. case R.id.Button04 ://transf
    
69. transfAnimation();
    
70. break;
    
71. case R.id.Button05 ://complex
    
72. complexAnimation();
    
73. break;
    
74. }
    
75. 
    
76. }
    
77. /**
    
78. * 综合例子
    
79. */
    
80. private void complexAnimation() {
    
81. as = new AnimationSet(true);//1.实例化AnimationSet
    
82. 
    
83. TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0);
    
84. ta.setDuration(5000);//设置动画的时间
    
85. 
    
86. AlphaAnimation aa = new AlphaAnimation(1, 0.3f);//2.创建需要的animation
    
87. aa.setDuration(3000);
    
88. 
    
89. as.addAnimation(ta);//3.将animation加入AnimationSet
    
90. as.addAnimation(aa);//3.将animation加入AnimationSet
    
91. 
    
92. 
    
93. as.setFillAfter(true);//最终停止
    
94. 
    
95. complexBut.startAnimation(as);//4.开始动画
    
96. iv5.startAnimation(as);//开始动画
    
97. }
    
98. /**
    
99. * 平移
    
100. */
     
101. private void transfAnimation() {
     
102. as = new AnimationSet(true);//1.实例化AnimationSet
     
103. TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1);
     
104. aa.setDuration(5000);//设置动画的时间
     
105. as.addAnimation(aa);//3.将animation加入AnimationSet
     
106. transfBut.startAnimation(as);//4.开始动画
     
107. iv4.startAnimation(as);//开始动画
     
108. }
     
109. /**
     
110. * 旋转
     
111. */
     
112. private void rotateAnimation() {
     
113. as = new AnimationSet(true);//1.实例化AnimationSet
     
114. RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f);
     
115. aa.setDuration(5000);//设置动画的时间
     
116. as.addAnimation(aa);//3.将animation加入AnimationSet
     
117. rotateBut.startAnimation(as);//4.开始动画
     
118. iv3.startAnimation(as);//开始动画
     
119. }
     
120. /**
     
121. * 变化大小
     
122. */
     
123. private void scaleAnimation() {
     
124. as = new AnimationSet(true);//1.实例化AnimationSet
     
125. // ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.创建需要的animation,这种构造方法是以自身为pivot
     
126. ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
     
127. aa.setDuration(7000);//设置动画的时间
     
128. as.addAnimation(aa);//3.将animation加入AnimationSet
     
129. scaleBut.startAnimation(as);//4.开始动画
     
130. iv2.startAnimation(as);//开始动画
     
131. }
     
132. /**
     
133. * 透明度渐变
     
134. */
     
135. private void alphaAnimation(){
     
136. as = new AnimationSet(true);//1.实例化AnimationSet
     
137. AlphaAnimation aa = new AlphaAnimation(1, 0);//2.创建需要的animation
     
138. aa.setDuration(2000);//设置动画的时间
     
139. as.addAnimation(aa);//3.将animation加入AnimationSet
     
140. alphaBut.startAnimation(as);//4.开始动画
     
141. iv1.startAnimation(as);//开始动画
     
142. }
     
143. 
     
144. }

复制代码