Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems

Im Web gibt es zwei gängige Ladesymbole: eines ist die „Chrysantheme“ von iOS und das andere ist der „Ring“ von Android. Heute verwenden wir SVG, um die „Ring“-Animation von Android und die „Chrysantheme“ von iOS in der nächsten Klasse zu implementieren.

Hinweis : Da das GIF nur wenige Frames hat, ist der eigentliche Animationseffekt sehr flüssig

von.

xml(svg)

<svg Breite="36" Höhe="36" Ansichtsbox="0 0 50 50" Klasse="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="keine" stroke="aktuelleFarbe" stroke-width="5"></circle>
</svg>

Zuerst definieren wir die SVG-Leinwandgröße als 50 x 50 und zoomen sie im Browser auf 36 x 36 (Sie können diese 36 entsprechend Ihren tatsächlichen Anforderungen anpassen), definieren die Mittelpunktskoordinaten des Rings als 25,25 , den Radius als 20 ( der Umfang beträgt etwa 125 , was später verwendet wird), die Farbe ist currentColor , um den Wert des Farbattributs des übergeordneten Elements zu erhalten, und die Breite des Rings beträgt 5 Pixel. Schauen wir uns die Wirkung an, bevor wir CSS schreiben:

scss

.a-wird geladen {
    &-android {
        Animation: 2 s rotieren, linear, unendlich;
        Transform-Origin: Mitte Mitte;
        >Kreis {
            Anzeige: Inline-Block;
            Animation: Sprint, 1500 ms, unendliches Ein- und Aussteigen;
            stroke-linecap: rund; // Der Endpunkt ist ein Kreis Farbe: aktuelleFarbe;
        }

        @keyframes drehen {
            100 % {
                transformieren: drehen (360 Grad);
            }
        }
        
        @keyframes Strich {
            0% {
                Schlaganfall-Dasharray: 1, 200;
            }

            50 % {
                Strich-Dasharray: 100, 200;
                Strich-Schlag-Höhe: -45;
            }

            100 % {
                Strich-Dasharray: 100, 200;
                Strich-Dashoffset: -124;
            }
        }
    }
}

Schlaganfall-Dasharray

Lassen Sie uns zunächst stroke-dasharray erklären, das zum Definieren gestrichelter Linien verwendet wird. Beispielsweise bedeutet stroke-dasharray="50, 20" eine gestrichelte Linie mit einer durchgezogenen Linie von 50 und einer Lücke von 20:

Stellen Sie sich vor, der Ring würde auch durch eine gepunktete Linie dargestellt und die Länge des durchgezogenen Linienteils würde innerhalb des Umfangs des Rings variieren. Würde dies nicht erreicht (Halbring/Vollring usw.)? Die folgenden Werte von stroke-dasharray sind: 25, 200 / 50, 200 / 100, 200

:

Hinweis : 200 hier

wird willkürlich definiert und stellt die Lücke zwischen gestrichelten Linien dar, solange der Wert größer als der Umfang des Rings ist.

Strich-Schlagsatz

Offset, bei einem positiven Wert bewegt sich die gestrichelte Linie gegen den Uhrzeigersinn zurück, bei einem negativen Wert im Uhrzeigersinn vorwärts (stroke-dashoffset:0 im linken Bild liegt der Startpunkt des Rings bei 3 Uhr, nach dem Setzen auf -10 im rechten Bild ist der Startpunkt des Rings um eine Distanz im Uhrzeigersinn versetzt):

Da in der Animation der Ring länger wird, während der Schwanz kürzer wird , ist eine Zusammenarbeit mit stroke-dashoffset erforderlich.

erreichen.

3 Schlüsselmomente in der Animation

0% Moment

Lassen Sie den Ring nur einen Punkt anzeigen, damit die Animation nach einem Zyklus nicht abrupt endet (Sie können ihn auf 0 ändern, um den Effekt zu vergleichen).

50% Moment

Damit der Ring 80 % des Rings ausmacht, wird die Länge der durchgezogenen Linie auf 100 gesetzt (125*0,8, wobei 125 der Umfang ist): stroke-dasharray: 100, 200; und der Schwanz wird kleiner, also setzen Sie stroke-dashoffset: -45;

100% Momente

Rückkehr zu einem Punktzustand, der dem 0 %-Zustand entspricht, sodass der Animationszyklus nicht abrupt ist. Die Animation von 50 % bis 100 % ist jedoch nur eine „Schwanzkontraktion“. Daher verwenden wir stroke-dashoffset:-124 , um dies zu erreichen. 125-124=1 ist genau ein Pixel. Nun, die Animation ist nun abgeschlossen.

Gesamtrotation

Um mit der Animation des Android-Systems konsistent zu sein, wird auch der gesamte Körper gedreht. Der Code hier ist relativ einfach und wird nicht wiederholt.

Erweiterungen der Animationseigenschaft

Wenn Sie die CSS- animation sorgfältig lesen, werden Sie feststellen, dass animation mehrere Übergangsanimationen gleichzeitig unterstützen können, z. B. animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; und verwenden Sie ",", um mehrere Animationen aufzuteilen.

Wir können die obige Animation also tatsächlich erweitern, beispielsweise durch gleichzeitiges Rotieren und Ändern der Farbe :

&-android {
        Animation: 2 s rotieren, linear, unendlich;
        Transform-Origin: Mitte Mitte;
        >Kreis {
            Anzeige: Inline-Block;
            // Codeanimation für Farbwechsel hinzufügen: Farbe 6 s, unendlich langsam ein- und ausblenden, Strich 1,5 s, unendlich langsam ein- und ausblenden; 
            Strichlinienende: rund;
            Farbe: aktuelle Farbe;
        }
        @keyframes drehen {
            100 % {
                transformieren: drehen (360 Grad);
            }
        }
        @keyframes Strich {
            0% {
                Schlaganfall-Dasharray: 1, 200;
            }
            50 % {
                Strich-Dasharray: 100, 200;
                Strich-Schlag-Höhe: -45;
            }
            100 % {
                Strich-Dasharray: 100, 200;
                Strich-Dashoffset: -124;
            }
        }
        @keyframes Farbe {
            0%,
            100 % {
                Strich: #6b5c5b;
            }
            40 % {
                Schlaganfall: #0057e7;
            }
            66 % {
                Schlaganfall: #008744;
            }
            80 %,
            90 % {
                Schlaganfall: #ffa700;
            }
        }
    }

Der Code in diesem Artikel bezieht sich auf iview , ein Vue-Framework.

Zusammenfassen

Oben habe ich Ihnen die Verwendung von CSS zur Implementierung der Ladeanimation des Android-Systems vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!