Animieren von SVG-Dateien mit SVGator

( Dieser Artikel wird freundlicherweise von SVGator gesponsert .) Animierte SVG-Dateien sind sehr beliebt geworden. Sie sind vollständig skalierbar (weil sie Vektoren sind), klein und zu 100 % codebasiert, was so viele Transformationen und Optimierungen ermöglicht. Dies hat jedoch seinen Preis: die steile Lernkurve für absolute Anfänger.

SVGator verspricht, dieses Problem zu lösen und macht es wirklich einfach für jeden, einfache Animationen mit einer vertrauten Oberfläche zu erstellen. Es ist eine webbasierte Animations-App, mit der Sie SVG-Animationen importieren, animieren und exportieren können, und es macht Anfängern das Erlernen des Programmierens überflüssig. Wir haben es ausprobiert und es hat uns sehr gut gefallen.

Beginnen Sie mit der Nutzung der App

Gehen Sie zu https://www.svgator.com, um mit der Nutzung der App zu beginnen. Der Anmeldeprozess ist ziemlich einfach (Abbildungen 1 bis 3): Klicken Sie auf „Jetzt animieren“, dann auf „Konto erstellen“, geben Sie Ihre Daten ein und schon kann es losgehen.

Sie werden direkt zum Beispielprojekt „Stopwatch“ weitergeleitet, in dem Sie die Funktionen von SVGator erkunden können. Wenn Sie sich in der App nicht zurechtfinden, gibt es ein übersichtliches Tutorial (Abbildung 4), das Sie bei der Verwendung anleitet: Importieren Sie ein statisches SVG, fügen Sie Elemente zur Zeitachse hinzu und fügen Sie Animatoren zu Elementen und Keyframes hinzu animieren Sie die vier derzeit verfügbaren Eigenschaften (Skalierung, Deckkraft, Position und Drehung).

Wenn Sie jemals eine Animations-App verwendet haben, sollte Ihnen die Benutzeroberfläche von SVGator ziemlich vertraut vorkommen, und alles wird sich wahrscheinlich an der richtigen Stelle anfühlen. Sie fügen nur Elemente hinzu, die Sie animieren, wodurch die Zeitleiste sauber und einfach zu scannen bleibt.

Das Starter-Animationsuhrenprojekt leistet großartige Arbeit, um Sie in SVGator einzuführen. Sie können jederzeit darauf zurückkommen und es als Referenz verwenden.

Nachdem wir nun die Grundlagen aus dem Weg geräumt haben, können wir uns an die Erstellung unserer eigenen Animationen machen!

Was wir machen

Schauen Sie sich dieses einfache Umschlagsymbol an, das wir in Sketch entworfen haben (Abbildung 5). Es beginnt geschlossen, dann öffnet es sich und ein Brief erscheint, gefolgt von seinem Inhalt. Dann springt der Brief aus dem Umschlag und wird vergrößert, um das grüne Kontrollkästchen anzuzeigen.

Hier ist eine Zusammenfassung des Prozesses:

• Wir beginnen mit der Erstellung eines einfachen Storyboards, um unser Symbol in seinen verschiedenen Zuständen zu visualisieren. Wenn wir schon dabei sind, synchronisieren wir ständig mit SVGator und importieren Elemente des Symbols, um sicherzustellen, dass alles wie erwartet funktioniert.
• Dann erstellen wir eine Masterkopie des Symbols, die jedes einzelne Element enthält, das wir benötigen, und exportieren es nach SVGator. Möglicherweise müssen wir diese Masterkopie während des gesamten Prozesses stark modifizieren.
• Als Nächstes erstellen wir die gesamte Animation in einem einzigen SVGator-Projekt und exportieren sie, um sicherzustellen, dass sie wie erwartet funktioniert.
• Schließlich fügen wir das Symbol in ein einfaches vorcodiertes Newsletter-Formular ein, um zu sehen, wie es in einer echten Webumgebung aussieht. Wir werden auch sehen, dass die Größe für kleinere Auflösungen angepasst wird.
• Hier können Sie alles herunterladen.

Lass uns anfangen!

Teil 1: Erstellen und exportieren Sie ein Symbol aus Sketch

• Es gibt einige Unterschiede zwischen dem Entwerfen eines einfachen SVG-Symbols und dem Entwerfen eines SVG-Symbols, das Sie später animieren möchten. Für den Anfang ist es wichtig zu beachten, dass es aus ziemlich einfachen Formen bestehen sollte, und Sie sollten Ihre Animationen um einfache Übergänge herum planen, indem Sie nur Folgendes bearbeiten: Skalierung, Drehung, Position und Deckkraft. Dies sind die einzigen vier Eigenschaften, die Sie mit SVGator derzeit animieren können. Wenn Sie also etwas Komplexeres entworfen haben, können Sie es nicht tun.

Erstellen Sie ein einfaches Storyboard, um Zeit zu sparen

Mit Storyboarding können Sie alle Ihre Übergänge visualisieren, bevor Sie sie tatsächlich in SVGator importieren. Es erleichtert auch das Testen von Transformationen, bevor Sie sich auf die Erstellung der gesamten Animation festlegen. Es kommt oft vor, dass Sie ein Problem mit der Illustration entdecken, das in Sketch hätte anders gemacht werden sollen, und Sie müssen zurückgehen und es ändern. Dann müssen Sie die gesamte Datei erneut in SVGator importieren und mit den Animationen von Grund auf neu beginnen. Da Sie dies nicht jedes Mal tun möchten, hilft Storyboarding, indem es Sie zwingt, Dinge im Voraus zu planen.

Zum Beispiel hatte ich ursprünglich geplant, dass der Umschlag weiter unten auf dem Bildschirm bleibt, aber nachdem ich ihn in SVGator importiert und mit dem Schließen und Öffnen herumgespielt hatte, war klar, dass er in der Mitte bleiben muss, wenn er geschlossen ist, und leicht unten, wenn er geschlossen ist geöffnet — ein Detail, das in den statischen Bildern weggelassen wurde.

Tipp: Schauen Sie sich das Storyboard in der Sketch-Datei an → Zeichenfläche „Storyboard“ .

Ebenenbenennung und -organisation

Wenn Sie Ihre Ebenen in Sketch benennen, funktioniert es wie erwartet, und alle Namen, die Sie in Sketch zugewiesen haben, werden in Ihr Projekt in SVGator übertragen. Aber wenn Sie SVGO Compressor oder ein ähnliches Plugin verwenden, um die SVG-Dateien zu verkleinern, werden die Namen verschwinden und SVGator wird sie durch solche ersetzen, die auf dem HTML-Tag basieren, und Sie werden am Ende etwas Ähnliches wie in Abbildung 7 sehen .

Tipp: Wenn Sie SVGO Compressor bereits für andere SVGs verwenden und es nicht deaktivieren möchten, ziehen Sie die Datei einfach per Drag & Drop aus dem Exportvorschaubereich in Sketch an den gewünschten Ort (Abbildung 8). Dadurch wird SVGO Compressor umgangen und das SVG unverändert exportiert!

Die Verwendung von Gruppen ist auch großartig, da die App sie erkennt, und Sie können sogar gleichzeitig eine Ebene und ihre übergeordnete Gruppe animieren, was die Komplexität etwas erhöht.

Wir haben keine Begrenzung der Anzahl der verwendeten Ebenen festgestellt, aber andererseits ist unser Symbol ziemlich einfach.

Vorbereiten des Symbols für die Animation

Nun, da wir die Idee in einem Storyboard haben und die Masterdatei vorbereitet haben, wollen wir sie so exportieren, dass wir sie in SVGator nachvollziehen können. Überprüfen Sie unbedingt die Ebenenhierarchie. Überlegen Sie, wie eine bestimmte Ebene mit einer anderen interagiert und wo sie im Ebenenbedienfeld platziert werden soll. In Abbildung 9 sehen Sie, dass wir „top_opened“ ausgewählt haben – das ist die geöffnete obere Klappe des Umschlags. Es sollte hinter dem weißen Blatt Papier stehen. Und umgekehrt ist „top_closed“ die geschlossene Klappe des Umschlags und sollte über allem bleiben; Deshalb ist es die erste Ebene in unserer „Content“-Gruppe.

Tipp: Sie fragen sich vielleicht, warum die gesamte obere Klappe aus zwei Schichten besteht. Das liegt daran, dass wir Formen mit SVGator nicht drehen oder wirklich in den 3D-Raum transformieren können. Wir ahmen dies nach, indem wir die erste Schicht stauchen und dann die zweite dehnen, wodurch die Illusion einer 3D-Transformation entsteht .

Wenn Sie sich unser Storyboard ansehen, war die ursprüngliche Idee, das Blatt aus dem Umschlag zu springen und zu vergrößern, um es schließlich zu verbergen. Wir werden das erreichen, indem wir das Originalblatt nach oben schieben, während wir ein weiteres verstecktes Blatt („sheet_top“) vor dem Umschlag haben (Abbildung 10). In dem Moment, in dem sie sich am obersten Punkt treffen, wechseln sie und das vordere Blatt fällt vor den Umschlag. Das ist auch eine visuelle Täuschung – wir können das Blatt nicht wirklich im Z-Raum bewegen, also ist das eine Möglichkeit, es zu emulieren.

Unter Berücksichtigung all dessen können wir nun das Symbol exportieren. Es ist praktisch ein einziges SVG, das alle Elemente enthält, die wir brauchen, und die auf nützliche Weise übereinander gestapelt sind.

Tipp: Stellen Sie vor dem Export sicher, dass alle Elemente sichtbar (nicht ausgeblendet) markiert sind. Sie können sich die Datei, die wir als Export verwendet haben, in der Sketch-Datei → Zeichenfläche „Exportieren“ ansehen .

Teil 2: Animieren des Symbols

Öffnen Sie SVGator und klicken Sie auf „Neu importieren“, um ein neues Projekt zu starten (Abbildung 11):

Wenn Sie alles richtig gemacht haben, sollten Sie so etwas wie Abbildung 12 und den kurzen Clip unten (Clip 1) sehen: alle Schichten übereinander gestapelt und einsatzbereit. Wenn Sie zufällig nicht alles sehen, gehen Sie zurück zu Sketch und überprüfen Sie, ob alle Ebenen sichtbar sind.

Animieren der Öffnung des Umschlags

Wir beginnen mit dem Importieren einiger Elemente in die Timeline. SVGator funktioniert so, dass Sie mit einer leeren Zeitleiste beginnen. Sie wählen aus der Dropdown-Liste „Elemente“ aus, welche Elemente hinzugefügt werden sollen. Sie müssen sie manuell mit dem Augensymbol überprüfen, um zu sehen, welche Ebene Sie suchen. Alternativ können Sie direkt auf das Element auf dem Bildschirm klicken, was dasselbe bewirkt.

Wir werden an den Schritten 1 und 2 des Storyboards arbeiten, insbesondere an der Öffnung der Klappe. Lassen Sie uns die Ebenen deaktivieren, die wir im Moment nicht benötigen. wir kommen später darauf zurück (siehe Clip 1, um zu sehen, wie das geht). Uns sollte nur der grundlegende Umschlag übrig bleiben, was bedeutet, dass Sie die folgenden Ebenen deaktivieren sollten: „sheet_top_content“, „sheet_top_bgr“ und „sheet_bottom_bgr“.

Klicken Sie dann auf „top_opened“ und klicken Sie links auf das Plus-Symbol oder doppelklicken Sie auf das Element, um es der Timeline hinzuzufügen. Machen Sie dasselbe für „top_closed“. Jetzt sollten Sie beide Ebenen in der Timeline haben (Abbildung 13).

Tipp: Wenn Sie den gesamten Vorgang schnell vorspulen möchten, schauen Sie sich Clip 2 an (die Aktionen sind möglicherweise nicht in der gleichen Reihenfolge wie unten beschrieben) .

• Klicken Sie in der Timeline auf „top_closed“ und dann auf das Dropdown-Menü „Animators“. Fügen Sie einen Scale-Animator hinzu.
• Fügen Sie auch einen Scale-Animator für „top_opened“ hinzu.
• Klicken Sie dann auf das kleine Zielsymbol neben dem Ebenennamen in der Zeitachse. Dies ist die transform-origin-Eigenschaft, mit der Sie einen Drehpunkt für die Transformation des Elements festlegen können. Wählen wir die obere Mitte für „top_closed“, weil wir es nach oben verkleinern werden (Abbildung 14), und dann die untere Mitte für „top_opened“.
• Klicken Sie nun, während „top_closed“ ausgewählt ist, auf das Pluszeichen auf der Scale-Eigenschaft, um einen Keyframe zur Timeline hinzuzufügen. In der Timeline erscheint eine gelbe Rautenform. Gehen wir zu 0,4 s und klicken erneut auf das Pluszeichen (Abbildung 15). Dieser zweite Keyframe wird unser letzter Transformationspunkt sein, wenn sich die Klappe bereits geöffnet hat. Lassen Sie uns also seine Skalierung auf 100 % 0 % setzen und den ersten Keyframe auf 100 % 100 % belassen.
• Aktivieren Sie Ease-in für „top_closed“, indem Sie auf das kleine Zielsymbol neben dem Ebenennamen klicken (Abbildung 16).
• Fügen Sie bei 0,4 s einen Deckkraft-Keyframe für „top_closed“ hinzu, indem Sie im Menü „Animatoren“ auf „Deckkraft“ doppelklicken und dann auf das Pluszeichen neben der Eigenschaft „Deckkraft“ in der Timeline klicken. Ändern Sie es auf 0 %.
• Gehen Sie ein paar Frames zurück und fügen Sie 100 % für die Deckkraft hinzu. Wir tun dies, um Störungen im oberen Klappenteil zu vermeiden.

Tipp: Durch die Beschleunigung sieht die Bewegung natürlicher aus, und da wir eine Animation entwerfen, die die Bewegung eines einzelnen Elements emuliert, ist es natürlich, die Animation am Anfang zu verlangsamen und am Ende zu verlangsamen .

Kommen wir nun zum „top_opened“-Teil, dem Ende der Animation. Wie bereits erwähnt, machen wir dies in zwei Teilen, um eine 3D-Öffnung der Klappe zu emulieren.

• Nehmen Sie die Ebene „top_opened“ in der Timeline, gehen Sie zu 0,4 s in der Timeline und fügen Sie einen Scale-Keyframe hinzu, dann einen weiteren Keyframe bei 0,8 s . Stellen Sie die Skala bei 0,4 s auf 100 % 0 % ein und lassen Sie den Skalenwert von 0,8 s bei 100 % 100 % bleiben.
• Aktivieren Sie Ease-out. Drücken Sie auf Wiedergabe, um eine Vorschau der Animation anzuzeigen.

Sieht cool aus, aber jetzt muss sich der gesamte Umschlag nach unten bewegen, damit er in den eingekreisten Hintergrund passt. Suchen Sie in den Elementen nach einer Gruppe mit dem Namen „g“ und fügen Sie ihr einen Positionsanimator hinzu. Fügen Sie einen Positions-Keyframe zu 0,2 s und dann zu 0,8 s hinzu. Ändern Sie den Wert von 0,8 s auf 0 35. Fügen Sie Ease-in-out für eine reibungslose Animation hinzu. Und das ist es! Wir haben den Umschlag erfolgreich geöffnet animiert und ihn sogar ein wenig nach unten bewegen lassen.

Komplexität hinzufügen: Der Buchstabe erscheint

Das Öffnen des Umschlags ist nett, aber wir können es interessanter machen, indem wir ein Blatt Papier einführen. Dazu müssen wir die Blattebene freigeben, die wir „sheet_bottom_bgr“ genannt haben.

• Klicken Sie im Menü „Elemente“ auf das Augensymbol neben „sheet_bottom_bgr“, um es sichtbar zu machen. Fügen Sie es der Timeline hinzu (doppelklicken Sie darauf).
• Gehen Sie nun irgendwo in die Mitte der Animation – zum Beispiel 0,5 s – und fügen Sie einen Positions-Keyframe hinzu. Fügen Sie nach 0,4 s einen weiteren hinzu. Wählen Sie den ersten Keyframe aus und versetzen Sie die Ebene um 140 Pixel auf der Y-Achse (0 140).
• Fügen Sie einen Ease-in-out-Effekt hinzu. Jetzt haben wir eine etwas interessantere Animation.

Tipp: Wenn Sie sich dies lieber in einem Video ansehen möchten, sehen Sie sich Clip 3 unten an .

Noch mehr Komplexität: Skalierung des Buchstabens animieren

Lassen Sie uns, um weiter zu gehen, den Brief animieren, der aus dem Umschlag herausspringt, und einige Textzeilen „geschrieben“ in den Brief enthüllen. Dazu müssen wir die vorherige Animation ein wenig modifizieren. (Wenn Sie vorspulen möchten, können Sie sich einfach den Screencast ansehen und ihn wiederholen.)

• Verschieben Sie zunächst den letzten Positions-Keyframe von „sheet_bottom_bgr“ von 0,9 s auf 1,1 s und ändern Sie ihn auf 0 -190. Was wir damit machen, ist, das Blatt aus dem Umschlag zu nehmen, damit wir es schnell mit dem anderen Blatt, das wir bereits vorbereitet haben, austauschen können.
• Gehen Sie zu 1.1s, aktivieren Sie „sheet_top_content“ und „sheet_top_bgr“ und fügen Sie sie mit Positions-Keyframes für beide von 0–190 zur Timeline hinzu.
• Fügen Sie Keyframes bei 1,5 s hinzu und machen Sie sie zu 0 40.
• Aktivieren Sie Ease-out für beide.

Dies ist die Bewegung des vorderen Blatts, und es sollte so aussehen, wie Sie es in Abbildung 17 sehen.

Jetzt fixieren wir die Rückseite. Es sollte verschwinden, sobald die Vorderseite auftaucht, und das vordere Blatt sollte erst danach erscheinen.

• Gehen Sie zu 1.1s und wählen Sie „sheet_bottom_bgr“. Fügen Sie einen Deckkraft-Animator und einen Keyframe hinzu. Stellen Sie ihn auf 0 % ein.
• Bewegen Sie einen Frame nach hinten und setzen Sie einen weiteren Keyframe für die Deckkraft, sodass er 100 % beträgt.

Nehmen wir die entsprechenden Änderungen auch auf dem Titelblatt vor:

• Gehen Sie zu 1.1s, wählen Sie „sheet_top_bgr“ und fügen Sie einen Deckkraft-Keyframe von 100 % hinzu.
• Verschieben Sie einen Rahmen zurück und stellen Sie die Deckkraft auf 0 % ein.

Sie sollten etwas wie in Abbildung 18 unten sehen. Wir können hier zwei Probleme erkennen:

• Der Inhalt wird vor dem Übergang über der Hülle angezeigt.
• Es gibt einen Fehler beim Austauschen der Rückseite und der Vorderseite.

Lassen Sie uns das erste Problem beheben. Lassen Sie uns den Inhalt und das Kontrollkästchen ausblenden und nach dem Erscheinen des Titelblatts anzeigen.

• Gehen Sie zu 1,5 s, wählen Sie „sheet_top_content“ und fügen Sie einen Deckkraft-Keyframe von 100 % hinzu.
• Gehen Sie einen Frame zurück und setzen Sie einen anderen Deckkraft-Keyframe auf 0 %.
• Jetzt machen wir es etwas interessanter, indem wir jede Ebene innerhalb des vorderen Inhalts animieren.
  • Gehen Sie zu 1.5s und suchen Sie im Menü „Elemente“ nach dem Inhalt von „sheet_top_content“.
  • Fügen Sie Deckkraft-Keyframes für alle drei Ebenen in „sheet_top_content“ hinzu.
  • Stellen Sie die Opazität für alle drei Ebenen auf 0% ein.
  • Wechseln Sie zu 1,7 s und stellen Sie es für alle drei Ebenen auf 100 % ein.
  • Bleiben Sie bei 1.7s und wählen Sie Combined-shape und fügen Sie einen Rotations-Keyframe hinzu.
  • Gehen Sie zu 1,5 s und stellen Sie die Drehung auf -45 Grad ein.
  • Fügen Sie Ease-in-out für die Drehung hinzu.

Das zweite Problem ist ein Fehler, der auftritt, weil unsere Rückseitenfolie zu früh verschwindet.

• Gehen Sie zu 1.1s, wählen Sie „sheet_bottom_bgr“ und verschieben Sie die Opacity-Keyframes um einen Frame nach vorne. Darauf sollten Sie achten (Abbildung 19):

Um es ansprechender zu gestalten, lassen Sie uns das vordere Blatt und den Inhalt skalieren, wenn es aus dem Umschlag herausspringt. Wir könnten den gesamten „top_sheet_content“ skalieren, aber das könnte in einigen Browsern zu einigen Fehlausrichtungen führen. Es ist am besten, jede ihrer untergeordneten Ebenen einzeln zu skalieren.

• Gehen Sie zu 1.1s, wählen Sie „sheet_top_bgr“ und fügen Sie einen Scale-Keyframe hinzu.
  • Machen Sie dasselbe für Combined-Shape, „line_top“ und „line_bottom“.
• Gehen Sie zu 1,5 s und fügen Sie einen weiteren Scale-Keyframe mit Werten von 120 % 120 % hinzu.
  • Machen Sie dasselbe für Combined-Shape, „line_top“ und „line_bottom“.
• Aktivieren Sie Ease-in-out.
• Da wir es skaliert haben, müssen wir den Betrag verringern, um den sich das gesamte vordere Blatt nach unten bewegt. Gehen Sie zu 1.5s, wählen Sie „sheet_top_content“ und „sheet_top_bgr“ aus und ändern Sie deren Position von 0 40 auf 0 20.

Tipp: Es ist in Ordnung, Inhalte in SVG zu skalieren, da alles vektorbasiert ist, sodass Sie keine Qualität verlieren .

So sollte es jetzt aussehen (Abbildung 20):

Alles gut, aber die gesamte Animation muss zum ersten Frame zurückkehren. Das liegt daran, dass wir es wiederverwenden wollen. Unsere Idee ist, dass das vordere Blatt nach unten gleitet und sich der Umschlag schließt und in seine ursprüngliche Position dreht.

• Gehen Sie zu 2.8s, wählen Sie „sheet_top_bgr“ und fügen Sie Positions-Keyframes hinzu.
  • Machen Sie dasselbe für „sheet_top_content“.
• Wir müssen mehr Zeit hinzufügen, da die Standardzeitachse 3 Sekunden beträgt. Klicken Sie auf das Zahnradsymbol in der unteren linken Ecke über der Zeitachse, ändern Sie die Dauer auf 00:04:50 (Abbildung 21) und drücken Sie „Enter“. Wir haben jetzt den Zeitplan verlängert.
• Wechseln Sie zu 3,6 s, fügen Sie ein weiteres Paar Positions-Keyframes hinzu und stellen Sie deren Werte auf 0 360 ein. Ändern Sie die Beschleunigung für die Position beider Ebenen in Ease-in-out.

• Wählen Sie bei 1,3 s „top_closed“ und „top_opened“ und fügen Sie Scale-Keyframes hinzu.
• Fügen Sie zwei weitere bei 1,5 s hinzu. Für die zweiten Keyframes sollte „top_closed“ 100 % 100 % und „top_opened“ 100 % 0 % haben. Wir haben die Klappe hinter dem Schuppenblech erfolgreich geschlossen.
• Jetzt müssen wir den Umschlag nur noch zurück in die Mitte bewegen und sicherstellen, dass die obere Klappe wieder sichtbar ist. Gehen Sie zu 3s und fügen Sie einen Positions-Keyframe für „g“ hinzu. Fügen Sie einen weiteren bei 3,4 s hinzu und machen Sie ihn zu 0 0. Gehen Sie zu 2,8 s und fügen Sie einen Keyframe für die Opazität 0 % für „top_closed“ hinzu. Wechseln Sie dann zu 3s und ändern Sie die Deckkraft auf 100 %.

Glückwünsche! Wir haben das ganze Symbol animiert. So sollte es aussehen (Abbildung 22):

Teil 3: Implementieren der exportierten Animation in einer echten Webumgebung

Lassen Sie uns das Symbol in einer realen Umgebung platzieren. Wir haben ein einfaches Newsletter-Formular codiert und das Symbol dort eingefügt. Sie können das Symbol aus SVGator exportieren, indem Sie auf „SVG exportieren“ klicken.

Nachdem Sie auf „Abonnieren“ geklickt haben, wird eine Dankesnachricht angezeigt und die Symbolanimation beginnt.

Es funktioniert mit zwei SVG-Icons: Das erste ist ein statisches, das nur den ersten Frame der Animation enthält, und das zweite ist das animierte. Sie finden das statische Symbol in der Skizzendatei → Zeichenfläche „statisch exportieren“. Wir haben es als Inline-SVG-Element in den Code eingefügt. Wir haben auch das animierte SVG inline eingebunden, aber standardmäßig ausgeblendet. Sie können den Code im Download überprüfen. Wenn „Abonnieren“ geklickt wird, blenden wir das statische SVG aus und zeigen das animierte SVG, das automatisch startet.

Eine kleine Anpassung, die wir im statischen SVG vorgenommen haben, bestand darin, diese Zeile zu ersetzen:

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… mit diesem:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Dadurch wird das graue Rechteck entfernt, das fälschlicherweise über allen Elementen angezeigt wird.

Auch dieses Beispiel zeigt, wie gut SVGs im Responsive Design sind: Verkleinert man das Fenster, ordnet sich das Layout neu an und das Icon vergrößert sich ohne jeglichen Qualitätsverlust.

Tipp: Als wir das Symbol verkleinert haben, haben wir festgestellt, dass es zu lange dauert, bis das Blatt aus der Leinwand herauskommt, also mussten wir zurückgehen und dieses bestimmte Timing ein wenig bearbeiten, um es kürzer zu machen. Wir haben die letzten Positions-Keyframes von „sheet_top_bgr“ und „sheet_top_content“ auf 3,2 Sekunden verschoben, um die Bewegung zu beschleunigen .

Wenn Sie möchten, können Sie die Animation auch nach dem Export optimieren, aber es ist viel einfacher, dies in SVGator zu tun, wo Sie die praktische Benutzeroberfläche haben.

Fazit

Wir sind ziemlich begeistert von Tools wie SVGator, die den Prozess beim Erstellen einfacher SVG-Animationen wirklich beschleunigen. Es ist einfach zu bedienen und Sie können in kürzester Zeit eine großartig aussehende Animation erhalten.

• Es ist nicht so leistungsfähig wie Adobe After Effects, aber viel anpassungsfähiger und exportiert alles im Code, bereit zur Verwendung im Web. Der Vergleich mit After Effects ist ein Zuckerschlecken, weil beide Tools so unterschiedlich sind.
• Wenn Sie SVGator für schnelle Erkundungen verwenden , werden Anfänger darin einen größeren Wert sehen, aber das bedeutet nicht, dass es nur auf sie ausgerichtet ist. Fortgeschrittene Benutzer können das Tool verwenden, um Ideen zu sammeln oder schnell zu erkunden, ohne ein komplexeres Tool verwenden zu müssen. Da SVGator Code generiert, können Sie ihn von dort übernehmen und alles nach Ihren Wünschen anpassen. Der einzige Nachteil ist, dass die gesamte Animation innerhalb einer Zeitachse platziert wird, was bedeutet, dass es sich im Grunde um eine CSS-Animation handelt und alles, was darin passiert, eine unterschiedliche Verzögerung hat, bevor es gestartet wird. Das bedeutet, dass Sie derzeit in bestimmten Schritten der Animation keine Ereignisse auslösen können, da alles All-in-One-CSS ist.
• Ein Vergleich mit Vanilla-Code ist auch nicht fair, da der Hauptzweck von SVGator darin besteht, die SVG-Animation einfacher und schneller zu machen. Es ist klar, dass Sie mehr erreichen können, wenn Sie das Ganze von Grund auf neu programmieren, aber wie viel Zeit würden Sie dafür benötigen?
• Einer der größten Vorteile von SVGator ist, dass es sehr anfängerfreundlich ist. Jeder kann damit beginnen, und die Lernkurve ist nahezu gleich Null, wenn Sie Erfahrung mit mindestens einer Design- oder Animationssoftware haben.
• Alle Benutzer erhalten eine siebentägige kostenlose Testversion, sobald sie ein Konto erstellt haben. Alle Funktionen sind enthalten, und nach Ablauf der Testphase können sie die Animationen immer noch aus dem Abschnitt „Meine Projekte“ herunterladen. Sie können die App monatlich (18 $ pro Monat), vierteljährlich (45 $ pro Quartal) oder jährlich (144 $ pro Jahr) abonnieren.

Weiterführende Literatur zu SVGator

• So animieren Sie SVG mit SVGator (Video)
• SVGators Twitter (enthält viele Mini-Tutorials und häufige Updates über die App)
• SVGator-FAQ

Weiterführende Literatur zur SVG-Animation mit Code

• „Wie ich aufhörte, mir Sorgen zu machen und lernte, SVG zu animieren“, Boaz Lederer, Medium
• „So optimieren Sie den SVG-Code und animieren ein SVG-Symbol mit CSS und der Snap.svg-Bibliothek“, CodyHouse
• „CSS-Animationen für Nicht-Entwickler Teil 2 – SVGs“, Nicholas Kramer, Prototypr
• „So erstellen Sie ganz einfach schöne SVG-Animationen“, Lewis Menelaws, Medium

Ein besonderer Dank geht an Boyan Kostov für seine Hilfe bei diesem Artikel – wir wissen Ihre Zeit und Mühe zu schätzen!