我們先來看看效果

源碼下載鏈接

https://github.com/yukunkun/RoateMenus

我的github有效果圖

很多的自定義View

點(diǎn)擊圖片實(shí)現(xiàn)動(dòng)畫讓菜單展開

參考于啟艦博客

自定義控件三部曲之動(dòng)畫篇(十)——聯(lián)合動(dòng)畫的XML實(shí)現(xiàn)與使用示例

使用屬性動(dòng)畫實(shí)現(xiàn)menus菜單,路徑可以自己參考實(shí)現(xiàn).完成自己定義大小位置.

mainactivity

package com.yukun.routemenus;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private Button mMenuButton;
private Button mItemButton1;
private Button mItemButton2;
private Button mItemButton3;
private Button mItemButton4;
private Button mItemButton5;
private boolean mIsMenuOpen = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);
    init();
}

private void init() {
    mMenuButton = (Button) findViewById(R.id.menu);
    mMenuButton.setOnClickListener(this);

    mItemButton1 = (Button) findViewById(R.id.item1);
    mItemButton1.setOnClickListener(this);

    mItemButton2 = (Button) findViewById(R.id.item2);
    mItemButton2.setOnClickListener(this);

    mItemButton3 = (Button) findViewById(R.id.item3);
    mItemButton3.setOnClickListener(this);

    mItemButton4 = (Button) findViewById(R.id.item4);
    mItemButton4.setOnClickListener(this);

    mItemButton5 = (Button) findViewById(R.id.item5);
    mItemButton5.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    if (v == mMenuButton) {
        if (!mIsMenuOpen) {
            mIsMenuOpen = true;
            AnimUtils.doAnimateOpen(mItemButton1, 0, 5, 300);
            AnimUtils.doAnimateOpen(mItemButton2, 1, 5, 300);
            AnimUtils.doAnimateOpen(mItemButton3, 2, 5, 300);
            AnimUtils.doAnimateOpen(mItemButton4, 3, 5, 300);
            AnimUtils.doAnimateOpen(mItemButton5, 4, 5, 300);
        } else {
            mIsMenuOpen = false;
            AnimUtils.doAnimateClose(mItemButton1, 0, 5, 300);
            AnimUtils.doAnimateClose(mItemButton2, 1, 5, 300);
            AnimUtils.doAnimateClose(mItemButton3, 2, 5, 300);
            AnimUtils.doAnimateClose(mItemButton4, 3, 5, 300);
            AnimUtils.doAnimateClose(mItemButton5, 4, 5, 300);
        }
    } else {
        Toast.makeText(this, "你點(diǎn)擊了", Toast.LENGTH_SHORT).show();
    }
}

}

AnimUtils方法

使用了屬性動(dòng)畫ObjectAnimator類，可以參考啟艦的博客看看

packublic class AnimUtils {

public static void doAnimateOpen(View view, int index, int total, int radius) {
    if (view.getVisibility() != View.VISIBLE) {
        view.setVisibility(View.VISIBLE);
    }
    double degree = Math.toRadians(90)/(total - 1) * index;
    int translationX = -(int) (radius * Math.sin(degree));
    int translationY = -(int) (radius * Math.cos(degree));

    AnimatorSet set = new AnimatorSet();
    //包含平移、縮放和透明度動(dòng)畫
    set.playTogether(
            ObjectAnimator.ofFloat(view, "translationX", 0, translationX),
            ObjectAnimator.ofFloat(view, "translationY", 0, translationY),
            ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f),
            ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f),
            ObjectAnimator.ofFloat(view, "alpha", 0f, 1));
    //動(dòng)畫周期為500ms
    set.setDuration(1 * 400).start();
}

public static void doAnimateClose(final View view, int index, int total,
                            int radius) {
    if (view.getVisibility() != View.VISIBLE) {
        view.setVisibility(View.VISIBLE);
    }
    double degree = Math.PI * index / ((total - 1) * 2);
    int translationX = -(int) (radius * Math.sin(degree));
    int translationY = -(int) (radius * Math.cos(degree));
    AnimatorSet set = new AnimatorSet();
    //包含平移、縮放和透明度動(dòng)畫
    set.playTogether(
            ObjectAnimator.ofFloat(view, "translationX", translationX, 0),
            ObjectAnimator.ofFloat(view, "translationY", translationY, 0),
            ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.1f), //bug
            ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.1f),
            ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));

    set.setDuration(1 * 400).start();
    }
}

布局文件如下，其實(shí)比較簡單，只是布局在一起的很多個(gè)按鈕

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yukun.routemenus.MainActivity">
<Button
    android:id="@+id/menu"
    style="@style/MenuStyle"
    android:background="@drawable/menu"/>

<Button
    android:id="@+id/item1"
    style="@style/MenuItemStyle"
    android:background="@drawable/circle5"
    android:visibility="gone"/>

<Button
    android:id="@+id/item2"
    style="@style/MenuItemStyle"
    android:background="@drawable/circle3"
    android:visibility="gone"/>

<Button
    android:id="@+id/item3"
    style="@style/MenuItemStyle"
    android:background="@drawable/circle2"
    android:visibility="gone"/>

<Button
    android:id="@+id/item4"
    style="@style/MenuItemStyle"
    android:background="@drawable/circle4"
    android:visibility="gone"/>

<Button
    android:id="@+id/item5"
    style="@style/MenuItemStyle"
    android:background="@drawable/circle1"
    android:visibility="gone"/>

  </FrameLayout>