Android开发教程：简单的animation动画效果的实现过程

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">  
10.   
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" />  
37.       
38.   
39. </LinearLayout>  

5.看看第一种方法的活动实现的过程

1. package com.wang;  
2.   
3. import com.wang.R.id;  
4.   
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;  
23.   
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;  
30.   
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() {  
41.   
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轴   
52.   
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);  
62.   
63.             }  
64.   
65.         });  
66.         // 缩放按钮的监听事件   
67.         scalebutton.setOnClickListener(new OnClickListener() {  
68.   
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);  
76.   
77.                 animationSet.addAnimation(scaleAnimation);  
78.   
79.                 // 执行前等待的时间   
80.                 animationSet.setStartOffset(1000);  
81.   
82.                 // dd动画执行之前和之后的状态   
83.                 animationSet.setFillAfter(true);  
84.                 animationSet.setFillBefore(false);  
85.                 animationSet.setDuration(5000);  
86.                 image.startAnimation(animationSet);  
87.   
88.             }  
89.         });  
90.         // 旋转按钮的单击事件   
91.         rotatebutton.setOnClickListener(new OnClickListener() {  
92.   
93.             @Override  
94.             public void onClick(View v) {  
95.   
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);  
108.   
109.             }  
110.         });  
111.         // 移动按钮的点击事件   
112.         translatebutton.setOnClickListener(new OnClickListener() {  
113.   
114.             public void onClick(View v) {  
115.   
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" >  
4.   
5.     <alpha  
6.         android:duration="500"  
7.         android:fromAlpha="1.0"  
8.         android:startOffset="500"  
9.         android:toAlpha="0.0" />  
10.   
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" >  
4.   
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"的意思是相对于空控件的父控件的定位  
15.   
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" >  
4.   
5.   
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"/>  
14.   
15.   
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" >  
4.   
5.     <translate  
6.         android:fromXDelta="50%"  
7.         android:toXDelta="100%"  
8.         android:fromYDelta="0%"  
9.         android:toYDelta="100%"  
10.         android:duration="3000" />  
11.   
12. </set>  

7.接着看看第二种方法的Activity的实现过程

1. package com.wang;  
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.Animation;  
8. import android.view.animation.AnimationUtils;  
9. import android.widget.Button;  
10. import android.widget.ImageView;  
11.   
12. public class AnimationXMLActivity extends Activity {  
13.   
14.     private ImageView image;  
15.     private Button alphabutton;  
16.     private Button rotatebutton;  
17.     private Button saclebutton;  
18.     private Button translatebutton;  
19.   
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() {  
30.   
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() {  
42.   
43.             @Override  
44.             public void onClick(View v) {  
45.   
46.                 // s使用AnimationUtils装载动画设置文件   
47.                 Animation animation = AnimationUtils.loadAnimation(  
48.                         AnimationXMLActivity.this, R.anim.rotate);  
49.                 image.startAnimation(animation);// TODO Auto-generated method   
50.                 // stub   
51.   
52.             }  
53.         });  
54.         // 缩放组件的效果监听   
55.         saclebutton.setOnClickListener(new OnClickListener() {  
56.   
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   
64.   
65.             }  
66.         });  
67.         // 移动效果的监听事件   
68.         translatebutton.setOnClickListener(new OnClickListener() {  
69.   
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.         });  
79.   
80.     }  
81. }  

8.殊路同归，这两种方法实现的功能都差不多，第一张图片是原图，第二张图片是淡入淡出的效果，第三张是旋转的效果图，第四章是缩放的效果图，第五章是移动的效果图

由于是动画效果，所以只能截取图片的一部分

，