Advertisement
  1. Web Design
  2. SVG

Animieren eines Symbols mit SVGator-, Figma- und Envato Elements

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial nehmen wir ein SVG-basiertes Symbol von Envato Elements, nehmen einige vorbereitende Änderungen in Figma vor und animieren es dann mit SVGator. Lassen Sie uns anfangen!

Was werden Sie brauchen?

Bevor wir beginnen, laden Sie dieses Symbolpaket von Envato Elements herunter. Extrahieren Sie nach dem Herunterladen die Zip-Datei und suchen Sie das Symbol mit der Nummer 15, das wie eine kleine Tastatur und ein kleiner Bildschirm aussieht.

Developer 50 icons on envato elementsDeveloper 50 icons on envato elementsDeveloper 50 icons on envato elements
Entwickler 50, Symbol-Pack

Sie benötigen außerdem ein kostenpflichtiges SVGator-Konto, da die kostenlose Testversion keine der von uns verwendeten Funktionen bietet.

1. Bereiten Sie die Datei in Figma vor

Das Symbol, das wir verwenden werden, ist noch nicht genau so, wie wir es für die Animation benötigen. Daher werden wir Figma verwenden, um ein paar kleine Änderungen vorzunehmen. Sie können natürlich jedes beliebige Vektorbearbeitungswerkzeug verwenden. In diesem Tutorial wird Figma verwendet, da alles mit der kostenlosen Ebene erledigt werden kann.

Melden Sie sich bei Figma an, erstellen und öffnen Sie eine neue Datei und ziehen Sie unser 15-Symbol per Drag-and-Drop in die Benutzeroberfläche, um sie zu importieren.

Wir beginnen mit der Vergrößerung des Symbols, damit die Arbeit etwas einfacher ist. Wählen Sie dazu im Ebenen-Bedienfeld den Rahmen der obersten Ebene aus und erhöhen Sie in der rechten Seitenleiste die Höhe und Breite von derzeit 64 auf 128:

increase sizeincrease sizeincrease size

Warum ändern wir unser SVG-Symbol?

Der Grund, warum wir die Datei derzeit nicht verwenden können, ist, dass wir die Pfadanimationswerkzeuge von SVGator verwenden, die die Technik der Animation der Kontur auf einem Pfad nutzen. Wie dies manuell gemacht wird, können Sie in unserem Tutorial sehen:

Wir werden die kleinen Linien auf dem Computerbildschirm unseres Symbols animieren, aber standardmäßig haben diese Linien keine Kontur zum Animieren. Wenn wir uns die Pfadknoten für eine der Linien ansehen, sehen wir Folgendes:

Dies ist eine Form, die nur eine Füllung enthält, sodass wir sie nicht so animieren können, wie wir es möchten. Stattdessen müssen wir es konvertieren, damit es gleich aussieht, aber tatsächlich ein Pfad mit einer Kontur ist, der wie folgt angewendet wird:

Konvertieren Sie mit Konturen von gefüllten Formen in Pfade

Es gibt keine automatisierte Möglichkeit, die sieben Zeilen auf unserem kleinen Computerbildschirm von gefüllten Formen in Pfade mit Konturen umzuwandeln. Stattdessen werden wir jede einzelne neu erstellen.

Beginnen Sie mit der Auswahl des Zeichenstift-Werkzeugs. Beachten Sie, dass das Zeichenstift-Werkzeug hier tatsächlich einfacher zu verwenden ist als das Linienwerkzeug, da Sie Ihre Knoten einfacher auf dem Raster zentrieren können.

Wir beginnen mit der Neuerstellung der ersten blauen Linie am oberen Bildschirmrand. Stellen Sie sicher, dass Sie so weit hineingezoomt sind, dass das Pixelraster auf der Figma-Leinwand angezeigt wird. Klicken Sie auf das Gitter mit zwei Zellen am linken Ende, um einen Knoten zu erstellen:

Klicken Sie dann erneut auf zwei Rasterzellen am rechten Ende, um einen zweiten Knoten zu erstellen:

Drücken Sie die Eingabetaste, um die Zeile zu vervollständigen:

Jetzt müssen wir nur noch die Kontur so gestalten, dass unser neuer Pfad wie die ursprüngliche blaue Linie aussieht.

Stellen Sie im Kontur-Bedienfeld die Breite auf 4 ein.

Öffnen Sie die erweiterten Kontur-Eigenschaften, indem Sie auf das Dreipunktsymbol rechts neben der Breiteneinstellung klicken:

Wählen Sie in der Dropdown-Liste Kappe die Option Runde:

Nachdem die Linienform neu erstellt wurde, können wir sie jetzt auf die richtige Farbe einstellen. Öffnen Sie den Konturfarbwähler und probieren Sie die Farbe aus der anderen blauen Linie aus:

Ihre fertige Zeile sollte jetzt identisch mit dem Original aussehen.

Wiederholen Sie dies für die anderen sechs Zeilen

Nachdem eine Zeile erstellt wurde, müssen wir jetzt die anderen sechs Zeilen neu erstellen. Bevor Sie dies tun, wählen Sie die bereits erstellte Zeile aus und gruppieren Sie sie. Erstellen Sie alle Ihre neuen Zeilen innerhalb dieser Gruppe, um sie organisiert und von den ursprünglichen Zeilen zu unterscheiden.

Der Vorgang zum Neuerstellen der anderen sechs Zeilen ist jedes Mal der gleiche:

  1. Verwenden Sie das Zeichenstift-Werkzeug, um an beiden Enden Rasterquadrate der Linie 2 zu erstellen
  2. Stellen Sie die Konturbreite auf 4 ein
  3. Setzen Sie die Kappen auf rund
  4. Probieren Sie die richtige Farbe aus einer anderen Zeile aus

Wenn Sie mit der Neuerstellung der Linien fertig sind, blenden Sie die Gruppe aus, in der Sie sie erstellt haben. Wählen Sie dann alle ursprünglichen Linien aus und löschen Sie sie.

Exportieren Sie die vorbereitete SVG

Unsere SVG-Datei kann jetzt animiert werden, sodass wir sie exportieren können.

Bevor wir dies tun, ist es eine gute Idee, den übergeordneten Frame des Dokuments umzubenennen, da dieser Frame, wie auch immer Sie ihn nennen, zum Namen Ihres exportierten Symbols wird. Ich habe mich für "icon_computer" entschieden:

Wenn Sie dies getan haben, suchen Sie unten in der rechten Seitenleiste nach dem Export-Bedienfeld, klicken Sie dort auf die Schaltfläche +, um einen neuen Export zu erstellen, und wählen Sie in der Dropdown-Liste Dateityp die Option SVG aus:

In SVGator für Animation importieren

Melden Sie sich bei SVGator an und klicken Sie im Dashboard auf die Schaltfläche Neu importieren, um Ihr SVG-Symbol aufzurufen.

Sobald der Import abgeschlossen ist, werden Sie automatisch in den Hauptbereich von SVGator weitergeleitet, wo Sie mit der Animation des Bildes beginnen können.

2. Animieren Sie die Linien

Im ersten Teil unserer Animation werden alle Linien auf dem Bildschirm des Symbolcomputers nacheinander von links nach rechts eingezeichnet, als würden sie eingegeben. Sobald dies abgeschlossen ist, animieren wir das Drücken der Taste auf der Tastatur, um dies zu tun.

Alle Linien ausblenden 

Wenn wir mit der Animation beginnen, werden Sie möglicherweise feststellen, dass ein Teil einer Zeile angezeigt wird, bevor dies beabsichtigt ist. Sie können dies vermeiden, indem Sie die Einstellungen in Ihrer Animation anpassen. Es ist jedoch einfacher, alle Zeilen auszublenden, bis die Animationen beginnen.

Beginnen Sie mit der Auswahl der ersten Zeile auf der Leinwand. SVGator funktioniert, indem Sie einen von fünf Animators zur Zeitleiste hinzufügen. In unserem Fall möchten wir, wenn wir die Zeile ausblenden möchten, einen Deckkraft-Animator hinzufügen. Schauen Sie dazu im Animator-Fenster in der linken Seitenleiste nach und klicken Sie auf die Schaltfläche + links neben Deckkraft:

Auf Ihrer Timeline wird jetzt eine Deckkraft-Spur angezeigt, und wir können mit dem Hinzufügen von Keyframes beginnen. Klicken Sie dazu auf das kleine blaue + Symbol (siehe Abbildung unten):

Jetzt können wir die Deckkraft für unsere erste Zeile an dieser Stelle in der Animation ändern. Klicken Sie auf die Stelle, an der derzeit 100% steht, und ändern Sie den Wert in 0%:

Sie sollten jetzt sehen, dass Ihre erste Zeile nicht mehr sichtbar ist.

Wiederholen Sie die gleichen Schritte für jede Zeile auf dem Computerbildschirm des Symbols und setzen Sie sie im ersten Frame der Animation auf 0% Deckkraft:

Animieren der ersten Zeile (path_49)

Beginnen wir jetzt mit der eigentlichen Animation und lassen die erste unserer Linien von links erscheinen.

Wir möchten, dass unsere Linie wieder sichtbar wird. Verschieben Sie den Abspielkopf in den zweiten Frame, fügen Sie einen weiteren Keyframe hinzu und setzen Sie ihn auf 100%:

Die Linie sollte nun wieder auf Ihrer Leinwand erscheinen.

Zurück im Animators-Bedienfeld fügen Sie der Linie ebenfalls einen Pfad-Animator hinzu. Sie werden sehen, dass dieser Animator zwei Eigenschaften hat: Versatz und Striche. Klicken Sie auf die kleine Schaltfläche "+", um Keyframes für diese Eigenschaften hinzuzufügen.

Wir müssen hier zwei Werte ändern: Versatz und den ersten Wert in Strichen. In beiden Fällen ist der von uns angegebene Wert die Pfadlänge + 1.

Sie können im Pfad-Animator sehen, wie lang das aktuell ausgewählte Element ist, in diesem Fall 40. Daher müssen wir den Versatz und den ersten Wert in Strichen wie folgt auf 41 ändern:

Der Grund, warum wir diesen Wert auf 41 setzen, ist, dass wenn wir 40 (die Länge des Pfades) angeben, ein Teil der Linie an ihrem rechten Ende angezeigt wird. Durch Hinzufügen von 1 wird die Animation nur ein wenig länger als der Pfad selbst, wodurch sichergestellt wird, dass die gesamte Linie bis zum Abschluss der Animation ausgeblendet ist.

An dieser Stelle sollten Sie ein kleines Stück der Linie am linken Ende sehen, und wir können sie jetzt durch Animieren des Versatz-Werts auf ihre übliche Länge herauswachsen lassen.

Bewegen Sie den Abspielkopf über 5 Frames, fügen Sie einen neuen Versatz-Keyframe hinzu und setzen Sie seinen Wert auf 0:

Drücken Sie die Wiedergabetaste (oder drücken Sie die Leertaste), und die erste Zeile sollte von links nach rechts wachsen.

Animieren Sie die zweite Zeile (path_50)

Wir müssen jetzt denselben Prozess durchlaufen und die zweite Zeile animieren, um von links hineinzuwachsen. Wir möchten, dass es nach Abschluss der ersten Zeile gezeichnet wird. Es sieht also so aus, als würde eine Person nach Abschluss der ersten Zeile eine neue Zeile eingeben.

Positionieren Sie Ihren Abspielkopf einen Frame weiter als den letzten Keyframe der ersten Zeile. Ziehen Sie den vorhandenen Keyframe der zweiten Zeile mit einer Deckkraft von 0% an diese Position. Bewegen Sie dann den Abspielkopf über ein weiteres Feld, fügen Sie einen neuen Keyframe hinzu und setzen Sie ihn auf 100%, um die zweite Zeile sichtbar zu machen:

Fügen Sie nun wie in der ersten Zeile einen Pfad-Animator und Keyframes für Versatz und Striche hinzu. Die Länge dieses Pfades beträgt 28, also addieren Sie 1 zu diesem Wert und setzen Sie sowohl Versatz als auch den ersten Wert von Strichen wie folgt auf 29:

Da unsere zweite Linie kürzer als unsere erste ist, sollte es weniger Zeit dauern, bis sie vollständig gezeichnet ist. Bewegen Sie den Abspielkopf dieses Mal über vier statt über fünf Frames, fügen Sie einen neuen Keyframe hinzu und setzen Sie ihn auf 0.

Spielen Sie Ihre Animation erneut ab und Sie sollten sehen, dass beide Linien auf den Computerbildschirm gezeichnet werden.

Animieren Sie die verbleibenden Zeilen

Wiederholen Sie die gleichen Schritte für die verbleibenden 5 Zeilen:

  1. Verschieben Sie den Keyframe mit einer Deckkraft von 0% in einen Frame weiter als den letzten Keyframe in der Animation der vorherigen Zeile.
  2. Fügen Sie einen Frame später einen Keyframe mit 100% Deckkraft hinzu.
  3. Fügen Sie im selben Frame einen Pfad-Animator und Keyframes für die Eigenschaften Versatz und Striche hinzu.
  4. Stellen Sie den Versatz und den ersten Wert von Strichen auf die Pfadlänge +1 ein
  5. Erstellen Sie ein paar Frames entlang ein neues Versatz-Keyframe und setzen Sie es auf 0

Wie viele Frames Sie benötigen, um den Versatz-Wert für jede Zeile zu animieren, hängt von der Zeilenlänge ab: Verwenden Sie einen Bereich von 3 Frames für kurze Zeilen bis 5 Frames für die längsten Zeilen.

In den folgenden Screenshots sehen Sie eine gute Animationslänge für jede Zeile und wie Ihre fertigen Keyframes jeweils aussehen sollten.

Keyframes der dritten Zeile (path_51)

Keyframes der vierten Zeile (path_52)

Keyframes der fünften Zeile (path_53)

Keyframes der sechsten Zeile (path_54)

Keyframes der siebten Zeile (path_55)

Ihre Animation der auf dem Bildschirm gezeichneten Linien ist jetzt abgeschlossen. Probieren Sie es aus und sehen Sie zu, wie alle nacheinander erscheinen.

3. Ändern Sie die Timeline-Einstellungen

Jetzt haben wir den größten Teil unserer Animation auf der Timeline angeordnet. Wir haben genügend Informationen, um zu entscheiden, wie lange die gesamte Animation dauern soll. Es dauert ungefähr 1,5 Sekunden, bis die Linienanimationen ausgeführt werden. Daher lassen wir am Ende ein wenig Platz für ein paar zusätzliche Schritte, die wir in Kürze ausführen werden, und stellen unsere Animation auf 2 Sekunden ein.

Um die Länge der Animation festzulegen, klicken Sie auf das Zahnradsymbol auf der linken Seite der Benutzeroberfläche über der Wiedergabetaste, aber unter dem Animators-Bedienfeld. Wenn Sie dies tun, wird ein Dialogfeld mit allen aktuellen Timeline-Einstellungen angezeigt. Wir werden hier einige Änderungen vornehmen:

  • Stellen Sie die Dauer auf 2 Sekunden ein.
  • Wählen Sie die Option Schleife, um die Animation zu wiederholen.
  • Aktivieren Sie Mit der Maus animieren und wählen Sie Mit der Maus einfrieren. Dadurch wird die Animation gestartet und gestoppt, je nachdem, ob sich die Maus des Benutzers über dem Symbol befindet.

4. Animieren Sie das Drücken der Tastaturtaste

Wir werden jetzt die Position einiger Tasten auf der Tastatur animieren, sodass es so aussieht, als würde jemand die Zeilen auf dem Bildschirm eingeben. Der Vorgang zum Animieren eines Tastendrucks ist:

  1. Wählen Sie den Schlüssel.
  2. Fügen Sie einen Position-Animator hinzu.
  3. Fügen Sie einen Keyframe hinzu - lassen Sie die Positionswerte unverändert bei 0,0
  4. Bewegen Sie zwei Frames über, fügen Sie einen weiteren Keyframe hinzu und ändern Sie den Wert für die zweite Position auf 1, sodass Sie 0,1 haben. Dadurch wird der Key nach unten verschoben.
  5. Verschieben Sie zwei weitere Frames, fügen Sie einen weiteren Keyframe hinzu und setzen Sie den Wert auf 0,0. Dadurch wird der Key wieder an seine ursprüngliche Position gebracht.

Beginnen Sie mit Bild vier, wählen Sie eine beliebige quadratische Taste aus (egal welche) und befolgen Sie die obigen Schritte. Bewegen Sie dann Ihren Abspielkopf zum letzten Bild der soeben erstellten Schaltflächenanimation, wählen Sie eine neue quadratische Taste aus und wiederholen Sie die Schritte, um sie zu animieren. Sie benötigen insgesamt acht quadratische Animationen mit Tastendruck.

Beachten Sie, dass Sie nach dem Drücken der ersten vier Tasten eine Verknüpfung für die nächsten vier Tasten erstellen können. Wählen Sie die Spur einer vorhandenen Schaltflächenanimation aus, wählen Sie die Keyframes aus und kopieren Sie sie mit STRG + C, bewegen Sie den Abspielkopf an die richtige Position für die nächste Animation und fügen Sie die Keyframes mit STRG + V ein.

Wenn Sie Ihre acht quadratischen Tasten gedrückt haben, simulieren wir, dass die Eingabetaste oder die Rückkehrtaste nach einer kurzen Pause gedrückt wird.

Bewegen Sie Ihren Abspielkopf von der letzten Taste der neuesten Tastenanimation über sechs Frames. Wählen Sie dann die rechteckige Taste oben rechts auf der Tastatur aus und erstellen Sie dieselbe Animation zum Drücken von Tasten.

Wenn Sie fertig sind, sollte Ihr Tastendruck wie folgt aussehen:

5. Blenden Sie die Zeilen aus

Wir haben jetzt eine Animation, die das Eingeben eines Zeilenstapels auf einen Bildschirm darstellt, und wir möchten, dass er sich reibungslos wiederholen kann. Wenn die Linien plötzlich verschwunden wären, wäre das etwas abrupt. Stattdessen werden wir es so aussehen lassen, als ob das Drücken der Eingabetaste, die wir gerade erstellt haben, den Bildschirm mit einer schnellen Ausblendung der Zeilen löscht, bereit für die nächste Schleife der Animation.

Positionieren Sie den Abspielkopf einen Frame nach dem Ende der letzten Tastendruckanimation. Auf diese Weise können Sie verfolgen, wo sich die Keyframes befinden, die Sie hinzufügen möchten:

Scrollen Sie zum oberen Rand der Zeitleiste und fügen Sie an der Stelle, an der Sie gerade Ihren Abspielkopf positioniert haben, jeder der sieben Zeilen einen neuen Deckkraft-Keyframe hinzu, wobei die Deckkraft immer noch auf 100% eingestellt ist.

Bewegen Sie den Abspielkopf über zwei Frames und fügen Sie jeder Zeile eine weitere Runde von Deckkraft-Keyframes hinzu, wobei Sie alle auf 0% setzen:

Dadurch werden alle sieben Zeilen ausgeblendet und Ihre Animation ist jetzt abgeschlossen. Wenn Sie es spielen, sollten Sie sehen, dass Linien auf dem Bildschirm eingegeben, dann gelöscht und die Animation reibungslos wiederholt werden.

6. Exportieren und verwenden Sie animiertes SVG

Jetzt ist unsere Animation fertig, es ist Zeit zu exportieren! Klicken Sie oben rechts auf die aquafarbene Schaltfläche SVG exportieren. In diesem Dialogfeld können Sie einen Dateinamen für Ihre animierte SVG festlegen:

Seien Sie vorsichtig, wenn Sie speichern, um Ihr ursprüngliches SVG nicht zu überschreiben.

Sie können die SVG-Datei jetzt direkt in einem beliebigen Browser öffnen, mit der Maus darüber fahren und sehen, wie sich Ihre Animation wiederholt.

Zu einer Webseite hinzufügen

Da wir eine Hover-Interaktion verwenden, um unsere Animation abzuspielen und anzuhalten, können wir sie nicht über ein <img>-Element oder als Hintergrundbild zu einer Webseite hinzufügen. Damit das Hovering funktioniert, muss der SVG-Code kopiert und direkt in den HTML-Code der Seite eingefügt werden, auf der Sie ihn verwenden möchten.

Der beste Ansatz besteht normalerweise darin, Ihrer Seite ein <div> hinzuzufügen, den SVG-Code darin einzufügen und das div dann auf die gewünschte Breite und Höhe zu formatieren. Beispielsweise:

Die exportierten Dateien von SVGator können mehrere Codezeilen enthalten. Um sicherzustellen, dass Sie den Rest Ihrer Seite weiterhin bequem bearbeiten können, empfehle ich die Verwendung eines Code-Editors, mit dem Sie das div reduzieren und Platz sparen können.

Und das ist es! Ihr fertiges animiertes SVG-Symbol sollte folgendermaßen aussehen:

finished animated SVG iconfinished animated SVG iconfinished animated SVG icon

Einpacken

Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial zu vervollständigen. Ich hoffe, es hat Ihnen gefallen und Sie haben einige neue Tricks gelernt!

Weitere Informationen zu SVGator, Figma und Envato Elements finden Sie in den folgenden Ressourcen:

SVGator

Figma

Envato Elements

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.