【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

「爱情、让人受尽委屈。」 2024-02-17 17:04 138阅读 0赞

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

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

下面就讲一下Tweene Animations。

主要类：

Animation 动画

AlphaAnimation 渐变透明度

RotateAnimation 画面旋转

ScaleAnimation 渐变尺寸缩放

TranslateAnimation 位置移动

AnimationSet  动画集

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

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

**AlphaAnimation**

通过代码实现 AlphaAnimation，如下：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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

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

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

**RotateAnimation**

代码：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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

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

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

**ScaleAnimation**

代码：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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

ScaleAnimation类中

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

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

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

**TranslateAnimation**

代码：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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

TranslateAnimation类

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

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

参数详细说明：

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
  <tr> 
   <td colspan="3"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 表二</p> </td> 
  </tr> 
  <tr> 
   <td colspan="2">XML节点</td> 
   <td>功能说明</td> 
  </tr> 
  <tr> 
   <td colspan="2">alpha</td> 
   <td>渐变透明度动画效果</td> 
  </tr> 
  <tr> 
   <td colspan="3">&lt;alpha<br> android:fromAlpha=”0.1″<br> android:toAlpha=”1.0″<br> android:duration=”3000″ /&gt;</td> 
  </tr> 
  <tr> 
   <td>fromAlpha</td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 属性为动画起始时透明度</p> </td> 
   <td>0.0表示完全透明<br> 1.0表示完全不透明<br> 以上值取0.0-1.0之间的float数据类型的数字</td> 
  </tr> 
  <tr> 
   <td>toAlpha</td> 
   <td>属性为动画结束时透明度</td> 
  </tr> 
 </tbody> 
</table>

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
  <tr> 
   <td colspan="4"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 表三</p> </td> 
  </tr> 
  <tr> 
   <td colspan="2">scale</td> 
   <td colspan="2">渐变尺寸伸缩动画效果</td> 
  </tr> 
  <tr> 
   <td colspan="4">&lt;scale<br> android:interpolator= “@android:anim/accelerate_decelerate_interpolator”<br> android:fromXScale=”0.0″<br> android:toXScale=”1.4″<br> android:fromYScale=”0.0″<br> android:toYScale=”1.4″<br> android:pivotX=”50%”<br> android:pivotY=”50%”<br> android:fillAfter=”false”<br> android:startOffset=“700”<br> android:duration=”700″<br> android:repeatCount=”10″ /&gt;</td> 
  </tr> 
  <tr> 
   <td>fromXScale[float] fromYScale[float]</td> 
   <td colspan="2">为动画起始时，X、Y坐标上的伸缩尺寸</td> 
   <td>0.0表示收缩到没有<br> 1.0表示正常无伸缩<br> 值小于1.0表示收缩<br> 值大于1.0表示放大</td> 
  </tr> 
  <tr> 
   <td>toXScale [float]<br> toYScale[float]</td> 
   <td colspan="2">为动画结束时，X、Y坐标上的伸缩尺寸</td> 
  </tr> 
  <tr> 
   <td>pivotX[float]<br> pivotY[float]</td> 
   <td colspan="2">为动画相对于物件的X、Y坐标的开始位置</td> 
   <td>属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
  <tr> 
   <td colspan="4"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 表五</p> </td> 
  </tr> 
  <tr> 
   <td colspan="3">rotate</td> 
   <td>画面转移旋转动画效果</td> 
  </tr> 
  <tr> 
   <td colspan="4">&lt;rotate<br> android:interpolator=”@android:anim/accelerate_decelerate_interpolator”<br> android:fromDegrees=”0″<br> android:toDegrees=”+350″<br> android:pivotX=”50%”<br> android:pivotY=”50%”<br> android:duration=”3000″ /&gt;</td> 
  </tr> 
  <tr> 
   <td>fromDegrees</td> 
   <td>为动画起始时物件的角度</td> 
   <td colspan="2">说明<br> 当角度为负数——表示逆时针旋转<br> 当角度为正数——表示顺时针旋转<br> (负数from——to正数:顺时针旋转)<br> (负数from——to负数:逆时针旋转)<br> (正数from——to正数:顺时针旋转)<br> (正数from——to负数:逆时针旋转)</td> 
  </tr> 
  <tr> 
   <td>toDegrees</td> 
   <td>属性为动画结束时物件旋转的角度 可以大于360度</td> 
  </tr> 
  <tr> 
   <td>pivotX<br> pivotY</td> 
   <td>为动画相对于物件的X、Y坐标的开始位</td> 
   <td colspan="2">说明：以上两个属性值 从0%-100%中取值<br> 50%为物件的X或Y方向坐标上的中点位置</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

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

答案是 AnimationSet。

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

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

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  //初始化 Translate动画
2.  translateAnimation = **new** TranslateAnimation(0.1f, 100.0f,0.1f,100.0f); 
3.  //初始化 Alpha动画
4.  alphaAnimation = **new** AlphaAnimation(0.1f, 1.0f); 
5.  
6.  //动画集
7.  AnimationSet set = **new** AnimationSet(**true**); 
8.  set.addAnimation(translateAnimation); 
9.  set.addAnimation(alphaAnimation); 
10. 
11. //设置动画时间 (作用到每个动画)
12. set.setDuration(1000); 
13. **this**.startAnimation(set);

是不是觉得很简单呢？

附上整个View类的代码吧。

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **package** com.yfz.view; 
2.  **import** com.yfz.R; 
3.  **import** android.content.Context; 
4.  **import** android.graphics.Canvas; 
5.  **import** android.graphics.drawable.BitmapDrawable; 
6.  **import** android.util.Log; 
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.AnimationSet; 
12. **import** android.view.animation.RotateAnimation; 
13. **import** android.view.animation.ScaleAnimation; 
14. **import** android.view.animation.TranslateAnimation; 
15. **public****class** TweenAnim **extends** View \{ 
16. 
17. //Alpha动画 - 渐变透明度
18. **private** Animation alphaAnimation = **null**; 
19. 
20. //Sacle动画 - 渐变尺寸缩放
21. **private** Animation scaleAnimation = **null**; 
22. 
23. //Translate动画 - 位置移动
24. **private** Animation translateAnimation = **null**; 
25. 
26. //Rotate动画 - 画面旋转
27. **private** Animation rotateAnimation = **null**; 
28. 
29. **public** TweenAnim(Context context) \{ 
30. **super**(context); 
31.  \} 
32. @Override
33. **protected****void** onDraw(Canvas canvas) \{ 
34. **super**.onDraw(canvas); 
35.  Log.e("Tween", "onDraw"); 
36. //加载一个图片
37.  canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery\_photo\_5)).getBitmap(), 0, 0, **null**); 
38.  \} 
39. @Override
40. **public****boolean** onKeyDown(**int** keyCode, KeyEvent event) \{ 
41.  Log.e("Tween", "onKeyDown"); 
42. **return****true**; 
43.  \} 
44. @Override
45. **public****boolean** onKeyUp(**int** keyCode, KeyEvent event) \{ 
46.  Log.e("Tween", "onKeyDown"); 
47. **switch** (keyCode) \{ 
48. **case** KeyEvent.KEYCODE\_DPAD\_UP: 
49.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_UP"); 
50.  alphaAnimation = **new** AlphaAnimation(0.1f, 1.0f); 
51. //设置动画时间
52.  alphaAnimation.setDuration(3000); 
53. **this**.startAnimation(alphaAnimation); 
54. **break**; 
55. **case** KeyEvent.KEYCODE\_DPAD\_DOWN: 
56.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_DOWN"); 
57.  rotateAnimation = **new** RotateAnimation(0f, 360f); 
58.  rotateAnimation.setDuration(1000); 
59. **this**.startAnimation(rotateAnimation); 
60. **break**; 
61. **case** KeyEvent.KEYCODE\_DPAD\_LEFT: 
62.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_LEFT"); 
63. //初始化
64.  scaleAnimation = **new** ScaleAnimation(0.1f, 1.0f,0.1f,1.0f); 
65. //设置动画时间
66.  scaleAnimation.setDuration(500); 
67. **this**.startAnimation(scaleAnimation); 
68. **break**; 
69. **case** KeyEvent.KEYCODE\_DPAD\_RIGHT: 
70.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_RIGHT"); 
71. //初始化
72.  translateAnimation = **new** TranslateAnimation(0.1f, 100.0f,0.1f,100.0f); 
73. //设置动画时间
74.  translateAnimation.setDuration(1000); 
75. 
76. **this**.startAnimation(translateAnimation); 
77. **break**; 
78. **case** KeyEvent.KEYCODE\_DPAD\_CENTER: 
79.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_CENTER"); 
80. //初始化 Translate动画
81.  translateAnimation = **new** TranslateAnimation(0.1f, 100.0f,0.1f,100.0f); 
82. //初始化 Alpha动画
83.  alphaAnimation = **new** AlphaAnimation(0.1f, 1.0f); 
84. 
85. //动画集
86.  AnimationSet set = **new** AnimationSet(**true**); 
87.  set.addAnimation(translateAnimation); 
88.  set.addAnimation(alphaAnimation); 
89. 
90. //设置动画时间 (作用到每个动画)
91.  set.setDuration(1000); 
92. **this**.startAnimation(set); 
93. **break**; 
94. **default**: 
95. **break**; 
96.  \} 
97. **return****true**; 
98.  \} 
99. 
100. \}

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

调用该View的代码：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  TweenAnim anim = **new** TweenAnim(Lesson\_11.**this**); 
2.  anim.setFocusable(**true**); 
3.  setContentView(anim);

--------------------

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

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

首先是**AlphaAnimation。**

alpha\_anim.xml：

**\[xhtml\] [view plain][][copy][view plain]**

[print][view plain] [?][view plain]

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

不用解释了吧。

**RotateAnimation**

rotate\_anim.xml：

**\[xhtml\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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="500"
10. **/>**
11. **</****set****>**

**ScaleAnimation**

scale\_anim.xml：

**\[xhtml\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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

**TranslateAnimation**

translate\_anim.xml：

**\[xhtml\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

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.  **/>**
9.  **</****set****>**

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

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

如：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  rotateAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.rotate\_anim);

这次View类的代码如下：

**\[java\]** [view plain][] [copy][view plain]

[print][view plain] [?][view plain]

1.  **package** com.yfz.view; 
2.  **import** com.yfz.R; 
3.  **import** android.content.Context; 
4.  **import** android.graphics.Canvas; 
5.  **import** android.graphics.drawable.BitmapDrawable; 
6.  **import** android.util.Log; 
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.AnimationSet; 
12. **import** android.view.animation.AnimationUtils; 
13. **import** android.view.animation.RotateAnimation; 
14. **import** android.view.animation.ScaleAnimation; 
15. **import** android.view.animation.TranslateAnimation; 
16. **public****class** TweenAnim2 **extends** View \{ 
17. 
18. //Alpha动画 - 渐变透明度
19. **private** Animation alphaAnimation = **null**; 
20. 
21. //Sacle动画 - 渐变尺寸缩放
22. **private** Animation scaleAnimation = **null**; 
23. 
24. //Translate动画 - 位置移动
25. **private** Animation translateAnimation = **null**; 
26. 
27. //Rotate动画 - 画面旋转
28. **private** Animation rotateAnimation = **null**; 
29. 
30. **public** TweenAnim2(Context context) \{ 
31. **super**(context); 
32.  \} 
33. @Override
34. **protected****void** onDraw(Canvas canvas) \{ 
35. **super**.onDraw(canvas); 
36.  Log.e("Tween", "onDraw"); 
37. //加载一个图片
38.  canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery\_photo\_5)).getBitmap(), 0, 0, **null**); 
39.  \} 
40. @Override
41. **public****boolean** onKeyDown(**int** keyCode, KeyEvent event) \{ 
42.  Log.e("Tween", "onKeyDown"); 
43. **return****true**; 
44.  \} 
45. @Override
46. **public****boolean** onKeyUp(**int** keyCode, KeyEvent event) \{ 
47.  Log.e("Tween", "onKeyDown"); 
48. **switch** (keyCode) \{ 
49. **case** KeyEvent.KEYCODE\_DPAD\_UP: 
50.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_UP"); 
51. 
52.  alphaAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.alpha\_anim); 
53. 
54. **this**.startAnimation(alphaAnimation); 
55. **break**; 
56. **case** KeyEvent.KEYCODE\_DPAD\_DOWN: 
57.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_DOWN"); 
58. 
59.  rotateAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.rotate\_anim); 
60. 
61. **this**.startAnimation(rotateAnimation); 
62. **break**; 
63. **case** KeyEvent.KEYCODE\_DPAD\_LEFT: 
64.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_LEFT"); 
65. 
66.  scaleAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.scale\_anim); 
67. 
68. **this**.startAnimation(scaleAnimation); 
69. **break**; 
70. **case** KeyEvent.KEYCODE\_DPAD\_RIGHT: 
71.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_RIGHT"); 
72. 
73.  translateAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.translate\_anim); 
74. 
75. **this**.startAnimation(translateAnimation); 
76. **break**; 
77. **case** KeyEvent.KEYCODE\_DPAD\_CENTER: 
78.  Log.e("Tween", "onKeyDown - KEYCODE\_DPAD\_CENTER"); 
79. //初始化 Translate动画
80.  translateAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.translate\_anim); 
81. 
82. //初始化 Alpha动画
83.  alphaAnimation = AnimationUtils.loadAnimation(**this**.getContext(), R.anim.alpha\_anim); 
84. 
85. //动画集
86.  AnimationSet set = **new** AnimationSet(**true**); 
87.  set.addAnimation(translateAnimation); 
88.  set.addAnimation(alphaAnimation); 
89. 
90. //设置动画时间 (作用到每个动画)
91.  set.setDuration(1000); 
92. **this**.startAnimation(set); 
93. **break**; 
94. **default**: 
95. **break**; 
96.  \} 
97. **return****true**; 
98.  \} 
99. 
100. \}

好了，本次就这么多。

[Android]: http://lib.csdn.net/base/15
[view plain]: http://blog.csdn.net/feng88724/article/details/6318430#