话不多说先看效果！
newMenu.gif
1.实现效果
在前几天更的那篇博客中，写了一个下弹菜单，相对来说，下弹菜单只是简单的将图标沿着Y轴的方向上下移动，今天我来给大家介绍一直更加炫酷的菜单，当我们点击菜单时，除了点击的图片不动以外，其他图标呈辐射状向四周散开，这里就涉及到数学的基本不功了，数学不好的同学也不要着急，下面我给你们讲：
2.原理
根据圆的半径来定位每一张图片的具体位置
根据图片的数量来确定两张图片之间的夹角：avgAngle
由此可以计算出x轴和y轴的距离
-int translationX = -(int)(200Math.sin(angle));
-int translationY = -(int)(200Math.cos(angle));
200为圆的半径
3.步骤
1.我们要确定每个图片之间的间隔夹角
2.根据间隔夹角计算出每个图标的具体位置
3.再根据间隔角度来计算出每个图片的水平位移(x轴)和竖直位移(y轴)
4.代码部分
1.java代码
package com.example.newmenu;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
public class nweMainActivity extends AppCompatActivity {
/**
* 一.先获取xml里面的每个图片视图
* --用一个数组来保存所有视图的id
* --用一个数组来保存所有id对应的视图
* 二，将每个id对应的视图读取出来，再保存到imgaageView里
* 三，定义一个变量(isOpen)来记录按钮的状态
*/
//保存视图id的数组
private int[] resID = {R.id.iv_a,R.id.iv_b,R.id.iv_c,R.id.iv_d,R.id.iv_e,R.id.iv_f,R.id.iv_g,R.id.iv_h,R.id.iv_i,R.id.iv_j,R.id.iv_k,R.id.iv_n};
//定义保存所有id对应的视图数组
private List<ImageView> imageViews = new ArrayList<>();
//定义一个变量(isOpen)来记录按钮的状态
private boolean isOpen = false;//初始状态为关闭
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_nwe_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
//将每个id对应的视图读取出来，再保存到imgaageView里
for (int i=0;i<resID.length;i++){
int id = resID[i];
ImageView img = findViewById(id);
imageViews.add(img);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_nwe_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void imgClick(View view) {
//用来判断是否被点击
if (isOpen==true){
//说明处于打开状态，调用关闭函数
close();
}else{
//说明处于关闭状态，调用打开函数
open();
}
isOpen=!isOpen;
}
//定义打开动画
private void open(){
//1.要遍历所有视图，i=1是为了让第一张图片保持不动
for (int i = 1;i<imageViews.size();i++){
//取出每张图片
ImageView iv = imageViews.get(i);
//计算每个图标之间的夹角
double avgAngle = (90/(imageViews.size()-1));
//计算出每个图标的角度
double angle = avgAngle*i;
//计算每个图标的x位移
int translationX = -(int)(200*Math.sin(angle));
//计算每个图标的y位移
int translationY = -(int)(200*Math.cos(angle));
//给图片添加动画
ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(iv,"translationX",0f,translationX);
ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(iv,"translationY",0f,translationY);
//new一个对象 Animator为组合动画
AnimatorSet animatorSet = new AnimatorSet();
//设置动画过程的时长
animatorSet.setDuration(1000);
//添加弹性效果
animatorSet.setInterpolator(new BounceInterpolator());
//使动画在x轴和y轴同时移动
animatorSet.play(objectAnimatorX).with(objectAnimatorY);
animatorSet.start();
}
}
private void close(){
//1.要遍历所有视图
for (int i = 1;i<imageViews.size();i++){
//取出每张图片
ImageView iv = imageViews.get(i);
//计算每个图标之间的夹角
double avgAngle = (90/(imageViews.size()-1));
//计算出每个图标的角度
double angle = avgAngle*i;
//计算每个图标的x位移
int translationX = -(int)(200*Math.sin(angle));
//计算每个图标的y位移
int translationY = -(int)(200*Math.cos(angle));
ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(iv,"translationX",translationX,0f);
ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(iv,"translationY",translationY,0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
animatorSet.play(objectAnimatorX).with(objectAnimatorY);
animatorSet.start();
}
}
}
2.xml布局代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.newmenu.nweMainActivity"
tools:showIn="@layout/activity_nwe_main">
<ImageView
android:id="@+id/iv_h"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/h"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_g"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/g"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_f"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/f"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_e"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/e"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_d"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/d"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_c"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/c"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_b"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/b"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_i"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/b"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_j"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/b"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_k"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/b"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_n"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/b"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_a"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@mipmap/a"
android:layout_centerInParent="true"
android:onClick="imgClick"
/>
</RelativeLayout>
5.用到的属性动画值
![I]0HPA_2ZV(HTBA1O4}B]SA.jpg](https://img.haomeiwen.com/i18945157/ed96cf0f7d4d0f2e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
网友评论