Rotate while loading the ring First understand the principle - Unify the ring colors in the above video to complete "1 ring loading". It is also through the combination of "2 animations" to achieve the effect of loading 1 circle, the difference is that these 2 animations executive email list start and end at the same time. The 2 animations are "Loading the ring "half circle" while rotating 180 degrees around the center" (referred to as "loading + rotation") and "loading the ring "half executive email list circle" (referred to as "loading"). Is there the same problem as method 1, the speed (Bezier curve) must be adjusted to Linear (uniform speed)
Let's take a look at the following analysis - The two loading animations are "loading" and "loading + rotation" animations. Set the start and end times of the two animations to be the same, and the speed to be the same. At this time: When the "loading" animation loads executive email list x degrees, the "loading + rotating" animation also loads x degrees, and the whole is also rotated by x degrees (the loading of the "loading + rotating" animation is done by rotating the "rotation executive email list ring" 180 degrees, while If it rotates another 180 degrees, the whole rotation angle is the same, and the rotation time is the same, so the rotation angle at a certain moment is also the same).
Therefore, at any moment of the whole animation, the ring of the "loading" animation actually keeps moving forward behind the ring of "loading + rotation". Therefore, the speed (Bezier curve) of the two animations can be customized at will (except for Spring), but the same executive email list Bezier curve is used (in this way, the speed of loading and rotation can be guaranteed to be the same, and the angle of loading and rotation can be the same, so that will not make the 2 executive email list animations not connected). Practical demonstration: Loading completes "1 circle" - method 2 Premise: first understand the principle of the "loading complete half circle" animation. step 1 After completing the first 2 steps according to "Load complete half circle", copy a "180" file.