Android開發教程：簡單的animation動畫效果的實現過程

今天學習動畫：
Animations的分類：
1.TweenedAnimation ：提供旋轉、移動、伸展、和淡出的效果
Alpha：淡入淡出效果 Scale：縮放效果
Rotate：旋轉效果 Translate： 移動效果
2.Frame-by-Frame Animation ：創建Drawable的序列，可以按照指定的時間間隙一個個顯示（1s中播放24張以上的圖片就可以變成視頻了）也可以做成動態廣告的形式

3.res文件加下加入XMl文件，可以使用XML文件實現控制動畫，XML文件中添加Set標簽，標簽中加入rotate、alpha、scale、或者translate 代碼中實現AnimationUtil裝載xml

文件並生成，Animation對象需要注意的是

<!--pivotX pivotY旋轉時候 的坐標絕對位置的

50這種方法使用的是絕對位置
50%相對於空間本身定位

"50%p"的意思是相對於空控件的父控件的定位 -->

4.接著咱們看看代碼的實現過程

首先看看兩種方法共同的布局文件

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content"
9. android:orientation="horizontal">
11. <Button
12. android:id="@+id/Alpha"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:text="淡入淡出" />
16. <Button
17. android:id="@+id/scale"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:text="縮放效果" />
21. <Button
22. android:id="@+id/rotate"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:text="旋轉效果" />
26. <Button
27. android:id="@+id/translate"
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:text="移動效果" />
31. </LinearLayout>
32. <ImageView
33. android:id="@+id/image"
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:src="@drawable/a" />
39. </LinearLayout>

5.看看第一種方法的活動實現的過程

1. package com.wang;
3. import com.wang.R.id;
5. import android.R.anim;
6. import android.R.integer;
7. import android.app.Activity;
8. import android.os.Bundle;
9. import android.provider.ContactsContract.CommonDataKinds.Im;
10. import android.view.View;
11. import android.view.View.OnClickListener;
12. import android.view.animation.AccelerateDecelerateInterpolator;
13. import android.view.animation.AccelerateInterpolator;
14. import android.view.animation.AlphaAnimation;
15. import android.view.animation.Animation;
16. import android.view.animation.AnimationSet;
17. import android.view.animation.RotateAnimation;
18. import android.view.animation.ScaleAnimation;
19. import android.view.animation.Transformation;
20. import android.view.animation.TranslateAnimation;
21. import android.widget.Button;
22. import android.widget.ImageView;
24. public class AnimationTestActivity extends Activity {
25. private ImageView image = null;
26. private Button Alphabutton = null;
27. private Button scalebutton = null;
28. private Button rotatebutton = null;
29. private Button translatebutton = null;
31. public void onCreate(Bundle savedInstanceState) {
32. super.onCreate(savedInstanceState);
33. setContentView(R.layout.main);
34. image = (ImageView) findViewById(R.id.image);
35. Alphabutton = (Button) findViewById(R.id.Alpha);
36. scalebutton = (Button) findViewById(R.id.scale);
37. rotatebutton = (Button) findViewById(R.id.rotate);
38. translatebutton = (Button) findViewById(R.id.translate);
39. // 淡入淡出按鈕的監聽時間
40. Alphabutton.setOnClickListener(new OnClickListener() {
42. public void onClick(View v) {
43. // 創建一個AnimationSet對象
44. AnimationSet animationSet = new AnimationSet(true);
45. // j加速播放
46. animationSet.setInterpolator(new AccelerateInterpolator());
47. // //創建一個AnimationSet對象淡出旋轉二合一
48. AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
49. RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
50. Animation.RELATIVE_TO_PARENT, 1f,// X軸
51. Animation.RELATIVE_TO_PARENT, 0f);// y軸
53. // 將alphaAnimation對象添加到animationSet中
54. animationSet.addAnimation(alphaAnimation);
55. animationSet.addAnimation(rotateAnimation);
56. // 顯示的時間為1s
57. alphaAnimation.setDuration(3000);
58. // 開始執行動畫
59. image.startAnimation(animationSet);
60. // 設置重復的次數
61. animationSet.setRepeatCount(4);
63. }
65. });
66. // 縮放按鈕的監聽事件
67. scalebutton.setOnClickListener(new OnClickListener() {
69. @Override
70. public void onClick(View v) {
71. AnimationSet animationSet = new AnimationSet(true);
72. // 從1縮放的0.1
73. ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1,
74. 0.1f, Animation.RELATIVE_TO_SELF, 0.5f,
75. Animation.RELATIVE_TO_SELF, 0.5f);
77. animationSet.addAnimation(scaleAnimation);
79. // 執行前等待的時間
80. animationSet.setStartOffset(1000);
82. // dd動畫執行之前和之後的狀態
83. animationSet.setFillAfter(true);
84. animationSet.setFillBefore(false);
85. animationSet.setDuration(5000);
86. image.startAnimation(animationSet);
88. }
89. });
90. // 旋轉按鈕的單擊事件
91. rotatebutton.setOnClickListener(new OnClickListener() {
93. @Override
94. public void onClick(View v) {
96. AnimationSet animationSet = new AnimationSet(true);
97. // 創建對象 參數 從0度轉到360度
98. /*********
99. **一個動畫控制旋轉的一個對象。這個旋轉發生int xy平面。 您可以指定點使用的中心旋轉,在那裡(0,0)是左上角點。
100. * 如果未指定,(0,0)是默認的旋轉點
101. **/
102. RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
103. Animation.RELATIVE_TO_PARENT, 1f,// X軸
104. Animation.RELATIVE_TO_PARENT, 0f);// y軸
105. rotateAnimation.setDuration(5000);
106. animationSet.addAnimation(rotateAnimation);
107. image.startAnimation(animationSet);
109. }
110. });
111. // 移動按鈕的點擊事件
112. translatebutton.setOnClickListener(new OnClickListener() {
114. public void onClick(View v) {
116. AnimationSet animationSet = new AnimationSet(true);
117. TranslateAnimation translatebutton = new TranslateAnimation(
118. Animation.RELATIVE_TO_SELF, 0f,// //X軸
119. Animation.RELATIVE_TO_SELF, 0.5f,// y軸
120. Animation.RELATIVE_TO_SELF, 0f,// X軸
121. Animation.RELATIVE_TO_SELF, 1.0f);// y軸
122. translatebutton.setDuration(5000);
123. }
124. });
125. }
126. }

6.第二種方式實現的時候要在res的文件之下在建一個文件夾anim。文件夾裡面包含的四個文件如下
alpha.xml 淡入淡出效果的文件

1. <?xml version="1.0" encoding="UTF-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android"
3. android:interpolator="@android:anim/accelerate_interpolator" >
5. <alpha
6. android:duration="500"
7. android:fromAlpha="1.0"
8. android:startOffset="500"
9. android:toAlpha="0.0" />
11. </set>

rotate.xml 旋轉效果的文件

1. <?xml version="1.0" encoding="UTF-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android"
3. android:interpolator="@android:anim/accelerate_interpolator" >
5. <rotate
6. android:fromDegrees="0"
7. android:toDegrees="350"
8. android:pivotX="50%p"
9. android:pivotY="50%p"
10. android:duration="3000" />
11. <!--pivotX pivotY旋轉時候 的坐標絕對位置的
12. 50這種方法使用的是絕對位置
13. 50%相對於空間本身定位
14. "50%p"的意思是相對於空控件的父控件的定位
16. -->
17. </set>

sacle.xml 縮放效果的文件

1. <?xml version="1.0" encoding="UTF-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android"
3. android:interpolator="@android:anim/accelerate_interpolator" >
6. <scale
7. android:fromXScale="1.0"
8. android:toXScale="0.0"
9. android:fromYScale="1.0"
10. android:toYScale="0.0"
11. android:pivotX="50%"
12. android:pivotY="50%"
13. android:duration="3000"/>
16. </set>

translate.xml 移動效果的文件

1. <?xml version="1.0" encoding="UTF-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android"
3. android:interpolator="@android:anim/accelerate_interpolator" >
5. <translate
6. android:fromXDelta="50%"
7. android:toXDelta="100%"
8. android:fromYDelta="0%"
9. android:toYDelta="100%"
10. android:duration="3000" />
12. </set>

7.接著看看第二種方法的Activity的實現過程

1. package com.wang;
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.Animation;
8. import android.view.animation.AnimationUtils;
9. import android.widget.Button;
10. import android.widget.ImageView;
12. public class AnimationXMLActivity extends Activity {
14. private ImageView image;
15. private Button alphabutton;
16. private Button rotatebutton;
17. private Button saclebutton;
18. private Button translatebutton;
20. public void onCreate(Bundle savedInstanceState) {
21. super.onCreate(savedInstanceState);
22. setContentView(R.layout.main);
23. image = (ImageView) findViewById(R.id.image);
24. alphabutton = (Button) findViewById(R.id.alpha);
25. rotatebutton = (Button) findViewById(R.id.roate);
26. saclebutton = (Button) findViewById(R.id.scale);
27. translatebutton = (Button) findViewById(R.id.translate);
28. // 淡入淡出按鈕的監聽事件
29. alphabutton.setOnClickListener(new OnClickListener() {
31. @Override
32. public void onClick(View v) {
33. // s使用AnimationUtils裝載動畫設置文件
34. Animation animation = AnimationUtils.loadAnimation(
35. AnimationXMLActivity.this, R.anim.alpha);
36. // 啟動
37. image.startAnimation(animation);
38. }
39. });
40. // 旋轉效果的監聽事件
41. rotatebutton.setOnClickListener(new OnClickListener() {
43. @Override
44. public void onClick(View v) {
46. // s使用AnimationUtils裝載動畫設置文件
47. Animation animation = AnimationUtils.loadAnimation(
48. AnimationXMLActivity.this, R.anim.rotate);
49. image.startAnimation(animation);// TODO Auto-generated method
50. // stub
52. }
53. });
54. // 縮放組件的效果監聽
55. saclebutton.setOnClickListener(new OnClickListener() {
57. @Override
58. public void onClick(View v) {
59. // s使用AnimationUtils裝載動畫設置文件
60. Animation animation = AnimationUtils.loadAnimation(
61. AnimationXMLActivity.this, R.anim.sacle);
62. image.startAnimation(animation); // TODO Auto-generated method
63. // stub
65. }
66. });
67. // 移動效果的監聽事件
68. translatebutton.setOnClickListener(new OnClickListener() {
70. @Override
71. public void onClick(View v) {
72. // TODO Auto-generated method stub
73. // s使用AnimationUtils裝載動畫設置文件
74. Animation animation = AnimationUtils.loadAnimation(
75. AnimationXMLActivity.this, R.anim.translate);
76. image.startAnimation(animation);
77. }
78. });
80. }
81. }

8.殊路同歸，這兩種方法實現的功能都差不多，第一張圖片是原圖，第二張圖片是淡入淡出的效果，第三張是旋轉的效果圖，第四章是縮放的效果圖，第五章是移動的效果圖

由於是動畫效果，所以只能截取圖片的一部分

，