Interviewer: “loading animation of Android system with CSS”

Time:2019-12-19

Source code: https://github.com/any86/5a. C

ios/android

There are two kinds of loading icons commonly used on the web, one is the “Chrysanthemum” of IOS, the other is the “ring” of Android. Today, we use SVG to realize the “ring” animation of Android, and the next lesson realizes the “Chrysanthemum” of IOS

Be careful: the reason for the low number of GIF frames is that the actual animation effect is verySmooth.

demo

xml(svg)

<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor"  stroke-width="5"></circle>
</svg>

First, we define the canvas size of SVG as50×50, zoom to in browser36×36Display (this 36 can be adjusted according to the actual needs), and define the center coordinate of the ring as25,25, The radius is 20.(calculate)The circumference is about 125, which will be used later), the color iscurrentColorGet the value of the color attribute of the parent element. The width of the ring is 5 pixels. See the effect before writing CSS:
Interviewer:

scss

.a-loading {
    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            animation: dash 1500ms ease-in-out infinite;
            Stroke linecap: round; // the endpoint is a circle
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
    }
}

stroke-dasharray

First explainstroke-dasharrayIt’s used to define dotted lines, such asstroke-dasharray="50, 20"Dotted line indicating that the solid line part is 50 and the gap 20:


Imagine if the ring is also represented by a dotted line andUnit solid lineThe length of the part changes within the perimeter of the ring, which is not achieved (half ring / full ring, etc.). The following arestroke-dasharrayThe value is25, 200/ 50, 200 / 100, 200:
Interviewer:
Be carefulHere:200It is defined at will, indicating the gap of dotted line, as long as the value is greater than the circumference of the ring

stroke-dashoffset

Offset: when the value is positive, the dotted line goes back anticlockwise and the negative number goes forward clockwise (stroke dasheffset: 0 in the left figure, the starting point of the ring is in the direction of 3 points, and after – 10 in the right figure, the starting point of the ring is offset clockwise for a certain distance):

Because in the animation, the ring increases its length at the same timeTail in retracted length, so we need to cooperatestroke-dashoffsetRealization.

Three key moments of animation

0%Moment

Let the circle present only one point, in order to make the animation not abrupt after one week of cycle (you can change it to 0 to compare the effect)

50%Moment

In order to make the ring present 80% of the ring, set the solid line part length to 100 (125 * 0.8, 125 is the circumference):stroke-dasharray: 100, 200;, while the tail is shrinking, so set stroke-dashoffset: -45;.

100%Moment

Return to a point state, consistent with the 0% state, so the animation cycle is not abrupt, but the animation from 50% to 100% is just “tail contraction”, so we usestroke-dashoffset:-124Realization,125-124=1It happens to be a pixel, so the animation is finished

Integral rotation

In order to be consistent with the animation of Android system, let the whole system rotate as well. The code here is relatively simple and not redundant

Extension of animation property

If you look at CSSanimationDocuments, you will findanimationMultiple over animations can be supported at the same time, such asanimation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;, use “,” to split multiple animations

So we can actually extend the above animation, such asThere’s color change as you rotate:

Interviewer:

&-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            //Add color change code
            animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; 
            stroke-linecap: round;
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }

        @keyframes color {

            0%,
            100% {
                stroke: #6b5c5b;
            }

            40% {
                stroke: #0057e7;
            }

            66% {
                stroke: #008744;
            }

            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }

Code referenceiview, a Vue framework

Recommended Today

The first Python Programming challenge on the Internet (end)

Date of establishment: March 28, 2020Update Date: April 22, 2020 (end)Personal collection Tool.pywebsite:http://www.pythonchallenge.com/Note: please quote or change this article at will, just mark the source and the author. The author does not guarantee that the content is absolutely correct. Please be responsible for any consequences Title: the first Python Programming challenge on the web Find […]