German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)
Anlässlich des Internationalen Frauentags 2019 erstellen wir eine animierte SVG-Version des Veranstaltungslogos, die Sie zusammen mit dem diesjährigen Hashtag #BalanceforBetter verwenden können.
Dabei lernen wir die Verwendung von Figma und seinen booleschen Operationen sowie die Inline-SVG-Animation über das animateTransform-Element kennen.
Folgendes werden wir erstellen:
Gehen Sie also zu Figma, erstellen Sie eine neue Datei, in der Sie arbeiten können, und fangen wir an!
Erstellung des Logos in Figma
Boolesche Operationen
Die Art und Weise, wie wir unsere Logoillustration erstellen, besteht darin, mehrere Formen zu zeichnen und sie dann über boolesche Operationen zu kombinieren. Sie finden die booleschen Operationen in der Mitte der oberen Symbolleiste von Figma. Wir werden die Union-Auswahl- und Subtraktionsauswahl-Vorgänge verwenden, und Sie werden sehen, was diese jeweils tun, wenn wir das Lernprogramm durchlaufen.
Der Hauptkreis
Beginnen Sie, indem Sie das Ellipsenwerkzeug greifen und einen Kreis mit einer Breite von 300 x 300 Pixel und einer Füllfarbe von #46296E zeichnen.
Erstellen Sie einen weiteren Kreis, diesmal 180 x 180 Pixel.
Wählen Sie sowohl Ihren ersten als auch Ihren zweiten Kreis aus, indem Sie auf eine Form klicken, die Umschalttaste gedrückt halten und dann auf die andere Form klicken. Verwenden Sie die Ausrichtungswerkzeuge oben in der rechten Seitenleiste, um die beiden Kreise vertikal und horizontal so auszurichten, dass sich ihre Zentren an derselben Position befinden.
Wenn beide Formen noch ausgewählt sind, wählen Sie im Menü für boolesche Operationen die Option Auswahl subtrahieren.
Wenn Sie die boolesche Operation subtrahieren, wird die Form des obersten Elements von der Form des unteren Elements subtrahiert. Dies erzeugt eine hohle Mitte in unserer ursprünglichen Kreisform.
Der untere linke Ausschnitt
Jetzt erstellen wir den schmalen rechteckigen Ausschnitt unten links im Logo.
Zeichnen Sie mit dem Rechteck-Werkzeug ein Rechteck mit einer Breite von 14 x 100 Pixel.
Drehen Sie das Rechteck um -45 Grad. Sie können dies tun, indem Sie die richtige Figur in das Rotationsfeld der Form in der rechten Seitenleiste eingeben.
Positionieren Sie dann das Rechteck über der unteren linken Ecke des Kreises.
Wählen Sie das Rechteck und den Kreis aus und wählen Sie erneut Auswahl subtrahieren aus dem Menü für boolesche Operationen, um den Ausschnitt-Effekt zu generieren.
Die Pfeilspitzendreiecke
Als nächstes machen wir den dreieckigen Kopf der Pfeilform und den passenden dreieckigen Ausschnitt.
Um sicherzustellen, dass wir ein Dreieck mit einem perfekten rechten Winkel erhalten, verwenden wir anstelle des Polygon-Werkzeugs das Rechteck-Werkzeug. Zeichnen Sie ein Quadrat mit einer Größe von 72 x 72 Pixel. Es sollte dieselbe lila Farbe wie #46296E haben, die wir bisher verwendet haben.
Wir müssen einen der Knoten des Quadrats löschen, um ihn in ein rechtwinkliges Dreieck zu verwandeln. Wechseln Sie in den Knotenbearbeitungsmodus, indem Sie entweder auf das Quadrat doppelklicken oder den Menüpunkt Objekt bearbeiten aus demselben oberen Menüabschnitt auswählen, in dem sich die booleschen Operationen befinden.
Verwenden Sie im Knotenbearbeitungsmodus das Verschieben-Werkzeug, um den Modus unten rechts auszuwählen. Da wir diesen Knoten löschen müssen, sollten Sie möglicherweise die Rücktaste oder die Löschtaste drücken. Wenn Sie dies jedoch tun, bleiben die drei verbleibenden Knoten ohne Füllung geöffnet.
Drücken Sie stattdessen Umschalt + Rücktaste, um die Auswahlfunktion Löschen und Heilen zu verwenden, mit der die Form geschlossen wird, wenn der Knoten gelöscht wird.
Klicken Sie links im oberen Menü auf die blaue Schaltfläche Fertig, um die Bearbeitung dieser Form abzuschließen.
Bewegen Sie das Dreieck nach rechts oben in unsere Kreisform.
Wir benötigen ein Dreieck, um die Pfeilspitze zu bilden, und ein anderes, um eine passende Dreiecksform aus dem Kreis herauszuschneiden. Duplizieren Sie zu diesem Zweck das Dreieck, indem Sie es auswählen und dann Strg + D drücken. Bewegen Sie das Duplikat um ca. 6 Pixel nach oben und links.
Blenden Sie das erste Dreieck (das untere) vorübergehend aus, indem Sie auf das Augensymbol im Ebenenbedienfeld klicken, damit wir das doppelte Dreieck deutlicher sehen können.
Wählen Sie das doppelte Dreieck und die Hauptkreisform aus und verwenden Sie die Option Auswahl subtrahieren aus dem Menü für boolesche Operationen, um diesen Ausschnitt-Effekt zu erstellen:
Stellen Sie das ursprüngliche Dreieck so ein, dass es erneut angezeigt wird, wählen Sie es und die Hauptkreisform aus und kombinieren Sie die beiden, indem Sie im Menü für boolesche Operationen die Option Vereinigungsauswahl auswählen. Dies vervollständigt unseren Pfeilspitzenbereich.
Der untere rechte Ausschnitt
Jetzt können wir den kleinen, abgerundeten, kreuzförmigen Ausschnitt unten rechts im Kreis erstellen.
Zeichnen Sie zunächst ein Rechteck mit einer Breite von 12 x 80 Pixel und erhöhen Sie die Eckenrundung über das Feld Eckenradius der Form in der rechten Seitenleiste, bis Sie sehen, dass die Ecken nicht runder werden. (6px oder höher). Dadurch entstehen an beiden Enden des Rechtecks perfekt abgerundete Kappen.
Duplizieren Sie das abgerundete Rechteck, ändern Sie seine Höhe auf 50 Pixel und drehen Sie es um 90 Grad. Wählen Sie beide Formen aus und richten Sie sie horizontal aus, indem Sie oben in der rechten Seitenleiste auf die Schaltfläche Horizontale Zentren ausrichten klicken. Positionieren Sie dieses neue Rechteck wie folgt am unteren Rand des ersten Rechtecks:
Kombinieren Sie die beiden Formen, indem Sie sie auswählen und im Menü für boolesche Operationen die Option Auswahl auswählen auswählen. Wählen Sie dann die neu einheitliche Form aus und drehen Sie sie um 45 Grad.
Positionieren Sie die Form wie unten gezeigt über unserer Hauptkreisform unten rechts:
Wählen Sie bei ausgewählter Kreuz- und Hauptkreisform im Menü für boolesche Operationen die Option Auswahl subtrahieren, um den endgültigen Ausschnitt zu erstellen.
Ihr fertiges Logo sollte folgendermaßen aussehen:
Hinweis zu "Abflachen" und SVG
Zu diesem Zeitpunkt befindet sich im Ebenenbedienfeld eine Reihe verschachtelter Formen, die durch verschiedene boolesche Operationen kombiniert werden. Sie können optional mit der rechten Maustaste auf die Abbildung klicken, Reduzieren auswählen und diese Verschachtelung wird zu einer einzigen Ebene zusammengefasst. In vielen Fällen ist dies mehreren verschachtelten Formen vorzuziehen.
In unserem Fall würden jedoch zwei getrennte Abschnitte erstellt, die obere linke und die untere rechte Hälfte, und diese würden wiederum in zwei Pfadelemente im SVG-Code konvertiert. Als solches werden wir unsere verschachtelten Formen so lassen, wie sie sind, denn wenn wir sie in Kürze in Code konvertieren, gibt Figma uns einen einzelnen Pfad, der einfacher zu animieren ist.
Übersetzung in Code
Nachdem die Abbildung vollständig ist, können wir sie jetzt in SVG umwandeln und zur Animation in eine HTML-Seite einbetten.
Richten Sie den HTML-Code ein
Beginnen wir mit der Erstellung des HTML-Dokuments. Erstellen Sie eine Datei mit dem Namen index.html und fügen Sie diesen Code hinzu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Animated SVG Logo</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> <style> </style> </head> <body> </body> </html>
Dies ist nur eine grundlegende Shell, in der wir eine Reihe von style-Tags für CSS bereithalten und die wir in einer Google-Schriftart laden, die wir in Kürze verwenden werden.
In SVG konvertieren
Figma macht die Konvertierung unserer Illustration in SVG extrem schnell und einfach. Klicken Sie einfach mit der rechten Maustaste auf das Bild und wählen Sie Kopieren als > Als SVG kopieren.
Fügen Sie dann den resultierenden Code in den body teil Ihres HTML-Codes ein.
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="https://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"/> </svg>
Fügen Sie zwischen den Tags <style>...</style> dieses CSS hinzu, damit wir unser SVG vertikal zentrieren und ein wenig Platz darüber schaffen.
svg {
display: block;
margin: 50px auto;
}
Zeigen Sie eine Vorschau Ihrer Datei in einem Browser an, und Ihr SVG-Bild sollte angezeigt werden:
Animation hinzufügen
Wir können jetzt fortfahren und die SVG animieren, sich langsam zu drehen. Wir tun dies mit dem animateTransform-Element, das zwischen den öffnenden und schließenden Tags einer SVG-Form platziert werden kann.
Unser eingefügter Code hat derzeit ein selbstschließendes Pfadelement, d. H.
<path.../>
Wir müssen dies ändern, damit wir ein Paar <path></path> -Tags haben, zwischen denen wir unser animateTransform-Element hinzufügen können. Löschen Sie den Schrägstrich (/) am Ende des aktuellen Pfad-Tags und fügen Sie anschließend ein schließendes </path>-Tag hinzu.
Unser Pfadelement kann jetzt animiert werden. Fügen Sie den folgenden Code vor dem schließenden </path>-Tag ein:
<animateTransform attributeName="transform" type="rotate" from="0 150 150" to="-360 150 150" begin="0s" dur="10s" repeatCount="indefinite" />
Der resultierende SVG-Code sollte folgendermaßen aussehen:
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">
<animateTransform attributeName="transform"
type="rotate"
from="0 150 150"
to="-360 150 150"
begin="0s"
dur="10s"
repeatCount="indefinite"
/>
</path>
</svg>
Lassen Sie uns einen kurzen Blick darauf werfen, was die Eigenschaften in unserem animateTransform-Element über die von uns festgelegten Werte bewirken:
-
type="rotate"Animieren Sie die Rotation im Gegensatz zum Skalieren oder Verschieben -
from="0 150 150"Die Koordinaten des Animationsstartpunkts. Der erste der drei Werte ist der anfängliche Rotationsgrad, während der zweite und dritte Wert diex- undy-Position des Zentrums sind. Wir beginnen bei0Grad Drehung und setzen die Mitte in beide Richtungen auf150, da diese Position genau in der Mitte unserer300x300-Form liegt. -
to="- 360 150 150"Die Koordinaten des Animationsendpunkts, die wiederum die Rotationsgrade und diex- undy-Position des Zentrums darstellen. Wir verlassen das Zentrum an derselben Position und stellen die Enddrehungsgrade für eine vollständige Drehung auf-360ein. Durch den negativen Wert dreht sich die Drehung gegen den Uhrzeigersinn in die Richtung, in die der Pfeil zeigt. -
begin="0s"Wenn Sie diesen Wert auf0Sekunden setzen, wird die Animation sofort gestartet. Wenn eine positive Zahl verwendet würde, würde dies zu einer Verzögerung beim Starten der Animation führen. -
dur="10s"Hier stellen wir die Dauer auf10Sekunden ein, damit die Animation ein ziemlich langsames Tempo hat. -
repeatCount="indefinite"Wenn Sie diesen Wert aufindefinitesetzen, wird die Animation endlos wiederholt
Wenn Sie den Browser aktualisieren, sollte sich das Logo drehen.
Passen Sie viewBox an, um Übersteuerungen zu verhindern
Wie Sie im obigen Bild sehen können, wird die Pfeilspitze abgeschnitten, wenn sie sich in der Nähe der Außenkanten des SVG dreht. Um dies zu beheben, passen wir die viewBox an. Durch Anpassen der viewBox können wir unser Vektorbild im Wesentlichen ein wenig verkleinern.
Passen Sie die viewBox-Werte am öffnenden svg-Tag wie folgt auf -20 -20 340 340 an:
<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
Die ersten beiden Zahlen steuern das "Schwenken" der Form und die letzten beiden Zahlen steuern das "Zoomen".
Indem Sie die letzten beiden Zahlen auf 340 und 340 setzen, weisen Sie die SVG effektiv an, uns das Äquivalent von 340 x 340 Pixel Bild in dem 300 x 300 Pixel großen Raum anzuzeigen, der durch die Eigenschaften width und height vorgesehen ist. Um dies zu erreichen, muss die SVG verkleinert oder "herausgezoomt" werden, damit wir etwas Platz um das Logo haben.
Wir "schwenken" dann das Bild mit den ersten beiden Zahlen um 20 Pixel nach unten und rechts. Wenn wir dies nicht tun, bleibt das Bild einfach in der oberen linken Ecke der viewBox und wird beim Drehen weiterhin oben und links abgeschnitten. Dieses "Schwenken" gibt uns ringsum leeren Raum, und wenn sich das Bild dreht, wird der Pfeil nicht mehr abgeschnitten.
Das fertige animierte SVG sieht folgendermaßen aus:
Den Text hinzufügen
Wir werden jetzt einen kleinen Text unter der Animation mit dem Hashtag zum Internationalen Frauentag 2019 hinzufügen. Fügen Sie den folgenden Code unter Ihre SVG ein:
<h1>#BalanceforBetter</h1>
Und gestalten Sie es, indem Sie Ihren Stil-Tags das folgende CSS hinzufügen:
body {
text-align: center;
}
h1 {
background: #46296E;
color: #fff;
display: inline-block;
font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 42px;
padding: 0.2em 0.5em;
margin: 0;
}
Mit diesem CSS machen wir Folgendes:
- Richten Sie den Text mittig über das
body-Tag aus. - Stellen Sie den Hintergrund über das
h1-Tag auf Lila und die Textfarbe auf Weiß ein. - Stellen Sie die Anzeige auf
inline-blockein - der "Inline" -Teil bedeutet, dass er sich immer noch wie Text verhält, aber der "Block" -Teil gibt uns eine bessere Kontrolle über seinen Abstand und seine Ausrichtung. - Stellen Sie
font-familymit einem Stapel Fallback-Schriftarten auf "Open Sans" ein. - Stellen Sie die Schriftgröße ein.
- Fügen Sie innen
paddinghinzu, damit der lila Hintergrund nicht bündig mit den Textkanten abschließt. - Setzen Sie den
marginauf0, damit zwischen SVG und Text nicht zu viel Platz bleibt.
Aktualisieren und Ihre fertige Seite sollte folgendermaßen aussehen:
Einpacken
Ihr endgültiger Code sollte sein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animated SVG Logo</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet">
<style>
svg {
display: block;
margin: 50px auto;
}
body {
text-align: center;
}
h1 {
background: #46296E;
color: #fff;
display: inline-block;
font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 42px;
padding: 0.2em 0.5em;
margin: 0;
}
</style>
</head>
<body>
<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">
<animateTransform attributeName="transform"
type="rotate"
from="0 150 150"
to="-360 150 150"
begin="0s"
dur="10s"
repeatCount="indefinite"
/>
</path>
</svg>
<h1>#BalanceforBetter</h1>
</body>
</html>
Prüfen Sie es!
Hoffentlich haben Sie einige nützliche Tipps zur Verwendung von Figma, zum Erstellen von SVGs und zum Animieren dieser Animationen über animateTransform erhalten.
Weitere Informationen zu Figma, SVG und animateTransform finden Sie in den folgenden zusätzlichen Lernressourcen:
-
UI-DesignNeuer Kurs: Einführung in Figma -
FigmaNeuer Kurs: Verwenden von Figma für das SVG-Design -
SVGVerwendung von "animateTransform" für Inline-SVG-Animationen -
SVGWie man mit SVG ein animiertes schlagendes Herz macht
