超炫的Button按钮展开弧形动画效果
----------------------收藏备用 -------------------------------
代码下载:http://download.csdn.net/detail/qq263229365/5622693
今天从网上看到一个这样的效果,感觉很有创意,自己也搜集了一些资料,仿照着实现了一下。
下面就直接上源码:
首先看一下布局文件:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout android:layout_width="fill_parent"
- android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
- android:background="#ffffff">
- <ImageView android:layout_width="wrap_content"
- android:layout_height="fill_parent" android:background="@drawable/splash_shadow"
- android:layout_marginLeft="50dip" />
- <RelativeLayout android:id="@+id/relativeLayout_top_bar"
- android:layout_width="fill_parent" android:layout_height="40dip"
- android:background="@drawable/qa_bar">
- <ImageView android:layout_width="60dip"
- android:layout_height="20dip" android:background="@drawable/qa_logo"
- android:layout_centerInParent="true" />
- </RelativeLayout>
- <TextView android:layout_below="@id/relativeLayout_top_bar"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:textSize="20sp" android:text="Tap to Refresh"
- android:layout_centerHorizontal="true" android:layout_marginTop="50dip" android:textStyle="bold"/>
- <Button android:id="@+id/button_composer_sleep"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_sleep"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true">
- </Button>
- <Button android:id="@+id/button_composer_thought"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_thought"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_sleep">
- </Button>
- <Button android:id="@+id/button_composer_music"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_music"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true">
- </Button>
- <Button android:id="@+id/button_composer_place"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_place"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_music">
- </Button>
- <Button android:id="@+id/button_composer_with"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_with"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_place">
- </Button>
- <Button android:id="@+id/button_composer_camera"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/composer_camera"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_with">
- </Button>
- <Button android:id="@+id/button_friends_delete"
- android:layout_width="wrap_content" android:layout_height="wrap_content"
- android:background="@drawable/friends_delete"
- android:layout_marginBottom="10dip" android:layout_marginLeft="10dip"
- android:layout_alignParentBottom="true" android:layout_above="@id/button_composer_camera">
- </Button>
- </RelativeLayout>
实现button按钮动画效果的核心类:
- package cn.com.kar.test;
- import android.R.anim;
- import android.app.Activity;
- import android.os.Bundle;
- import android.util.Log;
- import android.view.Display;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.animation.Animation;
- import android.view.animation.RotateAnimation;
- import android.view.animation.ScaleAnimation;
- import android.view.animation.TranslateAnimation;
- import android.view.animation.Animation.AnimationListener;
- import android.widget.Button;
- import android.widget.RelativeLayout.LayoutParams;
- public class PathButtonActivity extends Activity
- {
- private Button buttonCamera, buttonDelete, buttonWith, buttonPlace, buttonMusic, buttonThought, buttonSleep;
- private Animation animationTranslate, animationRotate, animationScale;
- private static int width, height;
- private LayoutParams params = new LayoutParams(0, 0);
- private static Boolean isClick = false;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.path_button);
- initialButton();
- }
- private void initialButton()
- {
- // TODO Auto-generated method stub
- Display display = getWindowManager().getDefaultDisplay();
- height = display.getHeight();
- width = display.getWidth();
- Log.v("width & height is:", String.valueOf(width) + ", " + String.valueOf(height));
- params.height = 50;
- params.width = 50;
- //设置边距 (int left, int top, int right, int bottom)
- params.setMargins(10, height - 98, 0, 0);
- buttonSleep = (Button) findViewById(R.id.button_composer_sleep);
- buttonSleep.setLayoutParams(params);
- buttonThought = (Button) findViewById(R.id.button_composer_thought);
- buttonThought.setLayoutParams(params);
- buttonMusic = (Button) findViewById(R.id.button_composer_music);
- buttonMusic.setLayoutParams(params);
- buttonPlace = (Button) findViewById(R.id.button_composer_place);
- buttonPlace.setLayoutParams(params);
- buttonWith = (Button) findViewById(R.id.button_composer_with);
- buttonWith.setLayoutParams(params);
- buttonCamera = (Button) findViewById(R.id.button_composer_camera);
- buttonCamera.setLayoutParams(params);
- buttonDelete = (Button) findViewById(R.id.button_friends_delete);
- buttonDelete.setLayoutParams(params);
- buttonDelete.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- if(isClick == false)
- {
- isClick = true;
- buttonDelete.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));
- buttonCamera.startAnimation(animTranslate(0.0f, -180.0f, 10, height - 240, buttonCamera, 80));
- buttonWith.startAnimation(animTranslate(30.0f, -150.0f, 60, height - 230, buttonWith, 100));
- buttonPlace.startAnimation(animTranslate(70.0f, -120.0f, 110, height - 210, buttonPlace, 120));
- buttonMusic.startAnimation(animTranslate(80.0f, -110.0f, 150, height - 180, buttonMusic, 140));
- buttonThought.startAnimation(animTranslate(90.0f, -60.0f, 175, height - 135, buttonThought, 160));
- buttonSleep.startAnimation(animTranslate(170.0f, -30.0f, 190, height - 90, buttonSleep, 180));
- }
- else
- {
- isClick = false;
- buttonDelete.startAnimation(animRotate(90.0f, 0.5f, 0.45f));
- buttonCamera.startAnimation(animTranslate(0.0f, 140.0f, 10, height - 98, buttonCamera, 180));
- buttonWith.startAnimation(animTranslate(-50.0f, 130.0f, 10, height - 98, buttonWith, 160));
- buttonPlace.startAnimation(animTranslate(-100.0f, 110.0f, 10, height - 98, buttonPlace, 140));
- buttonMusic.startAnimation(animTranslate(-140.0f, 80.0f, 10, height - 98, buttonMusic, 120));
- buttonThought.startAnimation(animTranslate(-160.0f, 40.0f, 10, height - 98, buttonThought, 80));
- buttonSleep.startAnimation(animTranslate(-170.0f, 0.0f, 10, height - 98, buttonSleep, 50));
- }
- }
- });
- buttonCamera.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonCamera.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- buttonWith.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonWith.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- buttonPlace.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonPlace.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- buttonMusic.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonMusic.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- buttonThought.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonThought.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonSleep.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- buttonSleep.setOnClickListener(new OnClickListener()
- {
- @Override
- public void onClick(View v)
- {
- // TODO Auto-generated method stub
- buttonSleep.startAnimation(setAnimScale(2.5f, 2.5f));
- buttonPlace.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonWith.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonCamera.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonMusic.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonThought.startAnimation(setAnimScale(0.0f, 0.0f));
- buttonDelete.startAnimation(setAnimScale(0.0f, 0.0f));
- }
- });
- }
- protected Animation setAnimScale(float toX, float toY)
- {
- // TODO Auto-generated method stub
- animationScale = new ScaleAnimation(1f, toX, 1f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.45f);
- animationScale.setInterpolator(PathButtonActivity.this, anim.accelerate_decelerate_interpolator);
- animationScale.setDuration(500);
- animationScale.setFillAfter(false);
- return animationScale;
- }
- protected Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue)
- {
- // TODO Auto-generated method stub
- animationRotate = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);
- animationRotate.setAnimationListener(new AnimationListener()
- {
- @Override
- public void onAnimationStart(Animation animation)
- {
- // TODO Auto-generated method stub
- }
- @Override
- public void onAnimationRepeat(Animation animation)
- {
- // TODO Auto-generated method stub
- }
- @Override
- public void onAnimationEnd(Animation animation)
- {
- // TODO Auto-generated method stub
- animationRotate.setFillAfter(true);
- }
- });
- return animationRotate;
- }
- //移动的动画效果
- /*
- * TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
- *
- * float fromXDelta:这个参数表示动画开始的点离当前View X坐标上的差值;
- *
- * float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值;
- *
- * float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值;
- *
- * float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值;
- */
- protected Animation animTranslate(float toX, float toY, final int lastX, final int lastY,
- final Button button, long durationMillis)
- {
- // TODO Auto-generated method stub
- animationTranslate = new TranslateAnimation(0, toX, 0, toY);
- animationTranslate.setAnimationListener(new AnimationListener()
- {
- @Override
- public void onAnimationStart(Animation animation)
- {
- // TODO Auto-generated method stub
- }
- @Override
- public void onAnimationRepeat(Animation animation)
- {
- // TODO Auto-generated method stub
- }
- @Override
- public void onAnimationEnd(Animation animation)
- {
- // TODO Auto-generated method stub
- params = new LayoutParams(0, 0);
- params.height = 50;
- params.width = 50;
- params.setMargins(lastX, lastY, 0, 0);
- button.setLayoutParams(params);
- button.clearAnimation();
- }
- });
- animationTranslate.setDuration(durationMillis);
- return animationTranslate;
- }
- }
其实就是在button点击的时候播放Tween动画。
这样就基本完成,参照上面的代码 自己也可以自行修改成自己喜欢的样式。
看一下在我手机上运行的效果:
代码下载:http://download.csdn.net/detail/qq263229365/5622693
超炫的Button按钮展开弧形动画效果的更多相关文章
- Waves – 赞!超炫交互体验的点击动画效果
Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...
- WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现
原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...
- AnimCheckBox按钮点击动画效果《IT蓝豹》
AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- css点击按钮,依次动态展开面板动画效果
<a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...
- 原生html,css+js写下载按钮有提示动画效果的落地页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- android imageview按钮按下动画效果
private ImageView today_eat: today_eat = (ImageView) view.findViewById(R.id.today_eat); today_eat.se ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- 优秀前端开发教程:超炫的 Mobile App 3D 演示
今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...
随机推荐
- 基于visual Studio2013解决C语言竞赛题之0604二维数组置换
题目
- 无线网络wifi (WPA/WPA2)密码破解方法
无线网络password破解WPA/WPA2教程 本教程用于探索无线路由安全漏洞,禁止用于非法用途,违者法律必究(与我无关) 在动手破解WPA/WPA2前,应该先了解一下基础知识,本文适合新手阅读 首 ...
- POJ 2777 线段树基础题
题意: 给你一个长度为N的线段数,一开始每个树的颜色都是1,然后有2个操作. 第一个操作,将区间[a , b ]的颜色换成c. 第二个操作,输出区间[a , b ]不同颜色的总数. 直接线段树搞之.不 ...
- SQL 局域网远程备份
局域网远程备份,还真有点问题 我用的是2003,发现sql和windows兼容不太好 . 如果我在windows下面映射远程目录,sql发现不了,找不到路径,备份不了,在sql下映射远程目录,win ...
- JavaScript 字符串编码函数
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- Chrome 快捷键
chrome窗口和标签页快捷键: Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件 在谷歌浏览器中打开计算机上的文件 ...
- TimeUnit
转http://blog.csdn.net/hudashi/article/details/6936604 public enum TimeUnitextends Enum<TimeUnit&g ...
- 相邻数字的基数不等比:skew数
2973:Skew数 描述在 skew binary表示中, 第 k 位的值xk表示xk*(2k+1-1). 每个位上的可能数字是0 或 1,最后面一个非零位可以是2, 例如, 10120(skew) ...
- Learning Lua Programming (4) Cocos2d-x中Lua编程(一)
刚开始接触cocos2d-x 下的Lua编程,主要参看了李华明大神的博客中的介绍,http://blog.csdn.net/xiaominghimi/article/category/1155088 ...
- Java中的字符串驻留
转自:http://www.cdtarena.com/javapx/201307/9088.html 最近在工作的时候,一句再正常不过的代码String a = “hello” + “world”;被 ...