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

代码下载：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. <ImageView android:layout_width="wrap_content"
  6. android:layout_height="fill_parent" android:background="@drawable/splash_shadow"
  7. android:layout_marginLeft="50dip" />
  8. <RelativeLayout android:id="@+id/relativeLayout_top_bar"
  9. android:layout_width="fill_parent" android:layout_height="40dip"
  10. android:background="@drawable/qa_bar">
  11. <ImageView android:layout_width="60dip"
  12. android:layout_height="20dip" android:background="@drawable/qa_logo"
  13. android:layout_centerInParent="true" />
  14. </RelativeLayout>
  15. <TextView android:layout_below="@id/relativeLayout_top_bar"
  16. android:layout_width="wrap_content" android:layout_height="wrap_content"
  17. android:textSize="20sp" android:text="Tap to Refresh"
  18. android:layout_centerHorizontal="true" android:layout_marginTop="50dip" android:textStyle="bold"/>
  19. <Button android:id="@+id/button_composer_sleep"
  20. android:layout_width="wrap_content" android:layout_height="wrap_content"
  21. android:background="@drawable/composer_sleep"
  22. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  23. android:layout_alignParentBottom="true">
  24. </Button>
  25. <Button android:id="@+id/button_composer_thought"
  26. android:layout_width="wrap_content" android:layout_height="wrap_content"
  27. android:background="@drawable/composer_thought"
  28. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  29. android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_sleep">
  30. </Button>
  31. <Button android:id="@+id/button_composer_music"
  32. android:layout_width="wrap_content" android:layout_height="wrap_content"
  33. android:background="@drawable/composer_music"
  34. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  35. android:layout_alignParentBottom="true">
  36. </Button>
  37. <Button android:id="@+id/button_composer_place"
  38. android:layout_width="wrap_content" android:layout_height="wrap_content"
  39. android:background="@drawable/composer_place"
  40. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  41. android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_music">
  42. </Button>
  43. <Button android:id="@+id/button_composer_with"
  44. android:layout_width="wrap_content" android:layout_height="wrap_content"
  45. android:background="@drawable/composer_with"
  46. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  47. android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_place">
  48. </Button>
  49. <Button android:id="@+id/button_composer_camera"
  50. android:layout_width="wrap_content" android:layout_height="wrap_content"
  51. android:background="@drawable/composer_camera"
  52. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  53. android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_with">
  54. </Button>
  55. <Button android:id="@+id/button_friends_delete"
  56. android:layout_width="wrap_content" android:layout_height="wrap_content"
  57. android:background="@drawable/friends_delete"
  58. android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
  59. android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_camera">
  60. </Button>
  61. </RelativeLayout>

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

[html] 
view plain
copy

 

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

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

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

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

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


超炫的Button按钮展开弧形动画效果的更多相关文章

  1. Waves – 赞！超炫交互体验的点击动画效果

    Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...

  2. WPF技术触屏上的应用系列（六）: 视觉冲击、超炫系统主界面、系统入口效果实现

    原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...

  3. AnimCheckBox按钮点击动画效果《IT蓝豹》

    AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...

  4. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  5. css点击按钮，依次动态展开面板动画效果

    <a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...

  6. 原生html，css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  7. android imageview按钮按下动画效果

    private ImageView today_eat: today_eat = (ImageView) view.findViewById(R.id.today_eat); today_eat.se ...

  8. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  9. 优秀前端开发教程：超炫的 Mobile App 3D 演示

    今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...

随机推荐

  1. coreldraw圆形裁剪

    裁剪方法: http://zhidao.baidu.com/link?url=9-OuTkkr7igOHgKDOhJgU6iUYY5MeGEGdNXX8p6RGq79Im4va0UdMAmH4gSDz ...

  2. POJ Octal Fractions(JAVA水过)

    题目链接:id=1131" target="_blank">CLICK HERE~ 尽管java一下模拟水过,可是我看到别人的一段奇妙代码,贴出和大家共享. imp ...

  3. BZOJ 1072 [SCOI2007]安排perm 如压力DP

    意甲冠军:联系 方法:状压DP? 题解:这题事实上没啥好写的.不算非常难,推一推就能搞出来. 首先看到这个问题,对于被d整除这个条件,非常easy就想到是取余数为0,所以想到可能状态中刚開始含有取余数 ...

  4. stm32内部的CAN总线

    功能概述: bxCAN是基本扩展CAN(Basic Extended CAN)的缩写,它支持CAN协议2.0A和2.0B:它的设计目标是以最小的CPU负载来高效处理大量的报文.它也支持报文发送的优先级 ...

  5. C#中结构与类的区别

    一．类与结构的示例比较: 结构示例: public struct Person { string Name; int height; int weight public bool overWeight ...

  6. 一天一个类，一点也不累之HashSet

    最近忙着一个小项目结题,故没能按时完成[一天一个类,一点也不累],还好项目优秀,算是对自己一点点的安慰和鼓励.~~~ 今天要说的是HashSet 既然是继承自Set,那么就必须有Set的一些属性,比如 ...

  7. java--从控制台读入一些数据

    学一些东西应该,学以致用: 现在我开始使用流的办法从控制台读取数据 import java.io.*; public class Demo2{ public static void main(Stri ...

  8. Qt状态机框架

    The State Machine Framework 状态机框架提供了用于创建和执行状态图的类.概念和符号是基于Harel的Statecharts: A visual formalism for c ...

  9. android开发中防止刚进入activity时edittext获取焦点，自动弹出软键盘

    刚进入activity的时候,如果布局组件有edittext的话,往往edittext会获取焦点,自动弹出软键盘,影响整个界面的视觉效果.解决方法如下:   可以在edittext的父布局结构中(例如 ...

  10. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...