▲ Android 自定义可收缩的菜单

先给各位大爷们看一下 我要实现的效果 =_=!

大家肯定会说这有什么难的？so easy 这不就是弄个渐变缩放动画 来显示固定好的 5个按钮嘛。

但是我这里要说的是通过计算来实现这个效果，很6的做法

实现原理
先根据圆的半径来定位每一张图片的位置

然后大家可以清晰的看出
X轴的移动距离 = radius sin(a)
Y轴的移动距离 = radiuscos(a) ------------- radius 是半径，a是夹角的度数

实现过程
【1】先要确定这个a是多少度？
菜单的夹角和是90°，共有5个菜单项，相当于把90°分为4等份。一个夹角的度数大约是22° (90/4=22)
然后第一个菜单的夹角是0°，第二个菜单的夹角是22° 第三个菜单的夹角是(222)° ,第四个菜单的夹角是 (223)°,第五个菜单的夹角是(22*4)°

假设index表示当前位置的索引，从0开始，第一个索引就是0，第二个就是1… 所以当前菜单与Y轴之间的夹角就是(22*index)°

【2】如何计算对应的正弦值，余弦值？

这几个可以放心，因为Java中有个一Math类，该类有三个函数已经帮咱们处理好了

//对应弧度的正弦值
double sin (double d)

//对应弧度的余弦值
double cos (double d)

//对应弧度的正切值
double tan（double d）

**注意一点啊，这个三个函数输入的参数不是度数，而是度数对应的弧度值 **

啥叫弧度值？ 如图↓ 画的太low =_=!

获取弧度有2中方法

第一种呢，Math类中Math.PI不仅代表圆周率π，也代表180°所对应的弧度值，所以Math.sin(Math.PI)就是180°的正弦值，/2就是90°的正玄值了。

第二种就是 根据度数来获取弧度值，Math中提供了一个函数

double toReadians(double angdeg)

代码实现

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp">

        <Button
            android:id="@+id/item1"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/ice"
            android:visibility="gone" />
        <Button
            android:id="@+id/item2"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icb"
            android:visibility="gone" />

        <Button
            android:id="@+id/item3"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icc"
            android:visibility="gone" />

        <Button
            android:id="@+id/item4"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icd"
            android:visibility="gone" />

        <Button
            android:id="@+id/item5"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icf"
            android:visibility="gone" />


        <Button
            android:id="@+id/menu"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/ica" />
    </FrameLayout>
</LinearLayout>

java代码 实现

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_b);
        Button menu = findViewById(R.id.menu);
        item1 = findViewById(R.id.item1);
        item2 = findViewById(R.id.item2);
        item3 = findViewById(R.id.item3);
        item4 = findViewById(R.id.item4);
        item5 = findViewById(R.id.item5);
        menu.setOnClickListener(this);
        item1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"第一个条目",Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.menu:
                if (!mIsMenuOpen) {
                    mIsMenuOpen = true;
                    oPenMenu();
                } else {
                    mIsMenuOpen = false;
                    closeMenu();
                }
                break;
        }
    }

    private void oPenMenu() {
        doAnimateOpen(item1, 0, 5, 300);
        doAnimateOpen(item2, 1, 5, 300);
        doAnimateOpen(item3, 2, 5, 300);
        doAnimateOpen(item4, 3, 5, 300);
        doAnimateOpen(item5, 4, 5, 300);
    }

    private 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();
        //包括平移 缩放 透明 动画
        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, 1f));
        set.setDuration(800).start();
    }

    private void closeMenu() {
        doAnimateClose(item1,0,5,300);
        doAnimateClose(item2,1,5,300);
        doAnimateClose(item3,2,5,300);
        doAnimateClose(item4,3,5,300);
        doAnimateClose(item5,4,5,300);
    }

    private void doAnimateClose(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();
        //包括平移 缩放 透明 动画
        set.playTogether(ObjectAnimator.ofFloat(view, "translationX", translationX,0),
                ObjectAnimator.ofFloat(view, "translationY", translationY,0),
                ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));
        set.setDuration(800).start();
    }

最后是源码地址 https://download.csdn.net/download/macaopark/10658331