Share
In diesem Tutorial gehe ich durch die Erstellung einiger CSS-animierter SVG-Symbole zum Thema Urlaub. Es gibt einige großartige Icons auf Iconmelon, einer Website, auf der viele kostenlose Vektor-Icons für Sie bereit stehen. Die Icons, die ich verwende, stammen von Designer Sam Jones. Schnappen Sie sich also eine Tasse Eierlikör, ziehen Sie Ihren Laptop bis zum Logbuch und los geht's!
Wenn Sie daran interessiert sind, SVG im Web zu verwenden, können Sie mit Symbolen beginnen. SVGs sind flexibel, auflösungsunabhängig und leicht, sodass sich Icons natürlich für das Vektorformat eignen. Ebenso wie HTML können SVGs problemlos mit CSS gestaltet werden, das CSS3-Animationen enthält. Wenn Sie Ihren Symbolen einen Hauch Interaktivität mit Animationen hinzufügen, können Sie den Benutzern ein reizvolles Erlebnis bieten und darüber hinaus einen Kontext zu den Symbolen hinzufügen.
Eine Einführung in SVG und das Web finden Sie unter SVG-Dateien: Vom Illustrator zum Web.
Hinweis: Die folgenden Demos verwenden modernste Technologien, die zum Zeitpunkt der Erstellung dieses Dokuments in einigen Browsern wie Internet Explorer nicht unterstützt werden. Wenn Sie das Lernprogramm mitverfolgen, empfiehlt es sich, Chrome oder Safari zu verwenden. Mozilla-Unterstützung ist mit den entsprechenden Eigenschaftspräfixen problemlos möglich. Sie können sicherlich erwarten, dass sich die Unterstützung dieser Technologien in Zukunft verbessert.
Zusätzlich: In diesem Artikel habe ich einige notwendige Browser-Präfixe aus CSS-Eigenschaften für die Übersichtlichkeit und Lesbarkeit weggelassen. Schauen Sie sich die prefixfree-Bibliothek von Lea Verou an, wenn Sie einfach Prefix Free CSS schreiben möchten. Sie können auch versuchen, Ihre Demos auf Codepen zu erstellen, die einfach für die Verwendung von Präfix-frei konfiguriert werden können.
Einer der größten Probleme bei SVG ist, dass der Code schwer zu handhaben ist. Der von Illustrator exportierte SVG-Code, der von mir bevorzugte Vektor-Grafikeditor, ist auf den ersten Blick nicht lesbar. Inkscape ist zwar in der Lage, SVG-Dateien tatsächlich zu exportieren, aber ich habe festgestellt, dass die Vereinfachung und Formatierung des Codes dazu beitragen kann, den Code lesbarer zu machen und mit ihm zu arbeiten.
Hier ist der SVG-Code für das erste Animationsbeispiel, das ich demonstrieren werde, ein blinkendes Weihnachtslicht.
Dieser Code wurde aus meinem Vektorbearbeitungsprogramm Adobe Illustrator exportiert. Es ist auf den ersten Blick fast unlesbar. Hier ist das gleiche Markup vereinfacht:
Ich habe dieses XML erheblich vereinfacht, indem ich eine Menge des zusätzlichen Markups entfernt habe, den das Programm standardmäßig ausgibt. Mein SVG-Basiselement enthält Folgendes:
Accentsconagua
SVG-Licht. Ich habe die verwendet svg- Präfix, um Elemente auf einfache Weise in einer bestimmten SVG anzuvisieren.Viewbox Eigentum. Der Wert von Viewbox Diese Eigenschaft definiert das Seitenverhältnis des Dokuments und entspricht der Größe der Zeichenfläche in Illustrator.xmnls Eigentum. Diese Eigenschaft definiert den XML-Namespace der SVG und hilft einigen Benutzeragenten, das Markup zu verstehen.Zu den innerhalb der SVG-Elementen geschachtelten Elementen, die die Formen definieren, aus denen das Bild besteht, z Pfade, Kreise und rektet, Ich habe Klassen inline mit ihrem Eröffnungs-Tag angewendet. Alle Inline-Eigenschaften des Elements, z. B. ihre Koordinaten, sind in neue Zeilen unterteilt. Außerdem habe ich alle inneren Elemente unter dem SVG-Basis-Tag eingerückt.
All diese Arbeit hat einen Grund. Vor allem macht es den Code deutlich lesbarer. Zweitens kann ich in meinem bevorzugten Code-Editor, Sublime Text 3, einzelne SVG-Elemente oder ganze SVG-Elemente problemlos falten, während die Klassennamen immer noch dazu beitragen, den Kontext über die Elemente zu behalten.
Okay, lasst uns in den Weihnachtsgeist eintauchen und ein blinkendes Weihnachtslicht animieren! Folgendes wollen wir erreichen:
Sehen Sie das Pen Light von Noah Blon (@noahblon) auf CodePen
Was ich tun möchte, ist das Pfadelement zu animieren, für das ich eine Klasse angegeben habe Birne in der SVG.
Mit CSS gebe ich der Birne eine Füllfarbe und definiere ihre Animationseigenschaften.
.svg-light-Glühlampe fill: hsl (204, 70%, 23%); Animationsname: glühenblau; Animationsdauer: 1s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Easy-In-Out; Animationsrichtung: abwechselnd;
Das füllen Mit dieser Eigenschaft können wir die Farbe eines SVG-Elements festlegen. Wenn möglich, benutze ich gerne HSL (Farbton, Sättigung, Helligkeit), um Farbwerte zu definieren, da es sehr intuitiv ist, damit zu arbeiten. Hier habe ich eine blaue Farbe (Farbton 204) gewählt und den Helligkeitswert auf 23% gehalten, was bedeutet, dass wir eine dunkelblaue Farbe haben.
Ich habe die Birne so eingestellt, dass sie von einer Keyframe-Animation animiert wird glühenblau. Die Dauer der Animation beträgt 1 Sekunde. Die Animation wird unendlich oft wiederholt, was bedeutet, dass sie für immer laufen wird. Das Timing der Animation wird am Anfang und am Ende der Keyframes vereinfacht, sodass am Anfang und Ende der Animation ein glatter aussehender Übergang entsteht. Schließlich ist die Animation auf alternierend eingestellt, dh sie wird vom Anfang bis zum Ende und wieder zurück gehen.
Spitze: Sie wissen vielleicht, dass es eine Abkürzungssyntax für CSS-Animationsregeln gibt, aber ich ziehe es vor, die Regeln aufzuteilen, um sie einfacher zu verstehen, zu ändern und zu teilen, wenn Sie mehrere Animationen verketten.
Nun definiere ich das glühenblau Keyframe-Animation:
@keyframes glow-blue 0% fill: hsl (204, 80%, 23%); 100% fill: hsl (204, 80%, 63%);
Hier habe ich die Anfangs- und Endfüllfarbe des Elements festgelegt, auf das diese Animation angewendet wird. Der einzige Wert, der sich ändert, ist die Helligkeit der Farbe (das "l" -Bit in hsl), dh das Licht wird von einer dunkleren zu einer helleren Version desselben Farbtons animiert. Das ist die intuitive Syntax, die HSL bietet.
Da ich die Animation so definiert habe, dass sie unendlich wechselt, wechselt das Licht von dunkel zu hell und hört nie auf. Es scheint daher zu blinken.
OK, lass uns jetzt unseren inneren Clark W. Griswold kanalisieren und eine ganze Ladung Weihnachtsbeleuchtung animieren. Folgendes werde ich erstellen:
Siehe Pen 540257e4a8b727e435c8e4033602ebb0 von Noah Blon (@noahblon) auf CodePen
Ich habe fünf verschiedenfarbige Lichter erstellt. Jedes Licht ist in einem Div mit einer Breite von 20% verpackt. Diese Divs werden dann nach links verschoben, sodass sie miteinander inline erscheinen. Da ich die SVG nicht auf eine festgelegte Höhe oder Breite eingestellt und die viewbox -Eigenschaft beibehalten habe, ist die SVG mit der Größe des übergeordneten Elements flüssig, ohne das Seitenverhältnis oder die Qualität zu verlieren. Nur eine der großen Stärken von SVG.
Für jedes SVG habe ich die Basisklasse svg-light um ein Farbsuffix erweitert (zum Beispiel svg-light - red). Hier ist ein Auszug der Regeln, mit denen ich die vielen Lichter animiert habe:
.svg-light .bulb Animationsdauer: 1s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Easy-In-Out; Animationsrichtung: abwechselnd; .svg-light-red .bulb fill: hsl (6, 63%, 16%); Animationsname: glutrot; Animationsverzögerung: .5s; Animationsdauer: 1,25s; @keyframes glutrot 0% fill: hsl (6, 63%, 16%); 100% fill: hsl (6, 63%, 56%);
Die grundlegenden Animationseigenschaften werden weiterhin auf die Basisklasse von angewendet SVG-Licht so dass sie zwischen allen Leuchten geteilt werden können. Für jede Farbvariante habe ich eine andere Keyframe-Animation erstellt, z glutrot oder glühenblau und ihnen verschiedene Animationsverzögerungen und -dauern gegeben. Auf diese Weise blinken die Lichter in der entsprechenden Farbe und alle blinken nicht gleichzeitig.
Ich benutze die gleichen Konzepte, die ich oben beschrieben habe, um das berühmteste Rentier, Rudolph, zu animieren. Hier ist das Endergebnis:
Sehen Sie das Pen SVG Rudolph Icon, das von Noah Blon (@noahblon) mit Code animiert wurde, auf CodePen
Zuerst werde ich seine rot glühende Nase animieren:
.svg-rudolph .nose animation-name: glühen; Animationsdauer: 6s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Easy-In-Out; Animationsrichtung: abwechselnd; @keyframes glow 0% fill: hsl (6, 93%, 16%); 50% fill: hsl (6, 93%, 56%); 100% fill: hsl (6, 93%, 56%);
Das sieht unserem Weihnachtslicht ziemlich ähnlich. In der Keyframe-Animation animiere ich zu 50% und dann zu 100%. Da die Animationsdauer sechs Sekunden beträgt, bedeutet dies, dass die Nase in drei Sekunden heller rot wird und diese Farbe noch drei Sekunden bis zum Ende der Animation verbleibt. Da ich die Animation alternativ eingestellt habe, wird sie jetzt vom Ende bis zum Anfang ausgeführt. Daher bleibt die Nase noch drei Sekunden lang voll rot, bevor sie in den letzten drei Sekunden endgültig dunkler wird. Das Verständnis des Zusammenspiels zwischen den Prozentwerten der Keyframes und den Animationsdefinitionen (z. B. Dauer) ist der Schlüssel zum Erstellen effektiver CSS-Animationen.
Ich habe auch einen Übergang auf das Highlight auf Rudys Nase angewendet:
.svg-rudolph .nose-highlight fill-opacity: 0; Animationsname: Highlight-Fade; Animationsdauer: 6s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Easy-In-Out; Animationsrichtung: abwechselnd; @keyframes highlight-fade 0% füllende Deckkraft: 0; 25% Deckkraft: 0; 100% Deckkraft: 1;
Hier animiere ich eine andere SVG-Eigenschaft, die Deckkraft füllen. Diese Eigenschaft nimmt einen Wert zwischen 0 und 1 an. 0 ist vollständig transparent, 1 ist vollständig undurchsichtig. Zum Schluss werde ich Rudy ein bisschen mehr Leben bringen, indem er seine Augen zum Blinzeln bringt:
.svg-rudolph .eye animation-name: blink; Animationsdauer: 8s; Animations-Iterationszahl: unendlich; Ursprungsumwandlung: 50%; @keyframes blinken 0% transform: scaleX (1) scaleY (1); 1% transform: scaleX (1,3) scaleY (0,1); 2% transform: scaleX (1) scaleY (1); 60% transform: scaleX (1) scaleY (1); 61% transform: scaleX (1,3) scaleY (0,1); 62% transform: scaleX (1) scaleY (1); 100% transform: scaleX (1) scaleY (1);
Ich habe eine Animation mit dem Namen erstellt blinken. Diese Animation läuft acht Sekunden und hört nie auf. Ich wechsele diesmal nicht die Animation, stattdessen läuft die Animation bis zum Ende und startet dann wieder von vorne.
In den Keyframes wird die blinkende Animation durch Ändern der Skalierung der Augen auf der X- und Y-Achse erstellt. Bei der 1% -Markierung werden die Augen beispielsweise auf der X-Achse auf 1,3 und auf der Y-Achse um das 1-Fache ihrer normalen Größe skaliert. Mit anderen Worten, sie werden etwas breiter und viel kürzer. Ein Prozent der Animationsdauer später kehrt der Maßstab der Augen zur Normalität zurück. Daher erfolgt der Skalenwechsel extrem schnell; 8 Sekunden / 100 = 8 Hundertstelsekunden.
Eine Schlüsselkomponente bei der Verwendung von transform zum Animieren von SVG-Elementen ist das Festlegen der Elemente Ursprung verwandeln. In den meisten Fällen müssen Sie den Ursprung der Transformationskoordinate als Zentrum des Elements definieren, damit eine Transformation ordnungsgemäß in einer SVG-Datei angewendet werden kann. Im Gegensatz zum HTML-Element ist der Transformationsursprung eines SVG-Elements standardmäßig die obere linke Ecke, die (0,0) -Koordinate. Wenn Sie den Transformationsursprung auf (50%, 50%) setzen, befinden sich die Ursprünge für die X- und Y-Achse der Transformation in der Mitte des Elements. Die Transformationen werden dann korrekt angewendet.
Hinweis: Firefox hat Probleme, wenn es darum geht, den Ursprung zu verändern. Wenn Sie den Transformationsursprung auf 50% setzen, werden die X / Y-Koordinaten des Elements leider zurückgesetzt. Ein Workaround besteht darin, das Element wieder in seine ursprüngliche Position zu bringen.
Für diese Demo animiere ich ein Klingeln wie dieses:
Den Pen 63cdc3e8e785028deb35132d889b6090 von Noah Blon (@noahblon) auf CodePen
Schauen wir uns einen Ausschnitt des SVG-Markups an:
Ich habe die Glocke umrissen und mit einem gefüllt Dieses CSS sollte mittlerweile vertraut sein, aber es gibt ein paar neue Dinge. Zuerst wird in der Keyframe-Animation die Glocke transformiert, aber statt der Skalierung der Transformation transformiere ich den Rotationswert des Elements. Bei dieser Animation schwingt die Klingel zwischen 27 und -27 Grad. Die andere neue Sache, die ich getan habe, ist ein negativer Wert für die Ich habe eine ähnliche Animation auf die Gruppe angewendet, die die Stürmerelemente der Glocke enthält. Diesmal übersetze oder bewege ich die Elemente jedoch nicht entlang der X-Achse, sondern rotiere, sodass der Anschlag nach links und rechts oszilliert. Für diese Animation animiere ich Schnee, der in eine Schneekugel fällt. Siehe Pen 2addb5f98c757d61cec87bdcacb5870d von Noah Blon (@noahblon) auf CodePen Ich habe eine Reihe von Kreiselementen erstellt, um Schnee darzustellen, und ich habe diese Elemente um den Umfang der Schneekugel gelegt und sie in eine Hülle gehüllt Der Schnee ist außerhalb der Schneekugel nicht sichtbar, da ich eine angewendet habe Beschneidungspfad zu der Gruppe, die den Schnee enthält. Ein Beschneidungspfad ist eine Form, die auf SVG-Elemente angewendet werden kann und andere darin maskieren kann. In unserem Beispiel für einen Globus habe ich einen kreisförmigen Beschneidungspfad erstellt, der das Innere des Globus abdeckt. Das Ich habe den Beschneidungspfad in ein gepackt Um den Beschneidungspfad anzuwenden, verweisen wir in der Inline-Beschneidungspfad-Eigenschaft eines SVG-Elements auf dessen URL, in diesem Fall auf die ID, der ein Hash-Symbol vorangestellt ist: Der Schnee ist jetzt nur innerhalb dieses kreisförmigen Beschneidungspfads sichtbar. Der Schnee wird mit den gleichen Techniken animiert, die ich zuvor beschrieben habe. entlang der Y-Achse verschoben und die Füllungsdeckkraft gegen Ende der Animation gegen null. Ja, CSS3-Selektoren funktionieren mit SVG-Elementen! Hier habe ich jedem Schneeelement eine andere Verzögerung gegeben, damit es nicht alle gleichzeitig fallen kann. Zum Schluss animiere ich SVG-basierten Text, um ein solches Ergebnis zu erzielen: Siehe die Pen Message von Noah Blon (@noahblon) auf CodePen SVG bietet uns die Möglichkeit, SVG-Elemente mit CSS mit einem Strich zu versehen. Für meine letzte Animation zeige ich Ihnen, wie Sie den Strich eines Elements schrittweise zeichnen. Um diese Animation zu erreichen, habe ich die folgenden Stricheigenschaften verwendet: Das Einrichten des Strichtextes erfordert einige Arbeit in einem Grafikeditor. Mein Workflow ist wie folgt: Hier ist mein CSS zum Einrichten der Animation: Ich habe die definiert Wenn Sie mehr über diese Technik erfahren möchten, lesen Sie den Beitrag Animierte Strichzeichnung von Jake Archibald in SVG. Ich habe auch den Text so eingestellt, dass er eingeblendet wird, nachdem die Strichzeichnung abgeschlossen ist. Dabei wird die Eigenschaft "Füllungsopazität" verwendet, die der von Snowglobe ähnelt. In diesem Tutorial habe ich gezeigt, dass Sie mit CSS und SVG ziemlich effektive Animationen erstellen können. Wenn Sie sich mit dem gesamten Code und einigen zusätzlichen Animationen beschäftigen möchten, können Sie die Beispiele von Github herunterladen oder meine Sammlung auf Codepen auschecken. Wenn Sie fortgeschrittener werden möchten, können Sie die Steuerung von CSS-Animationen mit JavaScript erkunden oder Ihre CSS-Animationen mit komplexeren JavaScript-Animationen ergänzen, z. B. von der erstaunlichen SVG JS-Bibliothek Snap SVG. Vielen Dank, dass Sie diesem Tutorial gefolgt sind. Ich kann es kaum erwarten, Ihre Kreationen zu sehen! .svg-bell .group-bell Animationsname: Klingelring; Animationsdauer: 3s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Easy-In-Out; Animationsverzögerung: -1,5s; Animationsrichtung: abwechselnd; Ursprungsumwandlung: 50%; @keyframes bell-ring 0% transform: rotate (27deg); 100% umwandeln: drehen (-27 Grad);
Animationsverzögerung. Ein negativer Wert bewirkt, dass die Animation diese Zeit in die Animation einleitet. In diesem Fall startet die Animation nicht 1,5 Sekunden nach dem Start der Animation, sondern beginnt 1,5 Sekunden nach Beginn der Animation. Auf diese Weise beginnt die Klingel an der neutralen Position, bei der sie sich 1,5 Sekunden vor der Animation befindet, und nicht bei der gedrehten Position, bei der sie sich 0 Sekunden bei der Animation befindet. .svg-bell .striker Animationsname: Striker-Move; Animationsdauer: 3s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: linear; Animationsverzögerung: 1,5s; Animationsrichtung: abwechselnd; Ursprungsumwandlung: 50%; @keyframes Striker-Move 0% transform: translateX (3px); 100% transform: translateX (-3px);
Lass es schneien! Lass es schneien! Lass es schneien!
defs Etikett. Mit SVG können wir Elemente erstellen, die wir später wiederverwenden können, wie Beschneidungspfade, Filter oder Formen, die wir ausstanzen können. Es ist empfehlenswert, Definitionen wie Beschneidungspfade in ein defs-Tag zu packen, damit die SVG-Datei leichter gelesen werden kann.
.svg-snowglobe .snow Animationsname: Schneefall; Animationsdauer: 10s; Animations-Iterationszahl: unendlich; Animations-Timing-Funktion: Leichtigkeit; .svg-snowglobe .snow: nth-child (1) Animationsverzögerung: 2s; .svg-snowglobe .snow: nth-child (2) Animationsverzögerung: 4s; .svg-snowglobe .snow: nth-child (3) Animationsverzögerung: 6s; .svg-snowglobe .snow: nth-child (4) Animationsverzögerung: 8s; .svg-snowglobe .snow: nth-child (5) Animationsverzögerung: 10s; .svg-snowglobe .snow: nth-child (6) Animationsverzögerung: 12s; .svg-snowglobe .snow: nth-child (7) Animationsverzögerung: 14s; .svg-snowglobe .snow: nth-child (8) Animationsverzögerung: 16s; .svg-snowglobe .snow: nth-child (9) Animationsverzögerung: 18s; .svg-snowglobe .snow: nth-child (10) Animationsverzögerung: 20s;
Die Grüße der Jahreszeit
Strichbreite: die Breite des Strichs. Dies ist relativ zur Größe der SVG und daher ansprechend.Schlaganfall: die Farbe des Striches.Schlaganfall-Strich: definiert einen gestrichelten Strich. Ein Array alternierender Werte definiert die Länge der gezeichneten Teile der gestrichelten Linie und den leeren Abstand zwischen Strichen.Schlaganfallversatz: Definiert, wo der Strich im Verhältnis zur Länge des Pfads beginnt.
.svg-message .text Strichbreite: 1px; Schlaganfall: HSL (6, 63%, 36%); Strich-Dasharray: 1865,753px 1865,753px; Strich-Dashoffset: 1865,753px; Deckkraft: 0; Füllung: HSL (6, 63%, 36%); Animationsname: Strich, Füllung; Animationsdauer: 1s; Animationsverzögerung: 0, 1s; Animations-Iterationszahl: 1; Animations-Timing-Funktion: Easy-In-Out; Animations-Füllmodus: vorwärts; @keyframes fadeIn 0% Deckkraft: 0; 100% Deckkraft: 1; @keyframes drawStroke 100% stroke-dashoffset: 0
Schlaganfall-Strich Die Eigenschaft ist die Länge des gesamten Pfads (diesen Wert finden Sie in Illustrator unter Dokumentinformationspalette mit der Object-Option). Dann habe ich das gegeben Schlaganfallversatz ein Wert für die Gesamtlänge des Pfads, der den gesamten Hub aus der Sichtbarkeit herausschiebt. Dann durch Keyframe die Animation der Schlaganfallversatz Eigenschaft wird der Strich nach und nach auf dem Bildschirm gezeichnet.
Mit SVG und CSS weiter
