Custom animation (simulated win10 loading animation) - Optimization

This is a Previous article Imitation of writing Win10 Load the optimized version of the animation

---

Source code

Updated to github

Optimization analysis

Native	Custom high imitation （v1 edition ）

I always feel that what I write is different from what I write , After careful comparison and observation , Find out ：

1. The starting positions of the original dots are not all at the bottom , But the first one at the bottom , The next one is followed by the first one , Like a ball in a pipe
2. The end of the dot is the beginning of the dot
3. After comparison , The time to find a cycle is 7500ms, Not 7000ms

Optimized comparison ：

Native	Custom high imitation （v1.1 edition ）

Optimized time correction chart ：

Core code

Undeniable? , Primordial is more natural . For nature , Tried to remove the top of the two uniform motion , Directly use four segments of third-order Bessel curve , It works in principle . But tested N multi-parameter , Later, I still felt that it was not natural , To give up . Finally, I choose the original method .

Calculation of starting angle
The first dot is at the bottom , The angle of the second dot to the center of rotation is one point away from the first , It is also the same with the dot at the back , This angle is different from the previous dot . This angle can be calculated from the radius of the dot and the radius of the track ：

//  Calculate the angle of the dot to the center of rotation 
 float trackR = halfSize - dotR;
 dotDegree = (float) Math.toDegrees(2 * Math.asin(dotR / trackR));

Parameters compared with the previous , A lot of adjustment （ The most important is the parameter , It took countless times to tune it out ……）：

/** *  Create animation  * * @param view  Control to be executed  * @param index  The order in which the control is executed  * @return  Animation of the control  */
private Animator createViewAnim(final View view, final int index) {
    long duration = 7500; //  A cycle （2 circle ） A total of 7500ms, Fixed value 

    //  Minimum execution unit time 
    final float minRunUnit = duration / 100f;
    //  The proportion of the minimum execution unit time to the total time 
    double minRunPer = minRunUnit / duration;
    //  Actual value in interpolator （Y Coordinate value ）, common 8 Group 
    final double[] trueRunInOne = new double[]{
            0,
            0,
            160 / 720d,
            190 / 720d,
            360 / 720d,
            520 / 720d,
            550 / 720d,
            1
    };
    //  The animation start time is greater than the offset . The rest of the time is divided among the dots 
    final float offset = (float) (index * (100 - 86) * minRunPer / (mDotViews.length - 1));
    //  The theoretical value in the differentiator （X Coordinate value ）, And realRunInOne Corresponding 
    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);

    //  Of the control points of each Bezier curve Y coordinate 
    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  Create attribute animation ： Rotate around the center point 2 circle 
    ObjectAnimator objAnim = ObjectAnimator.ofFloat(view, "rotation", -dotDegree * index, 720 - dotDegree * index);
    // B  Set the execution time of a cycle 
    objAnim.setDuration(duration);
    // C  Set the number of repetitions ： It can be repeated indefinitely 
    objAnim.setRepeatCount(ValueAnimator.INFINITE);
    // D  Set the differentiator 
    objAnim.setInterpolator(new TimeInterpolator() {
        @Override
        public float getInterpolation(float input) {
            if (input < rawRunInOne[1]) {
                // 1  Waiting to start 
                if (view.getVisibility() != INVISIBLE) {
                    view.setVisibility(INVISIBLE);
                }
                return 0;

            } else if (input < rawRunInOne[2]) {
                if (view.getVisibility() != VISIBLE) {
                    view.setVisibility(VISIBLE);
                }
                // 2  Bottom  →  top left corner ： Bessel curve 1
                //  First convert to [0, 1] Range 
                input = calculateNewPercent(rawRunInOne[1], rawRunInOne[2], 0, 1, input);
                return calculateBezierQuadratic(trueRunInOne[1], p1_2, trueRunInOne[2], input);

            } else if (input < rawRunInOne[3]) {
                // 3  top left corner  →  Top ： A straight line 
                return calculateLineY(rawRunInOne[2], trueRunInOne[2], rawRunInOne[3], trueRunInOne[3], input);

            } else if (input < rawRunInOne[4]) {
                // 4  Top  →  Bottom ： Bessel curve 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  Bottom  →  top left corner ： Bessel curve 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  top left corner  →  Top ： A straight line 
                return calculateLineY(rawRunInOne[5], trueRunInOne[5], rawRunInOne[6], trueRunInOne[6], input);

            } else if (input < rawRunInOne[7]) {
                // 7  Top  →  Bottom ： Bessel curve 4
                input = calculateNewPercent(rawRunInOne[6], rawRunInOne[7], 0, 1, input);
                return calculateBezierQuadratic(trueRunInOne[6], p1_7, trueRunInOne[7], input);

            } else {
                // 8  disappear 
                if (view.getVisibility() != INVISIBLE) {
                    view.setVisibility(INVISIBLE);
                }
                return 1;
            }

        }
    });
    return objAnim;
}