android 爆炸按钮,Android实现爆炸式菜单按钮弹出效果

最近项目要使用到点击一个按钮弹出多个按钮的效果,在试了几个类库后感觉不是很理想,所以自己代码实现了一个,下图所示:

36111876f1ee1a1924a64dcaf3952a22.gif

实现原理很简单,就是利用android原声动画效果,当点击中心按钮时弹出其余按钮。闲话少叙,代码如下。

第一步:activity_main.xml 很简单,也就是五个相同位置的按钮

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:src="@drawable/im"

android:background="@android:color/transparent"/>

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:visibility="invisible"

android:src="@drawable/i"

android:background="@android:color/transparent"/>

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:src="@drawable/ii"

android:visibility="invisible"

android:background="@android:color/transparent"/>

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:src="@drawable/iii"

android:visibility="invisible"

android:background="@android:color/transparent"/>

android:id="@+id/button4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_margin="10dp"

android:src="@drawable/iiii"

android:visibility="invisible"

android:background="@android:color/transparent" />

第二步:MainActivity

package com.example.boombuttons;

import java.util.ArrayList;

public class MainActivity extends Activity implements OnClickListener{

// 中心按钮

private ImageButton button;

// 四个子按钮

private ImageButton button1;

private ImageButton button2;

private ImageButton button3;

private ImageButton button4;

// 子按钮列表

private List buttonItems = new ArrayList(3);

// 标识当前按钮弹出与否,1代表已经未弹出,-1代表已弹出

private int flag = 1;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 实例化按钮并设立监听

button = (ImageButton)findViewById(R.id.button);

button.setOnClickListener(this);

button1 = (ImageButton)findViewById(R.id.button1);

button2 = (ImageButton)findViewById(R.id.button2);

button3 = (ImageButton)findViewById(R.id.button3);

button4 = (ImageButton)findViewById(R.id.button4);

// 将子按钮们加入列表中

buttonItems.add(button1);

buttonItems.add(button2);

buttonItems.add(button3);

buttonItems.add(button4);

}

/**

* 按钮移动动画

* @params 子按钮列表

* @params 弹出时圆形半径radius

*/

public void buttonAnimation(List buttonList,int radius){

for(int i=0;i

ObjectAnimator objAnimatorX;

ObjectAnimator objAnimatorY;

ObjectAnimator objAnimatorRotate;

// 将按钮设为可见

buttonList.get(i).setVisibility(View.VISIBLE);

// 按钮在X、Y方向的移动距离

float distanceX = (float) (flag*radius*(Math.cos(Util.getAngle(buttonList.size(),i))));

float distanceY = -(float) (flag*radius*(Math.sin(Util.getAngle(buttonList.size(),i))));

// X方向移动

objAnimatorX = ObjectAnimator.ofFloat(buttonList.get(i), "x", buttonList.get(i).getX(),buttonList.get(i).getX()+distanceX);

objAnimatorX.setDuration(200);

objAnimatorX.setStartDelay(100);

objAnimatorX.start();

// Y方向移动

objAnimatorY = ObjectAnimator.ofFloat(buttonList.get(i), "y", buttonList.get(i).getY(),buttonList.get(i).getY()+distanceY);

objAnimatorY.setDuration(200);

objAnimatorY.setStartDelay(100);

objAnimatorY.start();

// 按钮旋转

objAnimatorRotate = ObjectAnimator.ofFloat(buttonList.get(i), "rotation", 0, 360);

objAnimatorRotate.setDuration(200);

objAnimatorY.setStartDelay(100);

objAnimatorRotate.start();

if(flag==-1){

objAnimatorX.addListener(new AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

// TODO Auto-generated method stub

}

@Override

public void onAnimationRepeat(Animator animation) {

// TODO Auto-generated method stub

}

@Override

public void onAnimationEnd(Animator animation) {

// TODO Auto-generated method stub

// 将按钮设为可见

for (int i = 0; i < buttonItems.size(); i++) {

buttonItems.get(i).setVisibility(View.INVISIBLE);

}

}

@Override

public void onAnimationCancel(Animator animation) {

// TODO Auto-generated method stub

}

});

}

}

}

}

第三步:Util.java 工具类,写了一个静态方法,用于通过按钮个数和按钮在列表中的索引计算其弹出角度。

public class Util {

/**

* 返回每个按钮应该出现的角度(弧度单位)

* @param index

* @return double 角度(弧度单位)

*/

public static double getAngle(int total,int index){

return Math.toRadians(90/(total-1)*index+90);

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值