自定义动画（仿Win10加载动画）——优化

此为前文章写的仿Win10加载动画的优化版

---

源代码

已更新到github

优化分析

原生 自定义高仿（v1版）

一直觉得自己写的与原生的有差别，经过仔细对比观察，发现：

1. 原生的圆点出发位置不是都在底部，而是第一个在底部，后面的紧接着前面一个，像球在管子里一样
2. 圆点结束的位置就是该圆点开始的位置
3. 经过比对，发现一个周期的时间是7500ms，非7000ms

经过优化后的对比：

原生 自定义高仿（v1.1版）

优化后的时间校正图：

核心代码

不可否认，原生更加自然。为了自然，尝试了过去掉顶部的两段匀速运动，直接用四段三阶贝塞尔曲线，原理上是行的通的。但测试过N多参数，后来还是觉得不够自然，放弃了。最终还是选择原来的方法。

起始角度的计算
第一个圆点在最底部，第二个与第一个相差一个圆点对旋转中心所占的角度，后面也是圆点也是一样，与前一个圆点相差此角度。此角度可通过圆点半径与轨迹半径计算：

// 计算圆点对旋转中心所占的角度 float trackR = halfSize - dotR; dotDegree = (float) Math.toDegrees(2 * Math.asin(dotR / trackR));

参数与之前相比，有了很大调整（最主要的就是参数，调了无数遍才调出来……）：

/** * 创建动画 * * @param view 需执行的控件 * @param index 该控件执行的顺序 * @return 该控件的动画 */private Animator createViewAnim(final View view, final int index) {    long duration = 7500; // 一个周期（2圈）一共运行7500ms，固定值    // 最小执行单位时间    final float minRunUnit = duration / 100f;    // 最小执行单位时间所占总时间的比例    double minRunPer = minRunUnit / duration;    // 在插值器中实际值（Y坐标值），共8组    final double[] trueRunInOne = new double[]{            0,            0,            160 / 720d,            190 / 720d,            360 / 720d,            520 / 720d,            550 / 720d,            1    };    // 动画开始的时间比偏移量。剩下的时间均摊到每个圆点上    final float offset = (float) (index * (100 - 86) * minRunPer / (mDotViews.length - 1));    // 在差值器中理论值（X坐标值），与realRunInOne对应    final double[] rawRunInOne = new double[]{            0,            offset + 0,            offset + 11 * minRunPer,            offset + 32 * minRunPer,            offset + 43 * minRunPer,            offset + 54 * minRunPer,            offset + 75 * minRunPer,            offset + 86 * minRunPer    };    logI("minRunUnit=%f, minRunPer=%f, offset=%f", minRunUnit, minRunPer, offset);    // 各贝塞尔曲线控制点的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", -dotDegree * index, 720 - dotDegree * index);    // 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 等待开始                if (view.getVisibility() != INVISIBLE) {                    view.setVisibility(INVISIBLE);                }                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;}