Android炫酷动画菜单

话不多说先看效果！

newMenu.gif

1.实现效果

在前几天更的那篇博客中，写了一个下弹菜单，相对来说，下弹菜单只是简单的将图标沿着Y轴的方向上下移动，今天我来给大家介绍一直更加炫酷的菜单，当我们点击菜单时，除了点击的图片不动以外，其他图标呈辐射状向四周散开，这里就涉及到数学的基本不功了，数学不好的同学也不要着急，下面我给你们讲：

2.原理

![LJ)$PLSE_B2T%O~CLU)WD8.png

根据圆的半径来定位每一张图片的具体位置

根据图片的数量来确定两张图片之间的夹角：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)

6.结语

尽管前几天写过了下弹菜单，但是今天写这个起来还是有点难，由于对各种方法的不熟悉，只能在网上查找方法以及使用说明，浪费了不少时间，但是也学会了很多东西，当程序能按自己想象中的状态运行起来时还是很开心的。