Wie erstelle ich mit der Dash-Animation von SVG einen handgezeichneten Textanimationseffekt?

Wie animiere ich handschriftlichen Text auf der Webseite mit SVG?

Problemstellung:

Sie versuchen, einen Text zu animieren, den Sie als SVG gespeichert haben, aber Sie konnten nur den Strich animieren, was nicht der Fall ist den gewünschten Effekt. Sie möchten eine Animation ähnlich den angegebenen Beispielen implementieren, die einen handgezeichneten Look erzeugt. Folgendes haben Sie bisher:

Codebeispiel:

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Antwort:

Die Animation Das, was Sie erreichen möchten, verwendet die standardmäßige Strichanimationstechnik, schneidet den animierten Strich jedoch mit einem Umriss ab, der dem handgezeichneten ähnelt Stil.

Die Dash-Animationstechnik:

Eine Standardlinie, wie zum Beispiel:

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

wird durch Steuerung der Strichwerte animiert. dasharray und Stroke-Dashoffset in einer Keyframes-Animation.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

In diesem Beispiel definiert die Eigenschaft Stroke-Dasharray die Länge der Striche und Lücken entlang des Pfads, und Stroke-Dashoffset definiert den Versatz der Striche innerhalb des Pfads. Während die Animation von 0 % auf 100 % fortschreitet, verringert sich der Strich-Strichhoffset-Wert, wodurch die Striche allmählich entlang des Pfads erscheinen.

Erstellen des handgezeichneten Looks:

Um den animierten Strich mit einer Kontur zu beschneiden, wird ein zusätzlicher SVG-Pfad mit einem Strich verwendet, der der Breite und Farbe des animierten Strichs entspricht. Dieser Umrisspfad sollte den gesamten Bereich abdecken, den der animierte Strich einnehmen wird. Durch Definieren der Eigenschaft „Stroke-LineJoin“ des Umrisses in „Gehrung“ wird ein scharfkantiger Stil erstellt, der den Eindruck einer handgezeichneten Linie vermittelt.