Wie man Text mit SVG und CSS animiert

Verwenden Sie SVG und CSS, um animierte Texteffekte zu erstellen

Vor kurzem habe ich meinem Freund Jez geholfen, seine Newsletter -Website für Begeisterung zu erstellen, und ich hatte eine Idee: Was ist, wenn wir das Wort "Begeisterung" im Titel leicht bewegen lassen? Was ist zum Beispiel, wenn jeder Buchstabe im Wort mit Vitalität auf und ab schlägt?

Die Effekte sind wie folgt:

Sehr cool, oder? Ich weiß, dass wir SVG verwenden können, um Text zu erstellen und dann CSS zu verwenden, um Animationen zu erstellen. Jeder Buchstabe ist ein Pfad mit seinem eigenen Klassennamen, der es ermöglicht, jeden Buchstaben auszuwählen. Trotzdem hindert uns nichts davon, HTML und CSS zu verwenden, um dies zu erreichen. Die Verwendung von SVG war nur eine Möglichkeit, dass ich es damals angemessen hielt.

Zuerst öffnen wir Figma und geben den Text in ein separates Textfeld ein. Dies geschieht dies, wenn wir hier auf den Menüelement "Surrine Stroke" klicken ...

… Wir können einen separaten Vektor für jeden Buchstaben bekommen. Dies hilft uns beim Hinzufügen der richtigen CSS -Klasse für jedes Element beim Exportieren von SVG. Sobald wir die Schläge jedes Buchstabens gezeichnet haben, können wir die Punkte im Vektor bearbeiten (aber für das, was wir tun, müssen wir dies nicht tun):

Wenn wir den gesamten Text in ein Feld einfügen und auf "Gliederungsstreich" klicken, wird ein einzelner Vektor erstellt, der alle diese Buchstaben enthält. Es wird dann einen einzelnen Pfad mit Koordinaten schaffen, was für mich sehr schwierig ist, zu stylen und sogar zu verstehen, was dort vor sich geht.

Als nächstes habe ich all diese Buchstaben in einen Rahmen gesteckt (der die Art und Weise die Artikett nennt) und jedes Wort in eine Gruppe eingebracht. Auf diese Weise befindet sich jedes Wort in seinem eigenen g -Tag, was uns auch hilft, die Buchstaben zu stylen, wenn sie als SVG exportiert werden:

Dann exportierte ich SVG - aber! —— Ich muss sicherstellen, dass die ID -Option beim Exportieren enthalten ist.

Wenn wir dies nicht tun, erhalten wir für jeden Brief eine Reihe von Pfadelementen, aber sie haben kein ID -Attribut.

Nach dem Export erhalten wir die folgenden Ergebnisse:

Ich bin mir nicht sicher, wie viele seltsame Dinge mein Problem sind. Wie viele sind die SVG -Exportprobleme für Figma, aber ich habe gelöscht<rect></rect> Element, weil es unnötig ist. Ich setze dann einen Hintergrund für das Körperelement ein, damit ich den Text sehen und die Eigenschaften der Inline -Höhe und Breite des SVG selbst entfernen kann:<rect></rect>

wunderbar! Jetzt können wir uns in den interessanten Teil einlassen: Animieren Sie jeden Buchstaben im Wort.

Wenn Sie sich das HTML im obigen Beispiel ansehen, werden Sie feststellen, dass es ein g -Element mit derselben ID wie den Framework -Namen in Figma gibt. Jedes Wort hat auch ein g -Element und jeder Pfad, der das Wort bildet, hat eine separate ID. (Deshalb ist es wichtig, unsere Frameworks und Gruppen ordnungsgemäß zu benennen und eine gute Organisation in jeder Designanwendung zu erhalten.)

Eine Sache, die mich überraschte, war die Reihenfolge des Exportierens für jeden Weg: Es war das Gegenteil der von mir erwarteten Orden, und der erste Brief in der "Begeisterung" -Gruppe war M. Also habe ich es ein wenig aufgeräumt, um sicherzustellen, dass jeder Buchstaben in der richtigen Reihenfolge angeordnet ist.

Um die Animation funktionieren zu lassen, verschieben wir zuerst jeden Buchstaben um 2 Pixel:

 G Pfad {
  Transformation: Translatey (2px);
}

Dies liegt daran, dass ich möchte, dass jeder Brief 2 Pixel springt, und wir werden später darüber sprechen. Ich habe auch bemerkt, dass ich mit dieser Änderung auch das SVG -Ansichtsfenster aktualisieren muss. Andernfalls wird der Boden jedes Buchstabens abgeschnitten:

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

Ich sollte den Text wahrscheinlich einfach im Rahmen in Figma neu positionieren und ihn erneut exportieren, aber das reicht für das, was ich brauche.

Jetzt kann ich die dritte Gruppe in SVG (das Wort "Begeisterung") finden und animation-count auf unendlich einstellen:

 / * zielt auf das Wort "Begeisterung" */////
G: N-te-Kind (3) Pfad {
  Animationsname: Wigglewiggle;
  Animationsdauer: 2,5s;
  Animationsveranstalter: Infinite;
}

Der obige Code ruft die folgende wiggleWiggle -Animation auf:

 @keyframes wigglewiggle {
  20%,
  100% {
    Transformation: Translate (0, 2px); / * Bleib für den größten Teil der Animationsdauer */
  }

  0% {
    Transformation: Translate (0, 0px); / * hüpfen auf */
  }
  10% {
    Transformation: Translate (0, 2px); / * kehre zur Grundlinie zurück */
  }
}

Haben Sie den Beginn dieses Keyframe gesehen - 20% , 100% Teil? Es bedeutet "den gesamten Text für den größten Teil der Animation auf dem Basislinie zu halten". Dies bringt eine gute Verzögerung zwischen den einzelnen Rebounds:

Ich habe diesen Trick aus diesem sehr guten Artikel von Geoff on Animationszeit gelernt. Wenn Sie kurz davor sind, CSS -Animation zu lernen, empfehle ich dringend, ihn zu überprüfen.

Jetzt ist der interessante Teil: Verwenden animation-delay Eigenschaft können wir jeden Buchstaben nach dem vorherigen Brief biegen lassen. Ich habe definitiv eine intelligentere Möglichkeit, dies zu tun, aber ich habe nur die ID eines jeden Buchstabens verwendet, zum Beispiel:

 #E {
  Animation-Delay: 0s;
}

#N {
  Animation-Zelay: 0,1s;
}

#T {
  Animation-Zelay: 0,15s;
}

#H {
  Animation-Zelay: 0,2s;
}

#U {
  Animation-Zelay: 0,25s;
}

#S_2 {
  Animation-Zelay: 0,3s;
}

#ICH {
  Animation-Zelay: 0,35s;
}

#A {
  Animation-Zelay: 0,4s;
}

#S {
  Animation-Zelay: 0,45s;
}

#M {
  Animation-Zelay: 0,5s;
}

Es ist wirklich chaotisch, aber das Schreiben einer Schleife spart mir nicht viel Zeit und ich muss sie in Zukunft nicht aktualisieren, also denke ich, dass es gut genug ist. Auf diese Weise sind wir fast fertig!

Jetzt haben wir einen abprallenden, lebendigen Titel, um Hallo zu sagen. Jubeln Sie die schlagenden Worte!

Das obige ist der detaillierte Inhalt vonWie man Text mit SVG und CSS animiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!