So erhalten Sie Handschriftanimation mit unregelmäßigen SVG -Strichen

Ich wollte eine Handschriftanimation für Kalligraphie -Schriftarten durchführen - die Art, bei der die Wörter wie sie von einem unsichtbaren Stift geschrieben werden. Da Kalligraphie -Schriftarten ungleiche Strichbreiten haben (sie sind tatsächlich nicht einmal in Bezug auf SVG Striche), war es nahezu unmöglich, mit typischen Pfadanimationstechniken so etwas zu tun. Aber ich fand eine innovative Anwendung der SVG -Maskierung, um diesen Einfluss in Minuten von Minuten zu erzielen.

Während ich untersuchte, wie das geht, sammelte ich Informationen aus mehreren Quellen. Ich kombinierte sie miteinander und konnte den endgültigen Effekt erzielen.

Lass uns das gemeinsam machen!

SVG -Maskierung

Wenn die Schlaganfallbreite aller Buchstaben in einem Wort oder Satz sogar durchgehend ist, hat Craig Roblewsky eine gute Möglichkeit, Handschrift zu animieren. Dies ist eine clevere Technik, die die SVG-Attribute für Stroke-DiSharray- und Stroke-Offset-Attribute animiert.

Kalligraphie -Schriftarten, wie wir es hier animieren möchten, haben eine ungleichmäßige Hubbreite in den Buchstaben, daher muss es ein sein und es auf diese Weise animieren wird nicht. Der Trick wird sein, SVG -Maskierung zu verwenden.

Beginnen wir zunächst herauszufinden, welche Schriftart wir verwenden möchten. Derjenige, den ich in diesem Artikel verwenden werde, ist HaSheartone, das ein schönes Pinselhub -Erscheinungsbild hat, das perfekt für die Handschrift geeignet ist.

Die Idee ist, aus demselben Satz, den wir animieren möchten, eine herauszuholen und sie dann auf den Satz zu legen. Mit anderen Worten, es wird zwei Schichten desselben Satzes geben. Da die Maske oben sitzt, werden wir sie weiß machen, damit sie den ursprünglichen Satz darunter verbergen wird. Wir werden die Maske animieren, damit die untere Schicht im Laufe der Animation enthüllt wird.

Schichten machen

Die Grundlage dieses Tricks ist, dass wir tatsächlich zwei separate Ebenen erstellen werden, eines übereinander:

1. Die untere Schicht ist die Wörter mit der gewünschten Schriftart (in meinem Fall ist es Hadheartone).
2. Die obere Schicht ist ein handgefertigter Pfad, der die Wörter annähert.

Das Erstellen des handgefertigten Pfades ist nicht so schwer, wie Sie vielleicht denken. Wir brauchen einen kontinuierlichen Weg, um den Satz zu animieren und zu enthüllen. Das bedeutet dafür nein . Viele veranschaulichen jedoch Apps - einschließlich Illustrator - Buchstaben in Pfade:

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

Und wie Magie werden die Buchstaben um Umrisse mit Vektorpunkten, die der Form folgen.

Zu diesem Zeitpunkt ist es sehr wichtig, diesen Pfaden aussagekräftige Namen zu geben, die als Schichten gespeichert werden. Wenn wir dies für SVG erwarten, generiert die App Code und verwendet diese Ebenennamen als IDs und Klassen.

Beachten Sie, wie einzelne Buchstaben eine Füllung haben, aber keinen Schlaganfall:

In SVG können wir den Schlaganfall so animieren, wie wir es wollen. Deshalb müssen wir diese als zweite Hauptschicht, die Maske, erstellen. Wir können das Stiftwerkzeug verwenden, um die Buchstaben zu verfolgen.

1. Wählen Sie das Stiftwerkzeug.
2. Stellen Sie die Fülloption auf "None" ein.
3. Die Schlaganfallbreite hängt von der Schriftart ab, die Sie verwenden. Ich setze die Option der Schlaganfallbreite auf 5PX und stelle seine Farbe auf Schwarz fest.
4. Zeichnen Sie!

Meine Fähigkeiten im Stift -Tool sind nicht großartig, aber das ist in Ordnung. Was wichtig ist, ist keine Perfektion, sondern dass die Maske die darunter liegende Schicht abdeckt.

Erstellen Sie eine Maske für jeden Buchstaben und denken Sie daran, gute Namen für die Ebenen zu verwenden. Und definitiv wiederverwenden Masken, bei denen es mehr als einen der gleichen Buchstaben gibt-es ist nicht nötig, den gleichen „A“ -Scharakter immer wieder neu zu zeichnen.

Exportieren

Als nächstes müssen wir die SVG -Datei exportieren. Dies hängt wahrscheinlich von der Anwendung ab, die Sie verwenden. In Illustrator können Sie dies mit Datei → exportieren → exportieren → svg exportieren

SVG -Optionen Popup wird geöffnet. Im Folgenden befindet sich die bevorzugte Einstellung, um für dieses Beispiel zu exportieren.

Jetzt exportieren nicht alle Apps SVG genauso. Einige leisten hervorragende Arbeit bei der Generierung schlanker, effizienter Code. Andere, nicht so sehr. In jedem Fall ist es eine gute Idee, die Datei in einem Code -Editor zu öffnen

Wenn wir mit SVG arbeiten, gibt es einige Tipps, die sie für die Leistung so leicht wie möglich machen können:

1. Je weniger Punkte, desto leichter die Datei.
2. Die Verwendung einer kleineren Viewbox kann helfen.
3. Es gibt viele Tools, um SVG noch weiter zu optimieren.

Manuell bearbeiten des SVG -Code

Jetzt exportieren nicht alle Apps SVG genauso. Einige leisten hervorragende Arbeit bei der Generierung schlanker, effizienter Code. Andere, nicht so sehr. In jedem Fall ist es eine gute Idee, die Datei in einem Code -Editor zu öffnen und einige Änderungen vorzunehmen.

Einige Dinge, die es wert sind, getan zu werden:

1. Geben Sie die Attribute für die
2. Verwenden Sie das Element . Da wir mit Pfaden arbeiten, werden die Wörter von Bildschirmlesern nicht tatsächlich erkannt. Wenn Sie im Fokus gelesen werden müssen, wird dies den Trick machen.
3. Es wird wahrscheinlich Gruppenelemente () mit den IDs basierend auf den Ebenen geben, die in der Illustrations -App benannt wurden. In dieser spezifischen Demo habe ich zwei Gruppenelemente: #Marketing-Lab (die Umriss) und #Marketing-Masken (die Masken). Bewegen Sie die Masken in ein -Element. Dies wird es visuell verbergen, was wir wollen.
4. Es wird wahrscheinlich Wege innerhalb der Maskengruppe geben. Wenn ja, entfernen Sie das Transformationsattribut von ihnen.
5. Wickeln Sie jedes Pfadelement in eine und geben Sie ihnen eine Maskenklasse und eine ID, die angibt, welcher Buchstaben maskiert ist.

Zum Beispiel:

 <mask>
 <paths ...></paths>
</mask>

Wenden Sie die Maske auf das jeweilige Charakter-Pfadelement an, indem Sie mask = "URL ( #Mask-Marketing-M) auf das jeweilige Charakter-Pfadelement anwenden.

 <g>
 <path mask="url (#mask-marketing-m)" d="m427,360, ..."></path>
</g>

Hier ist der Code für ein Zeichen mit allen oben genannten Änderungen:

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <title> Marketing Lab </title>
 <defs>
  <g>
   <mask>
    <pfad d="M375.5, ..., 9-10" strich-linien-linecap="Square" stroke-linejoin="Bevel" strich-weite="7"></pfad>
   </mask>
  </g>
 </defs>
 <g>
  <pfad mask="URL (#Mask-Marketing-M)" d="M427,360.22C-.11.08-.17.14-.17.18H427C0"></pfad>
 </g>
</svg>

Schließlich werden wir CSS für das Element. Masken -Element hinzufügen, das die Schlaganfallfarbe mit Weiß überschreibt, so dass es vor der Hintergrundfarbe des Dokuments versteckt ist.

 .maske {
 Füllung: Keine;
 Schlaganfall: #fff;
}

Animation

Wir werden das CSS-Stroke-Das-abschrofonische Eigentum animieren, um die kontinuierliche Linie enthüllt. Wir können die Animation entweder mit CSS und Javascript oder mit Greensock (GSAP) durchführen. Wir werden uns beide Ansätze ansehen.

CSS und JavaScript

Es ist ziemlich einfach, dies allein in CSS zu tun. Sie können JavaScript verwenden, um die Pfadlänge zu berechnen und sie dann mit diesem zurückgegebenen Wert zu animieren. Wenn Sie JavaScript überhaupt nicht verwenden möchten, können Sie die Pfadlänge einmal berechnen und diesen Wert in das CSS festhalten.

 / * Setzen Sie die Schlaganfallschriften und Stroke-DassSet */////////////
.maske {
 Stroke-Entschuld: 1000;
 Stroke-Das-Dashoffset: 1000;
}


/ * Animation das Schlaganfall-Das-Koffer auf eine Nulllänge */
@keyframes strokeOffset {
 Zu {
  Stroke-Das-Dashoffset: 0;
 }
}


/ * Wenden Sie die Animation auf jede Maske an */
#Mask-M {
 Animation: StrokeOffset 1S Lineare Stürmer;
}

JavaScript kann beim Zählen helfen, wenn Sie stattdessen lieber diese Route gehen möchten:

 // Die Masken in ein Array legen
const masken = ['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']


masken.foreach ((Maske, Index, el) => {
 const id = `#mask- $ {mask}` // #mask- zu jedem Mask-Elementnamen vorbereiten
 Sei Path = document.querySelector (ID)
 const länge = path.gettotallength () // Berechnen Sie die Länge eines Pfades
 Path.Style.Strokedasharray = Länge; // Setzen Sie die Länge auf Schlaganfallscharray im Stil
 Path.Style.StrokedAbSet = Länge; // Setzen Sie die Länge auf Schlaganfallschärfe im Stil ein
})

GSAP

GSAP verfügt über ein DrawSVG -Plugin, mit dem Sie den Strich eines SVG , , , , oder progressiv aufdecken (oder ausblenden). Unter der Motorhaube verwendet es die Eigenschaften von CSS Stroke-DassSet- und Stroke-Dasscharray-Eigenschaften.

So funktioniert es:

1. GSAP und DrawSVG -Skripte in den Code einbeziehen.
2. Verstecken Sie die Grafik zunächst mit Autoalpha.
3. Erstellen Sie eine Zeitleiste.
4. Setzen Sie Autoalpha für die Grafik auf True.
5. Fügen Sie alle Zeichenpfad -Masken -IDs in die Zeitleiste in der richtigen Reihenfolge hinzu.
6. Verwenden Sie Drawsvg, um alle Charaktere zu animieren.

Referenzen

1. Animierte Zeichnungslinie in SVG von Jake Archibald
2. Erstellen meiner Logo -Animation von Cassie Evans

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Handschriftanimation mit unregelmäßigen SVG -Strichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!