利用ObjectAnimator實現(xiàn)ArcMenu

本文介紹利用ObjectAnimator簡單地實現(xiàn)ArcMenu屑埋，直接使用本文的ArcMenu類即可快捷地實現(xiàn)菜單功能碾阁。

最終使用效果

先看下最終的使用效果：

private int[] imageRes = {R.id.img_menu, R.id.img_menu1, R.id.img_menu2, R.id.img_menu3, R.id.img_menu4, R.id.img_menu5};
private ArcMenu arcMenu;
...
//初始化，參數(shù)為資源圖片id
 arcMenu = new ArcMenu(this, imageRes);

//點擊事件予权，這邊使用了annotation昂勉，直接使用findViewById然后設(shè)置監(jiān)聽事件也可以
    @Click
    public void img_menu() {
        mylog.d(" @Click img_menu");
        arcMenu.switchMenu();
    }

    @Click
    public void img_menu1() {
        arcMenu.clickItem();
        mylog.d(" @Click img_menu1");
    }

    @Click
    public void img_menu2() {
        arcMenu.clickItem();
        mylog.d(" @Click img_menu2");
    }

    @Click
    public void img_menu3() {
        arcMenu.clickItem();
        mylog.d(" @Click img_menu3");
    }

    @Click
    public void img_menu4() {
        arcMenu.clickItem();
        mylog.d(" @Click img_menu4");
    }

    @Click
    public void img_menu5() {
        arcMenu.clickItem();
        mylog.d(" @Click img_menu5");
    }

布局文件中，將需要用到的圖片放在同一位置扫腺。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget33"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#262a34">

    <ImageView
        android:id="@+id/img_menu"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/menu_add" />

    <ImageView
        android:id="@+id/img_menu1"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/float_on" />

    <ImageView
        android:id="@+id/img_menu2"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/float_on" />

    <ImageView
        android:id="@+id/img_menu3"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/float_on" />

    <ImageView
        android:id="@+id/img_menu4"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/float_on" />

    <ImageView
        android:id="@+id/img_menu5"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/float_on" />

</RelativeLayout>

下面為截圖;

ArcMenu

具體實現(xiàn)

初始化岗照，通過imageRes的數(shù)量設(shè)置相鄰兩個圖標之間的角度，同時將imageView加入imageViewList中笆环，方便后面使用

public class ArcMenu {
    private Activity context;
    private int[] imageRes;
    private List<ImageView> imageViewList = new ArrayList<>();
    private boolean isShowMenu = false;
    int radius = 180;
    double angle;

    public ArcMenu(Activity context, int[] imageRes) {
        angle = Math.PI / 2 / (imageRes.length - 2);
        radius = Tool.dip2px(context, radius);
        this.context = context;
        this.imageRes = imageRes;
        for (int imagRe : imageRes) {
            ImageView imageView = (ImageView) context.findViewById(imagRe);
            imageViewList.add(imageView);
        }
    }
}

菜單彈出動畫攒至，使用ObjectAnimator，對每一個圖標進行平移操作躁劣，第0個圖標為菜單開關(guān)迫吐，加入旋轉(zhuǎn)動畫。

private void openMenu() {
        isShowMenu = true;
        setItemVisible(true);
        ObjectAnimator animator1;
        ObjectAnimator animator2;
        List<ObjectAnimator> objectAnimators = new ArrayList<>();
        AnimatorSet set = new AnimatorSet();

        for (int i = 1; i < imageRes.length; i++) {
            animator1 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", (float) (-radius * Math.sin(angle * (i-1))));
            animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", (float) (-radius * Math.cos(angle * (i-1))));
            objectAnimators.add(animator1);
            objectAnimators.add(animator2);
        }

        for (int i = 0; i < objectAnimators.size(); i++) {
            set.playTogether(objectAnimators.get(i));
        }
        set.setDuration(200);
        set.start();
        //第0個圖標账忘，菜單圖標志膀，加入動畫
        ObjectAnimator.ofFloat(imageViewList.get(0),"rotation",0,135f).setDuration(200).start();
    }

同理，關(guān)閉菜單

private void closeMenu() {
        isShowMenu = false;
        ObjectAnimator animator1 = null;
        ObjectAnimator animator2;
        List<ObjectAnimator> objectAnimators = new ArrayList<>();
        AnimatorSet set = new AnimatorSet();

        for (int i = 1; i < imageRes.length; i++) {
            animator1 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX",  0);
            animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY",  0);
            objectAnimators.add(animator1);
            objectAnimators.add(animator2);
        }

        animator1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                setItemVisible(false);
                super.onAnimationEnd(animation);
            }
        });

        for (int i = 0; i < objectAnimators.size(); i++) {
            set.playTogether(objectAnimators.get(i));
        }

        set.setDuration(200);
        set.start();
        ObjectAnimator.ofFloat(imageViewList.get(0),"rotation",135f,0).setDuration(200).start();
    }

切換菜單開關(guān)

 public void switchMenu() {
        if (isShowMenu) {
            closeMenu();
        } else {
            openMenu();
        }
    }

圖標被點擊后鳖擒，將所有子圖標隱藏溉浙，同時調(diào)用closMenu()，將圖片移回原處蒋荚。

public void clickItem() {
        setItemVisible(false);
        closeMenu();
    }

    private void setItemVisible(boolean isVisible) {
        for (int i = 1; i < imageRes.length; i++)  {
            if (isVisible) {
                imageViewList.get(i).setVisibility(View.VISIBLE);
            } else {
                imageViewList.get(i).setVisibility(View.GONE);
            }
        }
    }

總結(jié)

至此戳稽，整個功能大致完成。
現(xiàn)有的功能默認arcmenu為界面右下角圆裕，其他位置相應(yīng)地修改公式即可以實現(xiàn)广鳍，可自行進行拓展荆几，兼容不同位置。