Android炫酷動畫菜單

話不多說先看效果！

newMenu.gif

1.實現(xiàn)效果

在前幾天更的那篇博客中，寫了一個下彈菜單，相對來說，下彈菜單只是簡單的將圖標(biāo)沿著Y軸的方向上下移動，今天我來給大家介紹一直更加炫酷的菜單，當(dāng)我們點擊菜單時，除了點擊的圖片不動以外，其他圖標(biāo)呈輻射狀向四周散開，這里就涉及到數(shù)學(xué)的基本不功了，數(shù)學(xué)不好的同學(xué)也不要著急，下面我給你們講：

2.原理

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

根據(jù)圓的半徑來定位每一張圖片的具體位置
根據(jù)圖片的數(shù)量來確定兩張圖片之間的夾角：avgAngle
由此可以計算出x軸和y軸的距離

-int translationX = -(int)(200Math.sin(angle));
-int translationY = -(int)(200Math.cos(angle));

200為圓的半徑

3.步驟

1.我們要確定每個圖片之間的間隔夾角
2.根據(jù)間隔夾角計算出每個圖標(biāo)的具體位置
3.再根據(jù)間隔角度來計算出每個圖片的水平位移(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里面的每個圖片視圖
     *      --用一個數(shù)組來保存所有視圖的id
     *      --用一個數(shù)組來保存所有id對應(yīng)的視圖
     * 二，將每個id對應(yīng)的視圖讀取出來，再保存到imgaageView里
     * 三，定義一個變量(isOpen)來記錄按鈕的狀態(tài)
     */
    //保存視圖id的數(shù)組
    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對應(yīng)的視圖數(shù)組
    private List<ImageView> imageViews = new ArrayList<>();
    //定義一個變量(isOpen)來記錄按鈕的狀態(tài)
    private boolean isOpen = false;//初始狀態(tài)為關(guān)閉

    @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對應(yīng)的視圖讀取出來，再保存到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){
            //說明處于打開狀態(tài)，調(diào)用關(guān)閉函數(shù)
            close();
        }else{
            //說明處于關(guān)閉狀態(tài)，調(diào)用打開函數(shù)
            open();
        }
        isOpen=!isOpen;
    }
    //定義打開動畫
    private void open(){
        //1.要遍歷所有視圖，i=1是為了讓第一張圖片保持不動
        for (int i = 1;i<imageViews.size();i++){
            //取出每張圖片
            ImageView iv = imageViews.get(i);
            //計算每個圖標(biāo)之間的夾角
            double avgAngle = (90/(imageViews.size()-1));
            //計算出每個圖標(biāo)的角度
            double angle = avgAngle*i;
            //計算每個圖標(biāo)的x位移
            int translationX = -(int)(200*Math.sin(angle));
            //計算每個圖標(biāo)的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();
            //設(shè)置動畫過程的時長
            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);
            //計算每個圖標(biāo)之間的夾角
            double avgAngle = (90/(imageViews.size()-1));
            //計算出每個圖標(biāo)的角度
            double angle = avgAngle*i;
            //計算每個圖標(biāo)的x位移
            int translationX = -(int)(200*Math.sin(angle));
            //計算每個圖標(biāo)的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://upload-images.jianshu.io/upload_images/18945157-ed96cf0f7d4d0f2e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

6.結(jié)語

盡管前幾天寫過了下彈菜單，但是今天寫這個起來還是有點難，由于對各種方法的不熟悉，只能在網(wǎng)上查找方法以及使用說明，浪費了不少時間，但是也學(xué)會了很多東西，當(dāng)程序能按自己想象中的狀態(tài)運行起來時還是很開心的。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容