Entfesseln Sie die Kraft von Pfadanimationen mit SVGator

(Dies ist ein gesponserter Artikel.) Letztes Jahr wurde hier im Smashing Magazine eine umfassende Einführung in die grundlegende Verwendung von SVGator veröffentlicht. Wenn Sie mehr über die Grundlagen von SVGator, das Einrichten Ihrer ersten Projekte und das Erstellen Ihrer ersten Animationen erfahren möchten, empfehlen wir Ihnen dringend, es zu lesen, bevor Sie mit diesem Artikel fortfahren.

Heute werfen wir einen zweiten Blick auf einige der neuen Funktionen, die in den letzten Monaten hinzugefügt wurden, einschließlich des brandneuen Path Animator .

Hinweis : Path Animator ist eine Premium-Funktion von SVGator und steht Testbenutzern nicht zur Verfügung. Während einer siebentägigen Testversion können Sie sehen, wie Path Animator in dem Beispielprojekt funktioniert, das Sie in der App finden, aber Sie können es nicht auf Ihre eigenen SVGs anwenden, es sei denn, Sie haben sich für eine kostenpflichtige Option entschieden planen. SVGator ist ein abonnementbasierter Dienst. Derzeit können Sie zwischen einem Monatsplan (18 USD/Monat) und einem Jahresplan (144 USD insgesamt, 12 USD/Monat) wählen. Für längere Projekte empfehlen wir Ihnen, die jährliche Option in Betracht zu ziehen.

Path Animator ist nur die erste der Premium-Funktionen, die SVGator in den kommenden Monaten veröffentlichen will. Alle neuen Funktionen stehen allen zahlenden Benutzern zur Verfügung, unabhängig davon, wann sie sich angemeldet haben.

Der Charme von Pfadanimationen

SVG-Pfadanimationen sind keineswegs neu. In den letzten Jahren wurde diese Art der Anreicherung von Vektorgrafiken im gesamten Web stark genutzt:

Pfadanimationen wurden vor allem wegen ihrer relativen Einfachheit beliebt: Auch wenn sie auf den ersten Blick beeindruckend und komplex aussehen mögen, ist die zugrunde liegende Regel tatsächlich sehr einfach.

Wie funktionieren Pfadanimationen?

Sie denken vielleicht, dass SVG-Pfadanimationen einige extrem komplizierte Zeichen- und Transformationsfunktionen erfordern. Aber es ist viel einfacher als es aussieht. Um ähnliche Effekte wie im obigen Beispiel zu erzielen, müssen Sie die eigentlichen Pfade nicht generieren, zeichnen oder animieren – Sie animieren lediglich ihre Striche. Mit diesem brillanten Konzept können Sie scheinbar komplexe Animationen erstellen, indem Sie ein einziges SVG-Attribut animieren: stroke-dashoffset .

Das Animieren dieser einen kleinen Eigenschaft ist für den gesamten Effekt verantwortlich. Sobald Sie eine gestrichelte Linie haben, können Sie mit der Position von Strichen und Lücken spielen. Kombinieren Sie es mit den richtigen Einstellungen und Sie erhalten den gewünschten Effekt eines selbstzeichnenden SVG-Pfads.

Wem das noch recht mysteriös klingt oder einfach nur genauer wissen möchte, wie Pfadanimationen entstehen, der findet am Ende des Artikels einige nützliche Ressourcen zu diesem Thema.

Ganz gleich, wie einfache Pfadanimationen mit ihrem Aussehen verglichen werden, denken Sie nicht, dass das Codieren immer einfach ist. Je komplizierter Ihre Dateien werden, desto komplizierter wird es, sie zu animieren. Und hier kommt SVGator zur Rettung.

Außerdem ziehen Sie es manchmal vor, unverarbeitete SVG-Dateien nicht anzufassen. Oder vielleicht schreiben Sie überhaupt nicht gerne Code. Dann ist SVGator genau das Richtige für Sie. Mit dem neuen Path Animator können Sie selbst die komplexesten SVG-Pfadanimationen erstellen, ohne eine Codezeile zu berühren. Sie können die Codierung auch mit der Verwendung von SVGator kombinieren.

Um die Möglichkeiten, die Path Animator uns bietet, besser zu verstehen, werden wir drei separate Beispiele behandeln, die verschiedene Anwendungsfälle von Pfadanimationen präsentieren.

Beispiel #1: Animierter Text

Im ersten Beispiel werden wir Text animieren und den Eindruck von selbstgeschriebenen Briefen erwecken.

Dieser niedliche Effekt wird oft für Schriftzüge verwendet und kann auch auf andere Elemente wie Zeichnungen und Illustrationen angewendet werden. Es gibt jedoch einen Haken: Das animierte Element muss mit Strichen und nicht mit Füllungen gestaltet werden. Das bedeutet für unseren Text, dass wir keine vorhandene Schriftart verwenden können.

Das Umreißen von Schriftarten, egal wie dünn, führt immer zu geschlossenen Formen und nicht zu offenen Pfaden. Es gibt keine regulären Schriftarten, die auf Linien und Strichen basieren.

Wenn wir also Text mit Pfadanimationen animieren wollen, müssen wir ihn selbst zeichnen (oder einige fertige Vektorbuchstaben finden, die für diesen Zweck geeignet sind). Wenn Sie Ihre Buchstaben zeichnen, können Sie gerne eine vorhandene Schriftart oder Typografie als Referenz verwenden – verletzen Sie jedoch kein Urheberrecht! Denken Sie nur daran, dass es nicht möglich ist, Schriftarten standardmäßig zu verwenden.

Vorbereiten der Datei

Anstatt mit einer vorhandenen Schriftart zu beginnen, beginnen wir mit einer einfachen handgezeichneten Skizze:

Jetzt ist es an der Zeit, die Skizze in einem Designtool neu zu zeichnen. Ich habe Figma verwendet, aber Sie können jede App verwenden, die SVG-Exporte unterstützt, wie Sketch, Adobe XD oder Adobe Illustrator.

Normalerweise beginne ich mit dem Stiftwerkzeug und folge grob der als Ebene darunter importierten Skizze:

Sobald ich fertig bin, entferne ich die Skizze vom Hintergrund und verfeinere die Pfade, bis ich mit dem Ergebnis zufrieden bin. Unabhängig davon, welche Werkzeuge oder Techniken Sie verwenden, das Wichtigste ist, die Zeichnung als Linien vorzubereiten und nur Striche und keine Füllungen zu verwenden.

In diesem Beispiel haben wir vier solcher Pfade. Der erste ist der Buchstabe „H“; der zweite sind die drei mittleren Buchstaben „ell“; und „o“ ist das dritte. Der vierte Pfad ist die Linie des Ausrufezeichens.

Der Punkt von "!" ist eine Ausnahme – es ist die einzige Ebene, die wir mit einer Füllung statt mit einem Strich gestalten. Sie wird anders als die anderen Ebenen animiert, ohne den Path Animator zu verwenden.

Beachten Sie, dass alle Pfade, die wir mit Path Animator animieren werden, offen sind, mit Ausnahme des „o“, das eine Ellipse ist. Obwohl das Animieren geschlossener Pfade (wie Ellipsen oder Polygone) mit Path Animator absolut in Ordnung und machbar ist, lohnt es sich, daraus auch einen offenen Pfad zu machen, da dies der einfachste Weg ist, genau zu steuern, wo die Animation beginnt. Für dieses Beispiel habe ich direkt am Ende des Buchstabens „l“ eine kleine Lücke in die Ellipse eingefügt, da Sie dort normalerweise mit der Handschrift „o“ beginnen würden.

Bevor Sie unsere Ebenen in SVGator importieren, ist es am besten, die Struktur der Ebenen zu bereinigen und sie auf beschreibende Weise umzubenennen. Dies wird Ihnen helfen, sich schnell in Ihrer Datei zurechtzufinden, sobald Sie in SVGator arbeiten.

Wenn Sie mehr über die Vorbereitung Ihrer Formen für Pfadanimationen erfahren möchten, empfehle ich Ihnen, sich dieses Tutorial von SVGator anzusehen.

Es lohnt sich, Ihre Schichten sorgfältig vorzubereiten und so weit wie möglich vorauszudenken. Zum Zeitpunkt des Schreibens können Sie in SVGator die Datei nicht erneut in eine bereits vorhandene Animation importieren. Wenn Sie beim Animieren ein Problem entdecken, das einige Änderungen an der Originaldatei erfordert, müssen Sie sie erneut als neues Projekt in SVGator importieren und von Grund auf mit der Arbeit an Ihrer Animation beginnen.

Erstellen einer Animation

Wenn Sie mit der Struktur und Benennung Ihrer Ebenen zufrieden sind, importieren Sie sie in SVGator. Fügen Sie dann den ersten Pfad zur Timeline hinzu und wenden Sie Path Animator darauf an, indem Sie ihn aus der Animators- Liste auswählen oder Shift + T drücken.

Um einen selbstzeichnenden Effekt zu erzielen, ist es unser Ziel, den Strich des Pfads in eine gestrichelte Linie umzuwandeln. Die Länge eines Bindestrichs und einer Lücke sollte gleich der Länge des gesamten Pfads sein. Dadurch können wir den gesamten Pfad mit einer Lücke abdecken, um ihn verschwinden zu lassen. Ändern Sie nach dem stroke-dashoffset auf den Punkt, an dem der gesamte Pfad von einem Strich bedeckt ist.

SVGator macht es uns sehr bequem, indem es automatisch die Länge des Pfades bereitstellt. Alles, was wir tun müssen, ist, es mit einem Klick zu kopieren und in die beiden Parameter einzufügen, die SVGator benötigt: Dashes und Offset . Das Einfügen des Werts in Bindestriche verwandelt den Strich in eine gestrichelte Linie. Sie können es nicht sofort sehen, da der erste Strich der Linie den gesamten Pfad abdeckt. Das Einstellen des Versatzes ändert den stroke-dashoffset , sodass die Lücke dann den Pfad abdeckt.

Wenn Sie fertig sind, erstellen wir eine Animation, indem wir weiter entlang der Zeitachse einen neuen Keyframe hinzufügen. Bring Offset zurück auf Null und… ta-da! Sie haben gerade eine selbstzeichnende Buchstabenanimation erstellt.

Es gibt jedoch ein kleines Problem mit unserer Animation. Der Brief ist animiert – aber von hinten nach vorne. Das heißt, die Animation beginnt am falschen Ende des Pfads. Es gibt zumindest ein paar Möglichkeiten, es zu beheben. Erstens, anstatt den Offset von einem positiven Wert auf Null zu animieren, können wir mit einem negativen Offset beginnen und ihn auf Null bringen. Leider funktioniert dies in einigen Browsern möglicherweise nicht wie erwartet (Safari akzeptiert beispielsweise keine negativen Strichversätze). Während wir darauf warten, dass dieser Fehler behoben wird, wählen wir einen anderen Ansatz.

Ändern wir den Wert für Striche so, dass der Pfad mit einer Lücke beginnt, gefolgt von einem Strich (standardmäßig beginnen gestrichelte Linien immer mit einem Strich). Kehren Sie dann die Werte der Offset-Animation um. Dadurch wird die Linie in die entgegengesetzte Richtung animiert.

Jetzt, da wir mit „H“ fertig sind, können wir alle anderen Pfade auf die gleiche Weise animieren. Schließlich animieren wir schließlich den Punkt des Ausrufezeichens. Da es sich um einen Kreis mit einer Füllung und nicht um einen Umriss handelt, verwenden wir Path Animator nicht. Stattdessen verwenden wir Scale Animator, um den Punkt am Ende der Animation einzublenden.

Denken Sie immer daran, die Position des Transformationsursprungs eines Elements zu überprüfen, wenn Sie mit Skalierungsanimationen spielen. In SVG haben alle Elemente ihren Transformationsursprung standardmäßig in der oberen linken Ecke der Leinwand. Dies macht das Codieren von Transformationsfunktionen oft zu einer sehr schwierigen und langwierigen Aufgabe. Glücklicherweise erspart uns SVGator all diesen Ärger, indem es alle Transformationen in Bezug auf das Objekt und nicht auf die Leinwand berechnet. Standardmäßig legt SVGator den Transformationsursprung jedes Elements in seiner eigenen oberen linken Ecke fest. Sie können ihre Position auf der Zeitachse ändern, indem Sie eine Schaltfläche neben dem Namen der Ebene verwenden.

Lassen Sie uns der Animation den letzten Schliff geben und die Timing-Funktionen anpassen. Timing-Funktionen definieren die zeitliche Geschwindigkeit von animierten Objekten, sodass wir ihre Dynamik manipulieren und die Animation natürlicher aussehen lassen können.

In diesem Fall möchten wir den Eindruck erwecken, dass der Text durch eine einzige kontinuierliche Handbewegung geschrieben wird. Daher habe ich eine Ease-in- Funktion auf den ersten Buchstaben und eine Ease-out- Funktion auf den letzten Buchstaben angewendet, wobei die mittleren Buchstaben mit einer standardmäßigen linearen Funktion belassen wurden. In SVGator können Timing-Funktionen von der Zeitachse neben den Parametern des Animators angewendet werden:

Nachdem Sie dieselbe Logik auf das Ausrufezeichen angewendet haben, ist unsere Animation fertig und kann exportiert werden!

Beispiel #2: Animiertes Symbol

Lassen Sie uns nun ein stärker auf die Benutzeroberfläche ausgerichtetes Beispiel analysieren. Hier werden wir SVGator verwenden, um eine beliebte Symbolanimation zu replizieren: ein Hamburger-Menü in eine Schließen-Schaltfläche umzuwandeln.

Das Ziel der Animation ist es, das Symbol sanft zu transformieren, sodass der mittlere Balken des Hamburgers zu einem Kreis wird und die umgebenden Balken einander kreuzen, wodurch ein geschlossenes Symbol entsteht.

Vorbereiten der Datei

Um besser zu verstehen, was wir erstellen und wie man eine Datei für eine solche Animation vorbereitet, ist es hilfreich, mit einer groben Skizze zu beginnen, die die Schlüsselzustände der Animation darstellt.

Sobald wir eine allgemeine Vorstellung davon haben, woraus unsere Animation besteht, können wir die Formen zeichnen, mit denen wir sie erstellen können. Beginnen wir mit dem Kreis. Da wir die Pfadanimation verwenden werden, müssen wir einen Pfad erstellen, der die gesamte Strecke der Linie abdeckt, beginnend als gerader Balken in der Mitte des Hamburger-Menüs und als Kreis darum herum endend.

Die anderen beiden Balken des Menüsymbols haben eine einfachere Aufgabe – wir drehen sie einfach und richten sie an der Mitte des Kreises aus. Sobald wir alle Formen kombiniert haben, können wir die Datei als SVG exportieren und in SVGator importieren.

Erstellen einer Animation

Beginnen wir damit, die erste Form zur Zeitleiste hinzuzufügen und Path Animator darauf anzuwenden. Für den Anfangszustand soll nur die horizontale Linie in der Mitte sichtbar sein, während der Rest des Pfades verborgen bleibt. Um dies zu erreichen, stellen Sie die Länge des Bindestrichs so ein, dass sie der Länge der Hamburgerlinien entspricht. Dies macht unsere gerade Mittellinie des Menüsymbols. Um den richtigen Wert zu finden, können Sie die Länge einer der anderen Linien des Hamburgers verwenden. Sie können es aus der Timeline oder aus dem Bedienfeld „Eigenschaften“ in der rechten Seitenleiste der App kopieren.

Stellen Sie dann die Länge der folgenden Lücke auf einen Wert ein, der größer ist als die verbleibende Länge des Pfads, damit er transparent wird.

Der Ausgangszustand unserer Animation ist nun fertig. Was als nächstes passiert, ist, dass wir diese Linie in einen Kreis verwandeln. Dazu müssen zwei Dinge gleichzeitig passieren. Zuerst verwenden wir Offset , um die Linie entlang des Pfads zu verschieben. Zweitens ändern wir die Breite des Strichs, um die Linie länger zu machen und den gesamten Kreis abzudecken.

Wenn der Kreis fertig ist, kümmern wir uns um das Schließen-Symbol. Wie zuvor müssen wir zwei Animationen gleichzeitig hinzufügen. Zuerst möchten wir, dass sich die obere Linie nach unten neigt (45 Grad) und die untere Linie sich nach oben bewegt (-45 Grad), bis sie sich symmetrisch kreuzen. Zweitens müssen wir die Linien leicht nach rechts verschieben, damit sie am Kreis ausgerichtet bleiben.

Wie Sie sich vielleicht an das vorherige Beispiel erinnern, befinden sich die Transformationsursprünge in SVGator standardmäßig in der oberen linken Ecke. Das ist sehr praktisch für uns, da wir sie in diesem Fall genau dort haben wollen. Alles, was wir tun müssen, ist, die richtigen Rotationswinkel anzuwenden.

Beachten Sie beim Ausrichten der Linien am Kreis, dass wir sie nicht separat verschieben müssen. Anstatt beiden Linien Animatoren hinzuzufügen, können wir der Zeitleiste eine Gruppe hinzufügen, die beide enthält, und sie zusammen mit einem einzigen Positionsanimator animieren. Das ist einer dieser Momente, in denen sich eine schöne, saubere Dateistruktur auszahlt.

Als nächstes müssen Sie eine umgekehrte Animation hinzufügen, die die Schließen-Schaltfläche wieder in ein Hamburger-Menü verwandelt. Um das zu erreichen, können wir die vorherigen Schritte im Grunde in umgekehrter Reihenfolge ausführen. Um die Dinge etwas zu beschleunigen, kopieren Sie die vorhandenen Keyframes und fügen Sie sie auf der Timeline ein – das ist eine weitere Verbesserung, die SVGator in den letzten Monaten eingeführt hat.

Wenn Sie fertig sind, vergessen Sie nicht, die Timing-Funktionen anzupassen. Hier habe ich mich für einen Ease-in-out- Effekt für alle Elemente entschieden. Unser Symbol ist einsatzbereit.

Implementierung

Auch wenn die Implementierung von Mikrointeraktionen den Rahmen dieses Artikels bei weitem sprengen würde, möchte ich kurz beschreiben, wie eine solche Animation in einem realen Projekt zum Leben erweckt werden kann.

Illustrationen und dekorative Animationen sind normalerweise einfacher. Sehr oft können Sie von SVGator generierte SVG-Dateien sofort verwenden. Das können wir von unserer Ikone allerdings nicht behaupten. Wir möchten, dass der erste Teil der Animation ausgelöst wird, wenn Benutzer auf die Schaltfläche klicken, um die Menüleiste zu öffnen, und der zweite Teil der Animation abgespielt wird, sobald sie zum zweiten Mal darauf klicken, um das Menü zu schließen.

Dazu müssen wir unsere Animation in einige einzelne Teile zerlegen. Wir werden hier nicht die technischen Details der Implementierung einer solchen Animation diskutieren, da dies sehr stark von der Umgebung und dem Technologie-Stack abhängt, mit dem Sie arbeiten. Aber lassen Sie uns zumindest die generierte SVG-Datei untersuchen, um die entscheidenden Animationszustände zu extrahieren.

Wir beginnen damit, den Hintergrund auszublenden und die Größe der Leinwand an die Abmessungen des Symbols anzupassen. In SVGator können wir dies jederzeit tun, und es gibt keine Beschränkungen für die Größe unserer Leinwand. Wir können auch die Stile des Symbols bearbeiten, z. B. Farbe und Breite des Strichs, und testen, wie Ihre Grafik mit einem Schalter in der oberen rechten Ecke auf einem dunklen Hintergrund aussieht.

Wenn wir fertig sind, können wir das Symbol in SVG exportieren und es in einem Texteditor öffnen.

Elemente, die Sie im Hauptteil des Dokuments sehen, sind die Komponenten Ihrer Grafik. Sie sollten auch beachten, dass die erste Codezeile außergewöhnlich lang ist. Direkt nach dem öffnenden <svg> -Tag gibt es ein <style> -Element mit reichlich verkleinertem CSS darin. Dort findet die ganze Animation statt.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

Es ist wirklich nett von SVGator, den Code für uns zu minimieren. Wir müssen es jedoch rückgängig machen. Sobald der CSS-Code vollständig ausgeschrieben ist (Sie können dies in den Entwicklungstools Ihres Browsers oder in einem der vielen Online-Code-Formatierer tun), werden Sie sehen, dass es sich um eine lange Liste von @keyframes , gefolgt von einer Liste von id -Regeln, die verwendet werden die @keyframes in ihren animation .

Der Code mag unlesbar aussehen (selbst wenn er schön formatiert ist), aber er ist eher repetitiv. Sobald Sie die zugrunde liegende Regel verstanden haben, ist es nicht mehr so ​​schwer, sie zu befolgen. Zuerst haben wir die @keyframes . Jedes animierte Element hat seine eigene @keyframes @-Regel. Sie werden in der gleichen Reihenfolge wie Elemente in SVGator sortiert. Daher gilt in unserem Fall die erste @-Regel für die mittlere Leiste des Hamburger-Symbols, die zweite für die obere Leiste und so weiter. Die darin enthaltenen Keyframes stimmen auch mit der Reihenfolge der in SVGator erstellten Keyframes überein:

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

Alles, was Sie jetzt tun müssen, ist, diese Werte aus den Keyframes zu verwenden, um Ihre Interaktion zu codieren. Es liegt noch viel Arbeit vor uns, aber dank SVGator ist der entscheidende Teil bereits erledigt.

Was dann passiert, ist eine andere Geschichte. Wenn Sie jedoch neugierig sind, ein Beispiel zu sehen, wie diese Animation in der Praxis funktionieren könnte, haben wir hier einen kleinen CodePen für Sie:

Das Beispiel wurde mit React erstellt und verwendet Zustände, um CSS-Klassen zu wechseln und Übergänge zwischen den jeweiligen CSS-Werten auszulösen. Daher sind animation und @keyframes @-Regeln nicht erforderlich.

Sie können eine Reihe von benutzerdefinierten CSS-Prioritäten verwenden, die oben im SCSS-Code aufgeführt sind, um die Gestaltung des Symbols sowie die Dauer der Übergänge zu steuern.

Beispiel #3: Animierte Illustration

Als drittes und letztes Beispiel dieses Artikels erstellen wir eine animierte Illustration eines Atoms mit umlaufenden Teilchen.

Gestrichelte Linien und gepunktete Linien

In den beiden vorherigen Beispielen haben wir uns gestrichelte SVG-Pfade zunutze gemacht. Gestrichelte Linien sind cool, aber wussten Sie, dass SVG auch gepunktete Linien unterstützt? Eine gepunktete Linie in SVG ist nicht mehr, nicht weniger als eine gestrichelte Linie mit runden Kappen, und die Länge der Striche ist gleich Null.

Wenn wir einen Pfad mit vielen Punkten haben können, wer hat dann gesagt, dass wir keinen Pfad mit einem einzigen Punkt haben können? Animieren Sie den Versatz des Strichs, und Sie erhalten eine Animation eines Kreises, der einem beliebigen Pfad folgt. In diesem Beispiel ist der Pfad eine Ellipse und ein Kreis stellt ein umlaufendes Teilchen dar.

Vorbereiten der Datei

Da kein SVG-Element gleichzeitig zwei Striche haben kann, benötigen wir für jedes der Partikel zwei Ellipsen. Der erste von ihnen wird eine Umlaufbahn sein, der zweite wird für das Teilchen sein. Multipliziere es mit drei, kombiniere es mit einem weiteren Kreis in der Mitte für den Kern und hier ist es: eine einfache Atomillustration, fertig zum Animieren.

Hinweis : Zum Zeitpunkt des Schreibens ist das Erstellen von gepunkteten Linien in Figma eine schwierige Aufgabe. Sie können nicht nur die Länge eines Strichs nicht auf Null setzen, Sie können auch keine Lücke zwischen den Strichen erstellen, die lang genug ist, um den gesamten Pfad abzudecken. Und beim Export sind sowieso alle Einstellungen weg. Lassen Sie sich dennoch nicht entmutigen, wenn Sie mit Figma arbeiten. Wir werden all diese Probleme einfach in SVGator beheben. Und wenn Sie in Sketch, Illustrator oder ähnlichem arbeiten, sollten Sie diese Probleme überhaupt nicht haben.

Erstellen einer Animation

Nachdem Sie die SVG-Datei in SVGator importiert haben, beginnen wir damit, die gepunkteten Linien zu reparieren. Wie oben erwähnt, benötigen wir zum Erzielen eines perfekten kreisförmigen Punkts eine Strichlänge, die auf Null gesetzt ist. Wir setzen auch die Länge der Lücke gleich der Länge des Pfades (von oben kopiert). Dadurch wird unser Punkt der einzige sichtbare.

Wenn alle drei Partikel fertig sind, können wir neue Keyframes hinzufügen und die Versätze um eine volle Länge des Pfads animieren. Schließlich spielen wir ein wenig mit den Offset-Werten, damit sich die Positionen der Punkte etwas zufälliger anfühlen.

Denken Sie daran, wenn Sie Ihre Animation zu schnell oder zu langsam finden, können Sie die Dauer jederzeit in den Einstellungen ändern. Momentan unterstützt SVGator Animationen mit einer Länge von bis zu 30 Sekunden.

Als letzten Schliff habe ich der ganzen Grafik noch ein wenig Sprungkraft hinzugefügt.

Jetzt ist die Animation fertig und kann verwendet werden, vielleicht als Ladergrafik.

Ein kurzes Wort zur Barrierefreiheit

Wie Sie sehen, sind den Möglichkeiten mit SVG kaum Grenzen gesetzt. Und Pfadanimationen sind ein sehr wichtiger Teil des Werkzeugkastens. Aber wie ein weiser Mann einmal sagte, mit großer Macht kommt große Verantwortung. Bitte verzichten Sie darauf, sie zu überbeanspruchen. Animationen können Ihrem Produkt Leben einhauchen und die Benutzer begeistern, aber zu viele Animationen können auch das gesamte Erlebnis ruinieren.

Erwägen Sie auch, Benutzern zu erlauben, Animationen zu deaktivieren. Menschen, die an Reisekrankheit und anderen verwandten Erkrankungen leiden, werden eine solche Option sehr hilfreich finden.

Fazit

Das war `s für heute. Ich hoffe, Ihnen hat diese Reise durch die Möglichkeiten von Pfadanimationen gefallen. Um sie selbst auszuprobieren, besuchen Sie einfach die Website von SVGator, wo Sie auch mehr über die anderen Funktionen und Preise erfahren können. Wenn Sie Anmerkungen oder Fragen haben, zögern Sie bitte nicht, diese in den Kommentaren hinzuzufügen. Und seien Sie gespannt auf die nächsten Updates zu SVGator – es sind bereits viele andere erstaunliche neue Funktionen auf dem Weg!

Weiterführende Lektüre

• „How SVG Line Animation Works“, Chris Coyer Eine illustrierte Anleitung zu SVG-Pfadanimationen, die wunderbar erklärt, wie sie wirklich funktionieren.
• „Ein praktischer Leitfaden für SVG und Design-Tools“, Mikolaj Dobrucki Ein umfassender Leitfaden zu SVG-Grundlagen, der Ihnen hilft zu verstehen, wie SVG von Design-Tools generiert wird und wie Sie damit zu Ihrem eigenen Vorteil arbeiten können.
• „Revisiting Prefers-Reduced-Motion, The Reduced Motion Media Query“, Eric Bailey Eine großartige Einführung in das Thema Animation und Zugänglichkeit.
• „So erstellen Sie eine Pfadanimation“, SVGator Ein kurzes und süßes YouTube-Video-Tutorial über Path Animator

Nützliche Ressourcen

• SVGator-Pfadanimationen Lesen Sie mehr über Pfadanimator von seiner ursprünglichen Zielseite.
• SVGator-Tutorials Eine Reihe von Video-Tutorials, die wichtige Funktionen von SVGator erklären.
• SVGator-Hilfezentrum Antworten auf die häufigsten Fragen zu SVGator, seinen Funktionen und Mitgliedschaftsplänen.