超炫的Button按钮展开弧形动画效果

----------------------收藏备用  -------------------------------

代码下载：http://download.csdn.net/detail/qq263229365/5622693

  

  今天从网上看到一个这样的效果，感觉很有创意，自己也搜集了一些资料，仿照着实现了一下。

    下面就直接上源码：

    首先看一下布局文件：

[html]  view plain copy

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按钮动画效果的核心类：

[html]  view plain copy

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动画。

这样就基本完成，参照上面的代码 自己也可以自行修改成自己喜欢的样式。

看一下在我手机上运行的效果：

代码下载：http://download.csdn.net/detail/qq263229365/5622693