四、动画分析

再看看原生动画：


4.1 组成与始末

毫无疑问，是由5个圆点组成。
从哪开始的呢？一般都是从无到有，即从最底部一个一个弹出开始的。经过查看Win10的动画，每次显示时确实从此处开始的。
结束，从开始的前一刻，也就是其它点都消失了，最后一个点到达底部的时刻。

4.2 动画剖析

从上面的动画核心部分可知，要分析动画，就要分析其速度变化与运行时间。

先从第一个圆点开始分析。底部起始点为0°，顺时针为正，分析每个区间段的速度与时间：

0° ~ 160°：速度变慢，时间0.5s 160° ~ 180°：匀速，时间2s 180° ~ 360°：速度变快，时间1s 360° ~ 520°：速度变慢，时间0.5s 520° ~ 540°：匀速，时间2s 540° ~ 720°：速度变快，时间1s

其中：步骤4-6重复1-3。

第二个以后的圆点，一开始以为在使用延时执行就可以，但发现有问题：动画需无限次重复执行，延时只在第一次执行时延时。

所以，用时间来模拟延时执行的效果：首先隐藏在起始点，速度为0，然后延时时间（偏移时间offsetMs）到达后就显示，开始运动了。
最后第一个圆点等待最后一个圆点到达底部的功能也是一样：到达后隐藏在终点，速度不变且为0，一直等待最后一个圆点到达终点。

这样，才算一个完整的运动轨迹（这里范围为实际运行时间）：

其中，步骤5-7运动与步骤2-3重复，也就是实际看到运动效果的几个步骤。

之后又经过了如下优化：

经过多次卡表发现，一次运行的总时间为7s，但比例还是按上面的来 测试中发现会出现挤压重叠现象，仔细查看原生动画，发现在匀速开始和结束的位置，并不都是160°和180°，五个圆点到达匀速的角度在逐渐变小，离开的角度也在逐渐变小。因此需要给每个圆点一个偏移角度 为了进一步模仿动画在左上角慢慢靠近的追逐效果，上面所述的到达偏移角度要比离开的偏移角度大

这样，就有了下面轨迹参数的确定（这些参数是我测试出来比较理想的，可以自己去设置更精确的参数）：

/**

 * 创建动画

 *

 * @param view 需执行的控件

 * @param index 该控件执行的顺序

 * @return 该控件的动画

 */

private Animator createViewAnim(final View view, final int index) {

    long duration = 7000; // 一个周期（2圈）一共运行7000ms，固定值

    int comeStepAngle = 22; // 到达的间隔角度

    int goStepAngle = 16; // 离开的间隔角度

    // 最小执行单位时间

    final float minRunUnit = duration / 16;

    // 最小执行单位时间所占总时间的比例

    double minRunPer = minRunUnit / duration;

    // 在差值器中实际值（Y坐标值），共8组

    final double[] trueRunInOne = new double[]{

            0,

            0,

            160 / 720d - index * comeStepAngle / 720d,

            180 / 720d - index * goStepAngle / 720d,

            360 / 720d,

            520 / 720d - index * comeStepAngle / 720d,

            540 / 720d - index * goStepAngle / 720d,

            1

    };

    // 动画开始的时间比偏移量。剩下的时间均摊到每个圆点上（本应该是length-1，但length效果更好）

    final float offset = (float) (index * (16 - 14) * minRunPer / mDotViews.length);

    // 在差值器中理论值（X坐标值），与realRunInOne对应

    final double[] rawRunInOne = new double[]{

            0,

            offset + 0,

            offset + 1 * minRunPer,

            offset + 5 * minRunPer,

            offset + 7 * minRunPer,

            offset + 8 * minRunPer,

            offset + 12 * minRunPer,

            offset + 14 * minRunPer

    };

}

整个动画放在了一个自定义RelativeLayout里，圆点是通过代码动态添加的，圆点背景使用的是shape：

// 2、 添加新控件

for (int i = 0; i < mDotViews.length; i++) {

    mDotViews[i] = new View(getContext());

    View view = mDotViews[i];

    LayoutParams lp = new LayoutParams(dotD, dotD);

    // 添加规则：底部 + 水平居中

    lp.addRule(ALIGN_PARENT_BOTTOM);

    lp.addRule(CENTER_HORIZONTAL);

    // 调整位置

    if (mHeight > mWidth) {

        lp.bottomMargin = (mHeight - mWidth)/2;

    }

    // 设置旋转中心点

    view.setPivotX(dotR);

    view.setPivotY(-(halfSize - dotD));

    // 背景

    view.setBackgroundResource(R.drawable.shape_dot);

    // 修改点的背景颜色

    GradientDrawable gradientDrawable = (GradientDrawable) view.getBackground();

    gradientDrawable.setColor(dotColor);

    view.setVisibility(INVISIBLE);

    addView(view, lp);

}

五个圆点的时间百分比轨迹图如下（这时PS画图也不好使了，还是要Android自己来，demo里有源代码）：


五、核心代码

private Animator createViewAnim(final View view, final int index) {

   ...

    // 各贝塞尔曲线控制点的Y坐标

    final float p1_2 = calculateLineY(rawRunInOne[2], trueRunInOne[2], rawRunInOne[3], trueRunInOne[3], rawRunInOne[1]);

    final float p1_4 = calculateLineY(rawRunInOne[2], trueRunInOne[2], rawRunInOne[3], trueRunInOne[3], rawRunInOne[4]);

    final float p1_5 = calculateLineY(rawRunInOne[5], trueRunInOne[5], rawRunInOne[6], trueRunInOne[6], rawRunInOne[4]);

    final float p1_7 = calculateLineY(rawRunInOne[5], trueRunInOne[5], rawRunInOne[6], trueRunInOne[6], rawRunInOne[7]);

    // A 创建属性动画：绕着中心点旋转2圈

    ObjectAnimator objAnim = ObjectAnimator.ofFloat(view, "rotation", 0, 720);

    // B 设置一个周期执行的时间

    objAnim.setDuration(duration);

    // C 设置重复执行的次数：无限次重复执行下去

    objAnim.setRepeatCount(ValueAnimator.INFINITE);

    // D 设置差值器

    objAnim.setInterpolator(new TimeInterpolator() {

        @Override

        public float getInterpolation(float input) {

            if (input < rawRunInOne[1]) {

                // 1 等待开始

                return 0;

            } else if (input < rawRunInOne[2]) {

                if (view.getVisibility() != VISIBLE) {

                    view.setVisibility(VISIBLE);

                }

                // 2 底部 → 左上角：贝赛尔曲线1

                // 先转换成[0, 1]范围

                input = calculateNewPercent(rawRunInOne[1], rawRunInOne[2], 0, 1, input);

                return calculateBezierQuadratic(trueRunInOne[1], p1_2, trueRunInOne[2], input);

            } else if (input < rawRunInOne[3]) {

                // 3 左上角 → 顶部：直线

                return calculateLineY(rawRunInOne[2], trueRunInOne[2], rawRunInOne[3], trueRunInOne[3], input);

            } else if (input < rawRunInOne[4]) {

                // 4 顶部 → 底部：贝赛尔曲线2

                input = calculateNewPercent(rawRunInOne[3], rawRunInOne[4], 0, 1, input);

                return calculateBezierQuadratic(trueRunInOne[3], p1_4, trueRunInOne[4], input);

            } else if (input < rawRunInOne[5]) {

                // 5 底部 → 左上角：贝赛尔曲线3

                input = calculateNewPercent(rawRunInOne[4], rawRunInOne[5], 0, 1, input);

                return calculateBezierQuadratic(trueRunInOne[4], p1_5, trueRunInOne[5], input);

            } else if (input < rawRunInOne[6]) {

                // 6 左上角 → 顶部：直线

                return calculateLineY(rawRunInOne[5], trueRunInOne[5], rawRunInOne[6], trueRunInOne[6], input);

            } else if (input < rawRunInOne[7]) {

                // 7 顶部 → 底部：贝赛尔曲线4

                input = calculateNewPercent(rawRunInOne[6], rawRunInOne[7], 0, 1, input);

                return calculateBezierQuadratic(trueRunInOne[6], p1_7, trueRunInOne[7], input);

            } else {

                // 8 消失

                if (view.getVisibility() != INVISIBLE) {

                    view.setVisibility(INVISIBLE);

                }

                return 1;

            }

        }

    });

    return objAnim;

}

/**

 * 根据旧范围，给定旧值，计算在新范围中的值

 *

 * @param oldStart 旧范围的开始值

 * @param oldEnd   旧范围的结束值

 * @param newStart 新范围的开始值

 * @param newEnd   新范围的结束之

 * @param value    给定旧值

 * @return 新范围的值

 */

private float calculateNewPercent(double oldStart, double oldEnd, double newStart, double newEnd, double value) {

    if ((value < oldStart && value < oldEnd) || (value > oldStart && value > oldEnd)) {

        throw new IllegalArgumentException(String.format("参数输入错误，value必须在[%f, %f]范围中", oldStart, oldEnd));

    }

    return (float) ((value - oldStart) * (newEnd - newStart) / (oldEnd - oldStart));

}

/**

 * 根据两点坐标形成的直线，计算给定X坐标在直线上对应的Y坐标值

 *

 * @param x1 起点X坐标

 * @param y1 起点Y坐标

 * @param x2 终点X坐标

 * @param y2 终点Y坐标

 * @param x  给定的X坐标

 * @return 给定X坐标对应的Y坐标

 */

private float calculateLineY(double x1, double y1, double x2, double y2, double x) {

    if (x1 == x2) {

        return (float) y1;

    }

    return (float) ((x - x1) * (y2 - y1) / (x2 - x1) + y1);

}

/**

 * 计算贝塞尔二阶曲线的X（或Y）坐标值

 * 给定起点、控制点、终点的X（或Y）坐标值，和给定时间t（∈[0, 1]），算出此时贝塞尔曲线的X（或Y）坐标值

 *

 * @param p0 起点值

 * @param p1 控制点值

 * @param p2 终点值

 * @param t  给定的时间

 * @return 曲线的位置值

 */

private float calculateBezierQuadratic(double p0, double p1, double p2, @FloatRange(from = 0, to = 1) double t) {

    double tmp = 1 - t;

    return (float) (tmp * tmp * p0 + 2 * tmp * t * p1 + t * t * p2);

}

public synchronized void setDotColor(int dotColor) {

    this.dotColor = dotColor;

    for (View view : mDotViews) {

        GradientDrawable gradientDrawable = (GradientDrawable) view.getBackground();

        gradientDrawable.setColor(dotColor);

    }

}

http://www.2cto.com/kf/201610/553402_2.html