menu展开动画（属性动画）

好伤心啊，webm转化成的pdf在简书上居然无法正常播放，我要怎么给宝宝们展示动态效果呢，蓝瘦香菇...上截图~~

Screenshot_1561041389.png Screenshot_1561041395.png Screenshot_1561041444.png

嗯啦嗯啦，安啦，那个🍵在冒烟儿，是均匀分布的啦！
怎么实现的呢？so easy！
布局首先是个FrameLayout，里面有包含8个imageview,一起堆在左上角，布局文件如下：

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

    <ImageView
        android:id="@+id/iv_b"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/b" />

    <ImageView
        android:id="@+id/iv_c"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/c" />

    <ImageView
        android:id="@+id/iv_d"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/d" />

    <ImageView
        android:id="@+id/iv_e"
        android:layout_width="50dp"
        android:layout_margin="10dp"
        android:layout_height="50dp"
        android:contentDescription="@null"
        android:src="@drawable/e" />

    <ImageView
        android:id="@+id/iv_f"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/f" />

    <ImageView
        android:id="@+id/iv_g"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/g" />

    <ImageView
        android:id="@+id/iv_h"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:contentDescription="@null"
        android:src="@drawable/h" />

    <ImageView
        android:id="@+id/iv_a"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:contentDescription="@null"
        android:src="@drawable/a" />
</FrameLayout>

然后在我们的页面里面把这些imageView放到一个集合里面：

 private int[] resIds = {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};
    private List<ImageView> imageViews = new ArrayList<>();

  for (int resId : resIds) {
            ImageView imageView = findViewById(resId);
            imageView.setOnClickListener(this);
            imageViews.add(imageView);
        }

然后对iv_a这个设置一个点击事件，点一下展开menu，再点一下关闭menu。
一言不合上代码....
先说垂直展开菜单这个，设置Y轴偏移量根据i值变化，就可以程序上图那种萌萌哒的状态啦：

 private void openMenu() {
        for (int i = 1; i < resIds.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(imageViews.get(i), "translationY",
                    0F, i * 300F);
            animator.setDuration(500);
            animator.setInterpolator(new AccelerateInterpolator());
//            animator.setStartDelay(i*300);
            animator.start();
        }
        expand = true;
    }

关上！把这个菜单关上就是把所有的偏移量从现在的偏移量恢复成0：

   private void closeMenu() {
        for (int i = 1; i < resIds.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(imageViews.get(i), "translationY",
                    i * 300F, 0F);
            animator.setDuration(500);
            animator.setInterpolator(new AccelerateInterpolator());
//            animator.setStartDelay(i*300);
            animator.start();
        }
        expand = false;
    }

这里我解释一下 ObjectAnimator.ofFloat里面的几个参数，第一个参数是target，就是需要进行动画操作的目标，没错，就是这些imageView啦，第二个参数，需要改变的属性，没错，就是我们的Y轴偏移量TranslationY啦，后面的属性就是values，就是我们的属性值从哪个值变化到哪个值，可以清楚地看到展开菜单和关闭菜单的不同就是属性值的变化不同，展开是从0→i300，关闭时从i300→0。

setDuration就是动画从开始到结束这个时间长短。
setInterpolator就是动画的插值器，设置动画变化的规律，有9个默认的插值器，这里用的是默认的加速插值器AccelerateInterpolator，还有减速啊，回弹啊等等之类的，好的插值器链接参照：https://www.jianshu.com/p/88740cba25e6
一般插值器是为了让动画效果更接近现实，so，根据自身需要决定是否使用。

好，下一个，扇形展开菜单！

扇形的怎么展开呢？简单一看就是不仅有Y轴的偏移量还有X轴的偏移量！要让他呈扇形均匀展开，就是把扇形平均分成imageViews.size() - 1份，回顾一下数学：

弧度的定义：弧长等于圆半径长的弧所对的圆心角为1弧度，弧度没有单位。
即弧度=弧长/半径=l/r,因此，若弧度=π，弧长=πr=圆周的一半，此时恰好为一个半圆，圆心角180，也就是说π=180，1°=π/180

所以我们的角度计算公式为：

angle = (float) Math.PI / (2 * (imageViews.size() - 1));//(π/2)/(imageViews.size() - 1)

三角函数计算x轴y轴的偏移量：

 float x = (float) (r * Math.sin(i * angle));
 float y = (float) (r * Math.cos(i * angle));

不懂得同学请自己摸出草稿本画三角形
三角形的展开和收起动画：

    private void angleOpenMenu(float angle, float r) {
        for (int i = 1; i < resIds.length; i++) {
            float x = (float) (r * Math.sin(i * angle));
            float y = (float) (r * Math.cos(i * angle));
            PropertyValuesHolder translationX = PropertyValuesHolder.ofFloat("translationX", 0F, x);
            PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", 0F, y);
            ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViews.get(i),
                    translationX, translationY);
            animator.setInterpolator(new AccelerateInterpolator());
            animator.setDuration(500).start();
        }
        expand = true;
    }

    private void closeOpenMenu(float angle, float r) {
        for (int i = 1; i < resIds.length; i++) {
            float x = (float) (r * Math.sin(i * angle));
            float y = (float) (r * Math.cos(i * angle));
            PropertyValuesHolder translationX = PropertyValuesHolder.ofFloat("translationX", x, 0F);
            PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", y, 0F);
            ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViews.get(i),
                    translationX, translationY);
            animator.setInterpolator(new AccelerateInterpolator());
            animator.setDuration(500).start();
        }
        expand = false;
    }

细心的同学可以看到里面多了个PropertyValuesHolder，这个是用于组合多个动画，也可以像垂直展开动画一样单独写，如果需要定义动画顺序，比如先Y轴便宜再X轴偏移，或者Z轴和Y轴一起偏移，就需要使用AnimatorSet。

简单说一下AnimatorSet：

AnimatorSet.playTogether//动画一起播放；
AnimatorSet.playSequentially//动画按照顺序播放；
AnimatorSet.play(translationX).with(translationY)//动画X和Y一起播放；
AnimatorSet.play(translationY).after(translationX)//动画Y在动画X之后执行

好，到此结束。
有不对的地方请指正，O(∩_∩)O谢谢。