Wie man eine Handschriftanimation mit unregelmäßigen SVG Strichen erstellt

Ich wollte eine Handschriftanimation für Kalligrafie-Schriftarten erstellen – die Art, bei der sich die Wörter so animieren, als würden sie geschrieben von einem unsichtbaren Stift. Da Kalligrafie-Schriftarten ungleichmäßige Strichbreiten haben (sie sind in Bezug auf SVG eigentlich keine gleichmäßigen Striche), war es mit herkömmlichen Pfadanimationstechniken nahezu unmöglich, diese Art von Ding zu tun. Aber ich habe eine innovative Anwendung von SVG-Maskierung gefunden, um diesen Effekt in wenigen Minuten zu erzielen. 

Bei der Recherche, wie dies gemacht werden kann, habe ich Informationen aus mehreren Quellen gesammelt. Ich habe sie kombiniert und konnte den endgültigen Effekt erzielen.

Lasst es uns zusammen machen!

SVG-Maskierung

Wenn die Strichbreite aller Buchstaben in einem Wort oder Satz durchgehend gleichmäßig ist, dann hat Craig Roblewsky eine nette Methode zur Animation von Handschriften. Dies ist eine clevere Technik, die die Attribute `stroke-dasharray` und `stroke-offset` von SVG animiert.

Kalligrafie-Schriftarten, wie wir sie hier animieren wollen, haben durchgehend ungleichmäßige Strichbreiten. Daher muss es sich um ein <path> handeln, und eine Animation auf diese Weise wird nicht funktionieren. Der Trick besteht darin, SVG-Maskierung zu verwenden.

Lasst uns zunächst herausfinden, welche Schriftart wir verwenden wollen. Diejenige, die ich im gesamten Artikel verwenden werde, ist HaveHeartOne, die ein schönes Pinselstrich-Aussehen hat, das perfekt für Handschriften ist.

Die Idee ist, eine <mask> aus demselben Satz zu erstellen, den wir animieren wollen, und ihn dann über den Satz zu legen. Mit anderen Worten, es wird zwei Ebenen desselben Satzes geben. Da die Maske oben liegt, machen wir sie weiß, damit sie den ursprünglichen Satz darunter verbirgt. Wir animieren die Maske, sodass die untere Ebene während der Animation sichtbar wird.

Die Ebenen erstellen

Die Grundlage dieses Tricks ist, dass wir tatsächlich zwei separate Ebenen erstellen werden, eine über der anderen.

1. Die untere Ebene sind die Wörter in der gewünschten Schriftart (in meinem Fall HaveHeartOne).
2. Die obere Ebene ist ein handgezeichneter Pfad, der die Wörter annähert.

Das Erstellen des handgezeichneten Pfades ist nicht so schwierig, wie Sie vielleicht denken. Wir brauchen einen kontinuierlichen Pfad zum Animieren und Aufdecken des Satzes. Das bedeutet kein <text> hierfür. Aber viele Illustrationsprogramme – einschließlich Illustrator – können Buchstaben in Pfade umwandeln.

1. Wählen Sie die Wörter aus.
2. Öffnen Sie das Bedienfeld „Eigenschaften“ und klicken Sie auf Umriss erstellen.

Und wie von Zauberhand werden die Buchstaben zu Umrissen mit Vektorpunkten, die der Form folgen.

Zu diesem Zeitpunkt ist es sehr wichtig, diesen Pfaden, die als Ebenen gespeichert werden, aussagekräftige Namen zu geben. Wenn wir dies in SVG exportieren, generiert die Anwendung Code und verwendet diese Ebenennamen als IDs und Klassen.

Beachten Sie, wie einzelne Buchstaben eine fill, aber keinen stroke haben.

In SVG können wir den stroke so animieren, wie wir es wollen, daher werden wir ihn als unsere zweite Hauptschicht, die Maske, erstellen. Wir können das Zeichenwerkzeug verwenden, um die Buchstaben nachzuzeichnen.

1. Wählen Sie das Zeichenwerkzeug aus.
2. Stellen Sie die Fülloption auf „Keine“.
3. Die Strichbreite hängt von der verwendeten Schriftart ab. Ich stelle die Option Strichbreite auf 5px und die Farbe auf Schwarz.
4. Beginnen Sie zu zeichnen!

Meine Fähigkeiten mit dem Zeichenwerkzeug sind nicht großartig, aber das ist in Ordnung. Wichtig ist nicht Perfektion, sondern dass die Maske die darunter liegende Ebene abdeckt.

Erstellen Sie für jeden Buchstaben eine Maske und vergessen Sie nicht, gute Namen für die Ebenen zu verwenden. Und wiederverwenden Sie Masken unbedingt, wenn es mehr als ein gleiches Zeichen gibt – es besteht keine Notwendigkeit, dasselbe „A“ immer wieder neu zu zeichnen.

Exportieren

Als nächstes müssen wir die SVG-Datei exportieren. Das hängt wahrscheinlich von der von Ihnen verwendeten Anwendung ab. In Illustrator können Sie dies tun unter Datei → Exportieren → Exportieren als → SVG.

Das SVG-Optionen-Popup wird geöffnet, unten sind die bevorzugten Einstellungen für diesen Beispiel-Export.

Nun, nicht alle Anwendungen exportieren SVG auf genau die gleiche Weise. Einige liefern hervorragende Ergebnisse bei der Generierung von schlankem, effizientem Code. Andere weniger. So oder so, es ist eine gute Idee, die Datei in einem Code-Editor zu öffnen 

Wenn wir mit SVG arbeiten, gibt es ein paar Tipps zu beachten, um sie für die Leistung so leicht wie möglich zu machen.

1. Weniger Punkte bedeutet eine leichtere Datei.
2. Die Verwendung eines kleineren viewBox kann helfen.
3. Es gibt viele Werkzeuge, um SVG noch weiter zu optimieren.

Manuelles Bearbeiten des SVG-Codes

Nun, nicht alle Anwendungen exportieren SVG auf exakt die gleiche Weise. Einige sind hervorragend darin, schlanken, effizienten Code zu generieren. Andere nicht so sehr. So oder so ist es eine gute Idee, die Datei in einem Code-Editor zu öffnen und ein paar Änderungen vorzunehmen.

Einige Dinge, die es wert sind zu tun:

1. Geben Sie dem <svg>-Element die Attribute width und height, die auf die Größe des endgültigen Designs eingestellt sind.
2. Verwenden Sie das <title>-Element. Da wir mit Pfaden arbeiten, werden die Wörter von Screenreadern nicht wirklich erkannt. Wenn sie beim Fokussieren gelesen werden sollen, dann tut dies der Trick.
3. Es wird wahrscheinlich Gruppenelemente (<g>) mit IDs geben, die auf den in der Illustrations-App benannten Ebenen basieren. In dieser speziellen Demo habe ich zwei Gruppenelemente:  #marketing-lab (der Umriss) und #marketing-masks (die Masken). Verschieben Sie die Masken in ein <defs>-Element. Dies verbirgt sie visuell, was wir wollen.
4. Wahrscheinlich werden sich Pfade innerhalb der Maskengruppe befinden. Wenn ja, entfernen Sie das transform-Attribut davon.
5. Umschließen Sie jedes Pfadelement mit einer <mask> und geben Sie ihnen eine .mask-Klasse und eine ID, die angibt, welcher Buchstabe maskiert ist.

Zum Beispiel:

<mask id="mask-marketing-M">
  <path class="mask" id="mask-M" ... />
</mask>

Innerhalb der Umrissgruppe (der ich die ID #marketing-lab gegeben habe), wenden Sie die Maske auf das entsprechende Zeichenpfadelement an, indem Sie mask="url(#mask-marketing-M)" verwenden.

<g id="marketting-lab">
  <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " />
</g>

Hier ist der Code für ein Zeichen mit allen oben genannten Modifikationen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">
  <title>Marketing Lab</title>
  <defs>
    <g id="marketing-masks">
      <mask id="mask-marketing-M">
        <path class="mask" id="mask-M"
          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" />
      </mask>
    </g>
  </defs>
  <g id="marketting-lab">
    <path
      mask="url(#mask-marketing-M)" id="marketting-char-M" 
      d="M427,360.22c-.11.08-.17.14-.17.18H427c0" />
  </g>
</svg>

Schließlich fügen wir CSS für das .mask-Element hinzu, das die Strichfarbe mit Weiß überschreibt, damit es sich vom Hintergrund des Dokuments abhebt.

.mask {
  fill: none;
  stroke: #fff;
}

Animation

Wir werden die CSS-Eigenschaft stroke-dasharray animieren, um den schrittweisen Offenlegungseffekt zu erzielen. Wir können die Animation entweder mit CSS und JavaScript oder mit Greensock (GSAP) durchführen. Wir werden beide Ansätze betrachten.

CSS und JavaScript

Dies lässt sich recht einfach allein mit CSS bewerkstelligen. Sie können JavaScript verwenden, um die Pfadlänge zu berechnen und sie dann mit diesem zurückgegebenen Wert zu animieren. Wenn Sie überhaupt kein JavaScript verwenden möchten, können Sie die Pfadlänge einmal berechnen und diesen Wert fest in das CSS einbauen.

/* Set the stroke-dasharray and stroke-dashoffset */
.mask {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}


/* Animation the stroke-dashoffset to a zero length */
@keyframes strokeOffset {
  to {
    stroke-dashoffset: 0;
  }
}


/* Apply the animation to each mask */
#mask-M {
  animation: strokeOffset 1s linear forwards;
}

JavaScript kann beim Zählen helfen, wenn Sie diesen Weg bevorzugen.

// Put the masks in an array
const masks = ['M', 'a', 'r', 'k-1', 'k-2', 'e', 't-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']


masks.forEach((mask, index, el) => {
  const id = `#mask-${mask}` // Prepend #mask- to each mask element name
  let path = document.querySelector(id)
  const length = path.getTotalLength() // Calculate the length of a path
  path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles
  path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles
})

GSAP

GSAP verfügt über ein drawSVG-Plugin, mit dem Sie den Strich eines SVG-<path>, <line>, <polyline>, <polygon>, <rect> oder <ellipse> schrittweise anzeigen (oder ausblenden) können. Intern verwendet es die CSS-Eigenschaften stroke-dashoffset und stroke-dasharray. 

So funktioniert es

1. Fügen Sie GSAP- und DrawSVG-Skripte in den Code ein.
2. Blenden Sie die Grafik zunächst mit `autoAlpha` aus.
3. Erstellen Sie eine Zeitleiste.
4. Setzen Sie `autoAlpha` für die Grafik auf `true`.
5. Fügen Sie alle IDs der Pfadmasken der Zeichen nacheinander zur Zeitleiste hinzu.
6. Verwenden Sie `drawSVG`, um alle Zeichen zu animieren.

---

Referenzen

1. Animiertes Zeichnen von Linien in SVG von Jake Archibald
2. Erstellung meiner Logo-Animation von Cassie Evans