超炫button按钮动画效果

  
     

2012-3-28 19:02 上传

下载附件 (287.8 KB)

今天从网上看到一个这样的效果，感觉很有创意，自己也搜集了一些资料，仿照着实现了一下。    下面就直接上源码：
    首先看一下布局文件：

1.     <?xml version="1.0" encoding="utf-8"?>  
   
2.     <RelativeLayout android:layout_width="fill_parent"  
   
3.         android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"  
   
4.         android:background="#ffffff">  
   
5.       
   
6.         <ImageView android:layout_width="wrap_content"  
   
7.             android:layout_height="fill_parent" android:background="@drawable/splash_shadow"  
   
8.             android:layout_marginLeft="50dip" />  
   
9.       
   
10.         <RelativeLayout android:id="@+id/relativeLayout_top_bar"  
    
11.             android:layout_width="fill_parent" android:layout_height="40dip"  
    
12.             android:background="@drawable/qa_bar">  
    
13.       
    
14.             <ImageView android:layout_width="60dip"  
    
15.                 android:layout_height="20dip" android:background="@drawable/qa_logo"  
    
16.                 android:layout_centerInParent="true" />  
    
17.       
    
18.         </RelativeLayout>  
    
19.       
    
20.         <TextView android:layout_below="@id/relativeLayout_top_bar"  
    
21.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
22.             android:textSize="20sp" android:text="Tap to Refresh"  
    
23.             android:layout_centerHorizontal="true" android:layout_marginTop="50dip" android:textStyle="bold"/>  
    
24.       
    
25.       
    
26.         <Button android:id="@+id/button_composer_sleep"  
    
27.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
28.             android:background="@drawable/composer_sleep"  
    
29.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
30.             android:layout_alignParentBottom="true">  
    
31.         </Button>  
    
32.       
    
33.         <Button android:id="@+id/button_composer_thought"  
    
34.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
35.             android:background="@drawable/composer_thought"  
    
36.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
37.             android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_sleep">  
    
38.         </Button>  
    
39.       
    
40.         <Button android:id="@+id/button_composer_music"  
    
41.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
42.             android:background="@drawable/composer_music"  
    
43.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
44.             android:layout_alignParentBottom="true">  
    
45.         </Button>  
    
46.       
    
47.         <Button android:id="@+id/button_composer_place"  
    
48.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
49.             android:background="@drawable/composer_place"  
    
50.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
51.             android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_music">  
    
52.         </Button>  
    
53.       
    
54.       
    
55.         <Button android:id="@+id/button_composer_with"  
    
56.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
57.             android:background="@drawable/composer_with"  
    
58.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
59.             android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_place">  
    
60.         </Button>  
    
61.       
    
62.       
    
63.         <Button android:id="@+id/button_composer_camera"  
    
64.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
65.             android:background="@drawable/composer_camera"  
    
66.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
67.             android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_with">  
    
68.         </Button>  
    
69.       
    
70.       
    
71.         <Button android:id="@+id/button_friends_delete"  
    
72.             android:layout_width="wrap_content" android:layout_height="wrap_content"  
    
73.             android:background="@drawable/friends_delete"  
    
74.             android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"  
    
75.             android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_camera">  
    
76.         </Button>  
    
77.       
    
78.       
    
79.     </RelativeLayout>  

复制代码

实现button按钮动画效果的核心类：

1.     package cn.com.kar.test;  
   
2.       
   
3.     import android.R.anim;  
   
4.     import android.app.Activity;  
   
5.     import android.os.Bundle;  
   
6.     import android.util.Log;  
   
7.     import android.view.Display;  
   
8.     import android.view.View;  
   
9.     import android.view.View.OnClickListener;  
   
10.     import android.view.animation.Animation;  
    
11.     import android.view.animation.RotateAnimation;  
    
12.     import android.view.animation.ScaleAnimation;  
    
13.     import android.view.animation.TranslateAnimation;  
    
14.     import android.view.animation.Animation.AnimationListener;  
    
15.     import android.widget.Button;  
    
16.     import android.widget.RelativeLayout.LayoutParams;  
    
17.       
    
18.     public class PathButtonActivity extends Activity   
    
19.     {  
    
20.         private Button buttonCamera, buttonDelete, buttonWith, buttonPlace, buttonMusic, buttonThought, buttonSleep;  
    
21.         private Animation animationTranslate, animationRotate, animationScale;  
    
22.         private static int width, height;  
    
23.         private LayoutParams params = new LayoutParams(0, 0);  
    
24.         private static Boolean isClick = false;  
    
25.          
    
26.         /** Called when the activity is first created. */  
    
27.         @Override  
    
28.         public void onCreate(Bundle savedInstanceState)   
    
29.         {  
    
30.             super.onCreate(savedInstanceState);  
    
31.             setContentView(R.layout.path_button);  
    
32.               
    
33.             initialButton();  
    
34.         
    
35.               
    
36.         }  
    
37.         private void initialButton()   
    
38.         {  
    
39.             // TODO Auto-generated method stub  
    
40.             Display display = getWindowManager().getDefaultDisplay();   
    
41.             height = display.getHeight();   
    
42.             width = display.getWidth();  
    
43.             Log.v("width  & height is:", String.valueOf(width) + ", " + String.valueOf(height));  
    
44.               
    
45.             params.height = 50;  
    
46.             params.width = 50;  
    
47.             //设置边距  (int left, int top, int right, int bottom)  
    
48.             params.setMargins(10, height - 98, 0, 0);  
    
49.               
    
50.             buttonSleep = (Button) findViewById(R.id.button_composer_sleep);      
    
51.             buttonSleep.setLayoutParams(params);  
    
52.               
    
53.             buttonThought = (Button) findViewById(R.id.button_composer_thought);  
    
54.             buttonThought.setLayoutParams(params);  
    
55.               
    
56.             buttonMusic = (Button) findViewById(R.id.button_composer_music);  
    
57.             buttonMusic.setLayoutParams(params);  
    
58.               
    
59.             buttonPlace = (Button) findViewById(R.id.button_composer_place);  
    
60.             buttonPlace.setLayoutParams(params);  
    
61.               
    
62.             buttonWith = (Button) findViewById(R.id.button_composer_with);  
    
63.             buttonWith.setLayoutParams(params);  
    
64.       
    
65.             buttonCamera = (Button) findViewById(R.id.button_composer_camera);  
    
66.             buttonCamera.setLayoutParams(params);  
    
67.               
    
68.             buttonDelete = (Button) findViewById(R.id.button_friends_delete);         
    
69.             buttonDelete.setLayoutParams(params);  
    
70.               
    
71.             buttonDelete.setOnClickListener(new OnClickListener()   
    
72.             {  
    
73.                      
    
74.                 @Override  
    
75.                 public void onClick(View v)   
    
76.                 {  
    
77.                     // TODO Auto-generated method stub                    
    
78.                     if(isClick == false)  
    
79.                     {  
    
80.                         isClick = true;  
    
81.                         buttonDelete.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));                     
    
82.                         buttonCamera.startAnimation(animTranslate(0.0f, -180.0f, 10, height - 240, buttonCamera, 80));  
    
83.                         buttonWith.startAnimation(animTranslate(30.0f, -150.0f, 60, height - 230, buttonWith, 100));  
    
84.                         buttonPlace.startAnimation(animTranslate(70.0f, -120.0f, 110, height - 210, buttonPlace, 120));  
    
85.                         buttonMusic.startAnimation(animTranslate(80.0f, -110.0f, 150, height - 180, buttonMusic, 140));  
    
86.                         buttonThought.startAnimation(animTranslate(90.0f, -60.0f, 175, height - 135, buttonThought, 160));  
    
87.                         buttonSleep.startAnimation(animTranslate(170.0f, -30.0f, 190, height - 90, buttonSleep, 180));  
    
88.                      
    
89.                     }  
    
90.                     else  
    
91.                     {                     
    
92.                         isClick = false;  
    
93.                         buttonDelete.startAnimation(animRotate(90.0f, 0.5f, 0.45f));  
    
94.                         buttonCamera.startAnimation(animTranslate(0.0f, 140.0f, 10, height - 98, buttonCamera, 180));  
    
95.                         buttonWith.startAnimation(animTranslate(-50.0f, 130.0f, 10, height - 98, buttonWith, 160));  
    
96.                         buttonPlace.startAnimation(animTranslate(-100.0f, 110.0f, 10, height - 98, buttonPlace, 140));  
    
97.                         buttonMusic.startAnimation(animTranslate(-140.0f, 80.0f, 10, height - 98, buttonMusic, 120));  
    
98.                         buttonThought.startAnimation(animTranslate(-160.0f, 40.0f, 10, height - 98, buttonThought, 80));  
    
99.                         buttonSleep.startAnimation(animTranslate(-170.0f, 0.0f, 10, height - 98, buttonSleep, 50));  
    
100.                           
     
101.                     }  
     
102.                           
     
103.                 }  
     
104.             });  
     
105.             buttonCamera.setOnClickListener(new OnClickListener()   
     
106.             {  
     
107.                      
     
108.                 @Override  
     
109.                 public void onClick(View v)   
     
110.                 {  
     
111.                     // TODO Auto-generated method stub   
     
112.                     buttonCamera.startAnimation(setAnimScale(2.5f, 2.5f));  
     
113.                     buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
     
114.                     buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
     
115.                     buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
     
116.                     buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
     
117.                     buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
     
118.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
119.                 }  
     
120.             });  
     
121.             buttonWith.setOnClickListener(new OnClickListener()   
     
122.             {  
     
123.                      
     
124.                 @Override  
     
125.                 public void onClick(View v)   
     
126.                 {  
     
127.                     // TODO Auto-generated method stub                    
     
128.                     buttonWith.startAnimation(setAnimScale(2.5f, 2.5f));      
     
129.                     buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));   
     
130.                     buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
     
131.                     buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
     
132.                     buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
     
133.                     buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
     
134.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
135.                 }  
     
136.             });  
     
137.             buttonPlace.setOnClickListener(new OnClickListener()   
     
138.             {  
     
139.                      
     
140.                 @Override  
     
141.                 public void onClick(View v)   
     
142.                 {  
     
143.                     // TODO Auto-generated method stub                    
     
144.                     buttonPlace.startAnimation(setAnimScale(2.5f, 2.5f));  
     
145.                     buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
     
146.                     buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));   
     
147.                     buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
     
148.                     buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
     
149.                     buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
     
150.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
151.                 }  
     
152.             });  
     
153.             buttonMusic.setOnClickListener(new OnClickListener()   
     
154.             {  
     
155.                      
     
156.                 @Override  
     
157.                 public void onClick(View v)   
     
158.                 {  
     
159.                     // TODO Auto-generated method stub                    
     
160.                     buttonMusic.startAnimation(setAnimScale(2.5f, 2.5f));  
     
161.                     buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
     
162.                     buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
     
163.                     buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));   
     
164.                     buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
     
165.                     buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
     
166.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
167.                 }  
     
168.             });  
     
169.             buttonThought.setOnClickListener(new OnClickListener()   
     
170.             {  
     
171.                      
     
172.                 @Override  
     
173.                 public void onClick(View v)   
     
174.                 {  
     
175.                     // TODO Auto-generated method stub                    
     
176.                     buttonThought.startAnimation(setAnimScale(2.5f, 2.5f));  
     
177.                     buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
     
178.                     buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
     
179.                     buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));   
     
180.                     buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
     
181.                     buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));  
     
182.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
183.                 }  
     
184.             });  
     
185.             buttonSleep.setOnClickListener(new OnClickListener()   
     
186.             {  
     
187.                      
     
188.                 @Override  
     
189.                 public void onClick(View v)   
     
190.                 {  
     
191.                     // TODO Auto-generated method stub                    
     
192.                     buttonSleep.startAnimation(setAnimScale(2.5f, 2.5f));  
     
193.                     buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));  
     
194.                     buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));      
     
195.                     buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));   
     
196.                     buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));  
     
197.                     buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));  
     
198.                     buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));  
     
199.                 }  
     
200.             });  
     
201.               
     
202.         }  
     
203.          
     
204.         protected Animation setAnimScale(float toX, float toY)   
     
205.         {  
     
206.             // TODO Auto-generated method stub  
     
207.             animationScale = new ScaleAnimation(1f, toX, 1f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.45f);  
     
208.             animationScale.setInterpolator(PathButtonActivity.this, anim.accelerate_decelerate_interpolator);  
     
209.             animationScale.setDuration(500);  
     
210.             animationScale.setFillAfter(false);  
     
211.             return animationScale;  
     
212.               
     
213.         }  
     
214.          
     
215.         protected Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue)   
     
216.         {  
     
217.             // TODO Auto-generated method stub  
     
218.             animationRotate = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);  
     
219.             animationRotate.setAnimationListener(new AnimationListener()   
     
220.             {  
     
221.                   
     
222.                 @Override  
     
223.                 public void onAnimationStart(Animation animation)   
     
224.                 {  
     
225.                     // TODO Auto-generated method stub  
     
226.                      
     
227.                 }  
     
228.                   
     
229.                 @Override  
     
230.                 public void onAnimationRepeat(Animation animation)   
     
231.                 {  
     
232.                     // TODO Auto-generated method stub  
     
233.                      
     
234.                 }  
     
235.                   
     
236.                 @Override  
     
237.                 public void onAnimationEnd(Animation animation)   
     
238.                 {  
     
239.                     // TODO Auto-generated method stub  
     
240.                     animationRotate.setFillAfter(true);  
     
241.                 }  
     
242.             });  
     
243.             return animationRotate;  
     
244.         }  
     
245.         //移动的动画效果         
     
246.         /*   
     
247.          * TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)   
     
248.          *   
     
249.          * float fromXDelta:这个参数表示动画开始的点离当前View X坐标上的差值；  
     
250.          *  
     
251.     　　       * float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值；  
     
252.          *  
     
253.     　　       * float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值；  
     
254.          *  
     
255.     　　       * float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值；  
     
256.          */  
     
257.         protected Animation animTranslate(float toX, float toY, final int lastX, final int lastY,  
     
258.                 final Button button, long durationMillis)   
     
259.         {  
     
260.             // TODO Auto-generated method stub  
     
261.             animationTranslate = new TranslateAnimation(0, toX, 0, toY);                  
     
262.             animationTranslate.setAnimationListener(new AnimationListener()  
     
263.             {  
     
264.                               
     
265.                 @Override  
     
266.                 public void onAnimationStart(Animation animation)  
     
267.                 {  
     
268.                     // TODO Auto-generated method stub  
     
269.                                       
     
270.                 }  
     
271.                               
     
272.                 @Override  
     
273.                 public void onAnimationRepeat(Animation animation)   
     
274.                 {  
     
275.                     // TODO Auto-generated method stub  
     
276.                                  
     
277.                 }  
     
278.                               
     
279.                 @Override  
     
280.                 public void onAnimationEnd(Animation animation)  
     
281.                 {  
     
282.                     // TODO Auto-generated method stub  
     
283.                     params = new LayoutParams(0, 0);  
     
284.                     params.height = 50;  
     
285.                     params.width = 50;                                            
     
286.                     params.setMargins(lastX, lastY, 0, 0);  
     
287.                     button.setLayoutParams(params);  
     
288.                     button.clearAnimation();  
     
289.                               
     
290.                 }  
     
291.             });                                                                                               
     
292.             animationTranslate.setDuration(durationMillis);  
     
293.             return animationTranslate;  
     
294.         }  
     
295.          
     
296.       
     
297.               
     
298.     }  

复制代码

其实就是在button点击的时候播放Tween动画。

这样就基本完成，参照上面的代码 自己也可以自行修改成自己喜欢的样式。
看一下在我手机上运行的效果：

2012-3-28 19:03 上传

下载附件 (19.63 KB)

2012-3-28 19:04 上传

下载附件 (42.31 KB)

来这我的博客： http://blog.csdn.net/wangkuifeng0118/article/details/7357752
源码下载地址： http://download.csdn.net/detail/wangkuifeng0118/4145679