So erstellen Sie eine SVG-Animation mit CSS
Das Animieren von SVG kann durch native Elemente wie z
Die CSS-Animation kann auch eine alternative Methode zur Verwendung der JavaScript-Bibliothek wie SnapSVG sein. In diesem Beitrag werden wir sehen, was wir mit CSS Animation in SVG möglicherweise liefern können.
1. Erstellen der Formen
Zunächst müssen wir die Formen und Objekte zeichnen, die wir animieren möchten. Sie können Anwendungen wie verwenden Skizzieren, Adobe Illustrator, oder Inkscape einen erstellen.
Für dieses Beispiel habe ich einen bewölkten Himmel als Hintergrund gezeichnet, und ein Raketenschiff, das nach oben schießt, einschließlich Flammen:
Wenn Sie mit der Zeichnung fertig sind, müssen wir jedes von uns erstellte Objekt in SVG exportieren.
Ich werde Sketch als Beispiel für diesen Schritt verwenden. Wählen Sie das Objekt aus, das Sie in das SVG-Format konvertieren möchten. Klicken Sie unten rechts in Ihrem Fenster auf Exportierbar machen. Wählen Sie das SVG-Format und klicken Sie dann auf Exportieren Objektname. Sie müssen dieses Objekt jeweils einzeln ausführen.
2. Fügen Sie das SVG in HTML ein
Wenn Sie die SVG-Datei in einem Code-Editor öffnen, werden Sie feststellen, dass SVG-Codes ziemlich unordentlich sind. Bevor wir die SVG-Datei bereitstellen, müssen wir den Code daher aufräumen und mit diesem Befehlszeilentool namens SVGO optimieren.
Starten Terminal oder Eingabeaufforderung, und installieren Sie SVGO mit dieser Befehlszeile:
[sudo] npm install -g svgo
Stimmen Sie den Befehl ab, svgo, in der SVG-Datei mit --ziemlich um lesbaren SVG-Code zu erzeugen:
svgo rocket.svg --pretty
Wenn Sie mehrere SVGs in einem Verzeichnis haben, können Sie sie alle gleichzeitig optimieren. Angenommen, das Verzeichnis wird benannt / Bilder, Verwenden Sie dann aus dem übergeordneten Verzeichnis diesen Befehl:
svgo -f images --pretty
Sehen wir uns den Unterschied vor und nach der Verwendung von SVGO an.
Kopieren Sie den Code innerhalb der SVG-Datei und fügen Sie ihn in eine HTML-Datei ein. Wir werden an einem Arbeitsbereich von 800 x 600 x Breite arbeiten, also vergessen wir nicht, das zu definieren Breite auf dem SVG-Element.
Das SVG wird in der HTML-Datei festgelegt. Wir müssen für jedes Objekt eine ID definieren, damit wir sie später in CSS auswählen können.
Für dieses Tutorial müssen wir die ID für die Rakete und die Flammen sowie einige der Wolken definieren. Damit die Objekte die Animationsphase später bearbeiten können, müssen wir sie hinzufügen Ich würde - Sie können auch verwenden Klasse - zu jedem Objekt. Zu diesem Zeitpunkt sieht der Code folgendermaßen aus:
3. Animieren Sie mit CSS
Jetzt lass uns Spaß haben. Der Plan ist, die Rakete in den Weltraum zu bringen. Die Rakete ist in zwei Gruppen aufgeteilt; die Rakete selbst und die Flamme.
Zunächst positionieren wir die Rakete wie folgt in der Mitte des Arbeitsbereichs:
#rocket transform: translate (260px, 200px);
Was Sie sehen, ist folgendes:
Damit die Rakete so aussieht, als würde sie nach oben steigen, müssen wir die Illusion erzeugen, dass Wolken fallen. Das CSS, das wir dafür verwenden, ist:
# cloud1 animation: fall 1s linear unendlich; @keyframes fallen from transform: translateY (-100px); zu transform: translateY (1000px)
Um es noch realistischer zu gestalten, lassen Sie uns vier Wolken animieren und erstellen “fallen” bei verschiedenen Geschwindigkeiten. Wir positionieren sie auch anders als die X-Achse.
Die zweite Cloud wird folgenden Code haben:
# cloud2 animation: fall-2 2s linear unendlich; @keyframes fall-2 from transform: translate (200px, -100px); in transform: übersetzen (200px, 1000px)
Beachten Sie, dass wir die Cloud # 2 ein bisschen nach rechts verschoben haben 200px mit Übersetzen. Zu diesem Zeitpunkt sollte das Ergebnis so aussehen.
Als nächstes wollen wir die Rakete zum Leben erwecken. Wir weisen ein Animations-Keyframe wie folgt zu:
#rocket animation: popup 1s unendlich leicht gemacht; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
Und füge der Raketenflamme auch Animation hinzu:
#flame animation: shake .2s linear unendlich; @keyframes shake 0% transform: translate (55px, 135px) drehen (7 Grad); 20% transform: translate (55px, 135px) drehen (0 Grad); 40% transform: translate (55px, 135px) drehen (-7 Grad); 60% transform: translate (55px, 135px) drehen (0 Grad); 100% transform: translate (55px, 135px) drehen (0 Grad);
Recht! Jetzt, da unsere Codes festgelegt sind, sollte die Animation an unserem SVG funktionieren.
Werfen Sie einen Blick auf unsere Rakete, die in den Weltraum schießt.
Letzter Gedanke
Animationen sind nicht die einfachste Funktion in CSS. Aber hoffentlich finden Sie dieses Tutorial als einen guten Ausgangspunkt, um die CSS-Animation in SVG näher kennenzulernen. Sie wären überrascht zu wissen, was mit CSS-Animation möglich ist.
Wenn Sie mit den Grundlagen beginnen möchten, können Sie hier mit diesem Beitrag beginnen: A Look Into: Scalable Vector Graphics (SVG) -Animation oder folgen Sie dem Rest der SVG-Serie.
- Demo anzeigen
- Quelle herunterladen
