Ein Leitfaden für Anfänger zur SVG-Animation mit CSS

Skalierbare Vektorgrafiken (SVGs) sind mehr als nur Bilddateien. Als XML-Anwendung enthalten SVGs Markup, das ähnlich wie HTML aussieht und funktioniert. Sie können sie auch in Verbindung mit CSS- und JavaScript-Code verwenden. Dadurch ist es möglich, SVG-Dateien zu animieren und komplexe Bilder zu erstellen, die sich gut für Webdesign und andere dynamische Umgebungen eignen.

Aber wie erstellt man eine SVG-Animation? Beginnen Sie mit einer SVG-Form, animieren Sie sie mit CSS und bauen Sie auf diesen Prinzipien auf, um Animationen in Ihrer eigenen Arbeit zu verwenden.

Animieren von SVGs mit HTML und CSS

Obwohl Sie JavaScript verwenden können, um SVGs programmgesteuert zu animieren, bietet CSS jetzt auch eine gute Unterstützung für Animationen. Den gesamten Beispielcode finden Sie unter den CodePen für dieses Projekt.

Erstellen eines SVG-Bildes in HTML

Der erste Schritt in diesem Prozess ist das Erstellen des SVG-Bildes, mit dem Sie arbeiten werden. Sie finden SVG-Markup im HTML-Bedienfeld von CodePen.

SVG-Struktur

Während SVGs ein ähnliches Format wie HTML haben, unterscheiden sich die Tags, die Sie zu ihrer Erstellung verwenden. Ein SVG hat öffnende und schließende Tags (), die eine Vielzahl unterschiedlicher Eigenschaften enthalten können. In unserem Fall verwenden wir Ich würde und viewBox Eigenschaften. Die Eigenschaft id funktioniert wie jede andere HTML-ID und stellt Ihnen eine eindeutige Kennung zur Verfügung, die Sie in Ihrem CSS/JS verwenden können. Die Eigenschaft viewBox legt die Größe unseres SVG fest.

<!-- SVG mit responsiver Größe -->
<svg-id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG-Inhalt -->
</svg>

Sie können stattdessen die Eigenschaften width und height verwenden, wie das folgende Beispiel zeigt. viewBox erstellt jedoch ein ansprechendes SVG, das der Größe des Ansichtsfensters entspricht, ohne das Seitenverhältnis zu beeinträchtigen.

 SVG mit einer statischen Größe 
<svg-id="MUOSVGAnimation" Breite ="800" Höhe ="600">
<!-- SVG-Inhalt -->
</svg>

SVG-Formen

Sie können mit SVGs detaillierte Bilder erstellen, wobei Ihnen eine Reihe verschiedener Formwerkzeuge zur Verfügung stehen. Dieses SVG-Beispiel verwendet drei der verfügbaren Formen, aber es gibt noch viele andere. Jede der Formen in diesem Beispiel hat eine eindeutige ID, die die CSS-Animationen später verwenden können.

• SVG-Ellipse: Dies ist ein Kreis-/Oval-Werkzeug. Es gibt Eigenschaften für den Radius der y/x-Achse (rx/ry), die Füllfarbe und die Strichbreite an. Es ist wichtig, sich daran zu erinnern, dass der Radius, den Sie mit diesem Werkzeug wählen, die Hälfte des Durchmessers der Form ist.

<Ellipse-ID="Kreis" rx="100" ry="100" füllen="#ffed00" Strichbreite ="0"/>

• SVG Rect: Das SVG Rect-Tool erstellt ein Quadrat oder Rechteck. Dieser hat Eigenschaften für Breite/Höhe, eine Transformation, Füllfarbe und Strichbreite.

<Rect-ID="Quadrat" Breite ="200" Höhe ="200" transformieren="übersetzen (300 200)" füllen="#05f"
 Strichbreite ="0"/>

• SVG-Polygon: Verwenden Sie ein SVG-Polygon, um eine bestimmte Anzahl von Punkten festzulegen und beliebige Formen unterschiedlicher Größe zu erstellen. Das Polygon im Beispiel ist dreiseitig, was es zu einem Dreieck macht, und Sie können die Position jedes Punktes sehen, der in seinen Eigenschaften gezeichnet ist. Daneben haben wir Eigenschaften für die Position, Füllfarbe und Strichbreite des Dreiecks.

<Polygon-ID="Dreieck" Punkte="15,-97 115,102 -84,102 15,-97"
 transformieren="übersetzen (0,0)" füllen="#f00" Strichbreite ="0"/>

Sobald die Animation vorhanden ist, werden die Formen nebeneinander ausgerichtet.

Diese drei SVG-Formen gehören zu den gebräuchlichsten, aber Sie haben noch mehr zur Auswahl. Sie können die folgenden Formen verwenden, wenn Arbeiten mit einer SVG-Animation:

• SVG-Kreis: Diese Form ähnelt einer Ellipse, hat aber immer gleiche X- und Y-Radien.
• SVG-Linie: Eine SVG-Linie ist ein einzelnes Liniensegment mit zwei Punkten, einer an jedem Ende.
• SVG-Polylinie: Polylinien sind wie einfache Linien, nur dass sie mehr als zwei Punkte haben können.
• SVG-Polygon: SVG-Polygone sind wie Rechtecke, nur dass sie mehr als vier Punkte haben können, wodurch komplexe Formen möglich werden.
• SVG-Pfad: SVG-Pfade funktionieren ähnlich wie das Stiftwerkzeug in Adobe Photoshop. Linien können wie eine Polylinie/ein Polygon verbunden werden, aber es können auch Kurven auf sie angewendet werden.

So animieren Sie SVGs mit CSS

Jetzt, da Sie einige Formen in Ihrem SVG haben, ist es an der Zeit, mit der CSS-Animation fortzufahren. Jede der Formen hat eine andere Animation, um einige der Optionen zu demonstrieren, die Sie haben, aber es gibt noch viel mehr, das Sie mit Ihren eigenen Designs erkunden können. Der Kreis bewegt sich über den Bildschirm, die Ecken des Quadrats werden rund und das Dreieck dreht sich. Alle diese verwenden CSS-Keyframes zum Erstellen flüssiger Animationen.

Verschieben des Kreises mit Transformieren und Übersetzen

Der Kreis im SVG-Beispiel bewegt sich während seines Animationszyklus auf dem Bildschirm von unten nach oben. Sie müssen dem Kreis über eine CSS-Eigenschaft eine Animation zuweisen, bevor er sich bewegen kann:

#Kreis {
 Animation: circle_anim 2000ms linear unendlich normal vorwärts
}

Das erste Wort im Wert, circle_anim, ist ein Name für die Animation. Es läuft zwei Sekunden lang (2000ms). Es hat ein linear Kurve, die ihre Geschwindigkeit konstant hält und auf Laufen eingestellt ist unendlich oft in der vorwärts Richtung. Mit Keyframes können Sie einzelne Phasen der Animation definieren:

@Keyframes Kreis_Anim {
 0% { verwandeln: Übersetzen(155px, 305px) }
 45% { verwandeln: Übersetzen(155px, -123px) }
 50% { verwandeln: Übersetzen(-123px, -123px) }
 55% { verwandeln: Übersetzen(-123px, 728px) }
 60% { verwandeln: Übersetzen(155px, 728px) }
 100% { verwandeln: Übersetzen(155px, 305px) }
}

Diese Animation enthält sechs Keyframes, sodass sich der Kreis in jedem Zyklus an sechs verschiedene Positionen bewegt. Das transformieren: übersetzen -Eigenschaft legt die Position des Kreises in jeder Phase fest. Bei 0 % befindet sich der Kreis in der Mitte des Bildschirms und bewegt sich um 45 % nach oben und aus dem Blickfeld. Um 50 % hat es sich vom Bildschirm nach links bewegt, bevor es sich bei 55 % unter das Ansichtsfenster bewegt. Der Kreis bewegt sich um 60 % in seine horizontale Position zurück, und die Animation ist bei 100 % mit dem Kreis wieder in der Mitte des Bildschirms abgeschlossen.

Animieren Sie die Randradius-Eigenschaft des Quadrats

Das Quadrat im Beispiel bietet eine gute Referenz für allgemeine Eigenschaftsanimationen. Solange Sie die richtige Syntax kennen, können Sie jede CSS-Eigenschaft animieren. Die Grenze-Radius-Eigenschaft ist eine gute Demonstration dafür. Das Quadrat hat scharfe Ecken, die in abgerundete Ecken und dann wieder in eckige Ecken übergehen.

#Quadrat { Animation: square_anim 2000ms Ease-in-out unendlich normal vorwärts }

Die quadratische Animation heißt square_anim und hat eine Laufzeit von zwei Sekunden. Das Leichtigkeit-in-out Kurve macht die Animation am Anfang und am Ende langsamer, wodurch ein weicher Effekt entsteht.

@Keyframes square_anim {
 0% { Empfang: 0px; ry: 0px }
 45% { Empfang: 40px; ry: 40px }
 55% { Empfang: 40px; ry: 40px }
 100% { Empfang: 0px; ry: 0px }
}

Wie Sie sehen können, hat diese Animation vier Keyframes. Der X- und Y-Randradius ändert sich zwischen 0 % und 45 % von 0 Pixel auf 40 Pixel und hält bei 40 Pixel bis 55 % an. Es geht dann für jeden Radius auf 0 Pixel zurück, wenn die Animation 100 % erreicht.

Drehen Sie das SVG-Dreieck mit Transform

Die letzte SVG-Animation im Beispiel ist die einfachste, bei der sich das Dreieck um seinen Mittelpunkt dreht. Die Form vollführt alle zwei Sekunden eine volle Umdrehung und läuft endlos weiter. Es hat eine Ease-out-Kurve, die dazu führt, dass sich die Animation am Ende verlangsamt. Die Animation heißt triangle_anim.

#Dreieck { Animation: Dreieck_anim 2000ms Ease-out unendlich normal vorwärts }

Diese Animation hat zwei Keyframes, einen bei 0 % und den anderen bei 100 %. Die Eigenschaft „Drehen umwandeln“ dreht das Dreieck von 0 Grad bei 0 % auf 360 Grad bei 100 %, wodurch eine vollständige Drehung entsteht.

@Keyframes dreieck_anim {
 0% { verwandeln: Übersetzen(644px, 297px) drehen(0 Grad) }
 100% { verwandeln: Übersetzen(644px, 297px) drehen(360 Grad) }
}

So animieren Sie andere Eigenschaften

Die drei oben behandelten Animationen sind ein guter Ausgangspunkt, wenn Sie mit SVGs arbeiten, aber Sie werden dies wahrscheinlich noch weiter vorantreiben wollen. Sie können die CSS-Animationsregel verwenden, um fast jeden Eigenschaftswert anzupassen, den Sie Ihrem SVG zuweisen können. Dazu gehören grundlegende Werte wie Größe und Positionierung sowie erweiterte Werte wie Ränder, Schatten und Mischmodi.

In seltenen Fällen, in denen CSS nicht ausreicht, können Sie JavaScript-Code verwenden, um SVG-Bilder zu animieren. Sie können jede Menge Anleitungen finden, die Ihnen dabei helfen, sobald Sie sich bereit fühlen, den nächsten Schritt mit Ihren SVGs zu machen.

Erstellen Sie Ihre eigenen SVG-Animationen

Egal, ob Sie Webdesigner, Softwareentwickler oder einfach nur eine kreative Person sind, SVG-Animationen können Spaß machen und befriedigend sein. Sie können im Internet zahlreiche Ressourcen finden, die Ihnen bei der webbasierten Animation helfen können, sobald Sie sich mit den Grundlagen vertraut gemacht haben.

10 CSS-Hintergrundmuster, die Sie auf Ihrer Website verwenden können

Lesen Sie weiter