Animieren Kalligraphie mit SVG

0
29

Von Zeit zu Zeit auf Stackoverflow die Frage auftaucht, ob es ein äquivalent auf der stroke-dashoffset Technik für die Animation der SVG-Hub, arbeitet für das Attribut “ausfüllen”. Aber bei genauerem hinsehen, was die Fragen sind wirklich versucht zu Fragen, ist so etwas wie dieses:

Ich habe etwas, das ist eine Art Linie, aber da Sie unterschiedliche Pinsel Breite, die in SVG definiert als das füllen eines Pfades.

Wie kann diese “Bürste” animiert werden?

Kurz gesagt: Wie wollen Sie animieren, Kalligraphie?

Eine Maske Pfad umfasst die kalligraphische Pinsel

Die grundlegende Technik ist relativ einfach: zeichnen Sie einen zweiten (glatt -) Pfad auf der Oberseite der Kalligraphie, so dass es folgt die Bürste Zeile und wählen Sie dann die Breite der Striche in einer solchen Weise, dass es deckt die Kalligraphie überall.

Dieser Weg auf der Oberseite dient als Maske für den unterhalb es. Gelten die stroke-dashoffset animation Technik, um die Maske Weg. Das Ergebnis wird Aussehen, als ob der untere Pfad wird “geschrieben” direkt auf dem Bildschirm in Echtzeit.

Das ist ein Fall für eine Maske, nicht eine clip-Pfad — das würde nicht funktionieren. Clip-Pfade, immer auf der Füllbereich einer Weg, aber ignorieren Sie den Schlaganfall.

Die einfachste Variante ist es, den Satz Strich: weiß für den Weg in die Maske. Dann alles, was außerhalb der Fläche weiß lackiert versteckt ist, und alles, was im inneren gezeigt wird, ohne Veränderung.

Finden Sie den Stift, Schreiben, Kalligraphie: einfaches Beispiel von ccprog (@ccprog) auf CodePen.

So weit, So einfach. Die Dinge schwierig, aber wenn die kalligrafischen Linien überschneiden. Dies ist, was passiert, in eine naive Implementierung:

Finden Sie den Stift, Schreiben, Kalligraphie: fehlerhafte Kreuzung von ccprog (@ccprog) auf CodePen.

Am Schnittpunkt der Maske zeigt einen Teil der Kreuzung Pinsel. Daher die Kalligrafie muss geschnitten werden, in sich nicht überlappende Stücke. Stapeln Sie Sie in der Zeichnung um, und definieren Sie separate Maske-Pfade für jeden.

Der Schnitt, die Maske Weg und die kalligrafischen Pinsel müssen übereinstimmen

Der kniffligste Teil ist die Wahrung der Eindruck, dass die Zeichnung einer einzigen kontinuierlichen Kontur. Wenn Sie schneiden einen glatten Pfad, endet die passen zusammen, wie lange die beiden Weg Tangenten haben die gleiche Richtung auf Ihre gemeinsamen Punkt. Der Schlaganfall enden sind rechtwinklig, und es ist wichtig, dass der Schnitt in der kalligraphischen Linie richtet genau. Kümmern alle Wege aufeinander folgenden Richtungen. Animieren Sie eines nach dem anderen.

Während viele line-Animationen können durch die mit groben Mathematik auf die Länge für stroke-dasharray, dieses Szenario erfordert genaue Messungen (zwar kleine Rundungen sollte nicht Schaden). Als Erinnerung, man kann Sie in die DevTools Konsole mit:

Dokument.querySelector(‘#mask1 Pfad’).getTotalLength()

Finden Sie den Stift, Schreiben, Kalligraphie: Aufteilung Kreuzungen durch ccprog (@ccprog) auf CodePen.

“Einer nach dem anderen” Teil ist etwas umständlich zu schreiben, in CSS. Das beste Muster ist wahrscheinlich zu geben, teilweise Animationen, die gleiche Startzeit und Gesamtdauer, dann legen Sie dazwischen liegenden keyframes zwischen den stroke-dashoffset änderungen.

So etwas wie dieses:

@keyframes brush1 {
0% { stroke-dashoffset: 160; } /* verlassen static */
12% { stroke-dashoffset: 160; } /* start des ersten Pinsel */
44% { stroke-dashoffset: 0; } /* Ende des ersten Pinsel gleich Beginn der zweiten */
100% { stroke-dashoffset: 0; } /* verlassen static */
}

@keyframes brush2 {
0% { stroke-dashoffset: 210; } /* verlassen static */
44% { stroke-dashoffset: 210; } /* start zweiter Pinsel ist gleich Ende der ersten */
86% { stroke-dashoffset: 0; } /* Ende der zweiten Bürste */
100% { stroke-dashoffset: 0; } /* verlassen static */
}

Weiter unten werden Sie sehen, wie eine SMIL-animation ermöglicht eine flüssige und ausdrucksstarke Weise zu definieren timing. Halten mit CSS-Berechnungen erfolgt mit Sass könnte Recht hilfreich, da es kann mit etwas Mathe.

Die Maske Pfad (Links) und seine Anwendung (rechts)

Ein vergleichbares problem tritt auf, wenn der Kurvenradius von der Maske Weg wird kleiner als die Breite der Striche. Während die animation läuft durch, die Kurve, kann es passieren, dass ein Zwischenzustand, blickt ernst krumm.

Die Lösung ist, verschieben Sie die Maske Weg aus der Kalligraphie-Kurve. Sie müssen nur aufpassen, seine innere Kante noch auf den Pinsel.

Sie können sogar schneiden Sie die Maske Weg und misalign den enden, solange Sie die Schnittkanten zusammen passen.

Der radius bleibt groß genug

Finden Sie den Stift, Schreiben, Kalligraphie: Aufteilung Kreuzungen durch ccprog (@ccprog) auf CodePen.

Und damit kannst du auch zeichnen, etwas Komplexes, wie die Arabische Kalligrafie in diesem Beispiel:

Finden Sie den Stift Tughra Mahmuds II – text-animation von ccprog (@ccprog) auf CodePen.

Der ursprüngliche Entwurf, der Tughra des Osmanic Sultan Mahmud II., ist von einem unbekannten 19-Jahrhundert Kalligraph. Die vektorisierte version wurde von Wikipedia-illustrator Baba66. Die animation ist mein Versuch, die Visualisierung der position der arabischen Buchstaben in der Zeichnung. Es baut auf einer früheren version von Baba66. Creative Commons Attribution-Share Alike 2.5.

Der folgende Codeausschnitt zeigt die erweiterte Methode verwendet, um die Animationen in Ordnung und in einer wiederholbaren Weise.

Maske Weg {
fill: none;
stroke: white;
Schlaganfall-Breite: 16;
}

.Bürste {
füllen: #0d33f2;
}
<mask id=”mask1″ maskUnits=”userSpaceOnUse”>
<path stroke-dasharray=”160 160″ stroke-dashoffset=”160″ d=”…”>
<!– die animation beginnt nach dem Dokument gestartet wird und wiederholt mit einem Klick
auf die “wiederholen” – button –>
<animate id=”animate1″ attributeName=”stroke-dashoffset”
von=”160″=”0″ begin=”1s;wiederholen Sie.klicken Sie auf” dur=”1.6 s” />
</path>
</mask>
<mask id=”mask2″ maskUnits=”userSpaceOnUse”>
<path stroke-dasharray=”350 350″ stroke-dashoffset=”350″ d=”…”>
<!– die animation beginnt mit dem Ende des vorherigen –>
<animate id=”animate2″ attributeName=”stroke-dashoffset”
von=”350″ to=”0″ begin=”animate1.end” dur=”3.5 s” />
</path>
</mask>
<!– mehr Masken… –>
<mask id=”mask15″ maskUnits=”userSpaceOnUse”>
<path stroke-dasharray=”230 230″ stroke-dashoffset=”230″ d=”…”>
<!– legen Sie eine künstliche pause zwischen den Animationen, als wenn die
Pinsel aufgehoben worden –>
<animate id=”animate15″ attributeName=”stroke-dashoffset”
von=”230″=”0″ begin=”animate14.Ende+0,5 s” dur=”2.3 s” />
</path>
</mask>

<g class=”brush”>
<path id=”brush1″ d=”…”>
<!– Die Maske wird nur dann angewendet, nach dem Dokument startet/wiederholt und bis
die animation ausgeführt wurde. Dies stellt sicher, dass die Bürsten sind sichtbar
Renderer nicht unterstützen SMIL –>
<set attributeName=”Maske” zu=”url(#mask1)”
begin=”0s;wiederholen Sie.klicken Sie auf” end=”animate1.end;indefinite” />
</path>
<path id=”brush2″ d=”…”>
<set attributeName=”Maske” zu=”url(#mask2)”
begin=”0s;wiederholen Sie.klicken Sie auf” end=”animate2.end;indefinite” />
</path>
<!– mehr Wege… –>
<path id=”brush15″ d=”…”>
<set attributeName=”Maske” zu=”url(#mask2)”
begin=”0s;wiederholen Sie.klicken Sie auf” end=”animate15.end;indefinite” />
</path>
</g>

Im Gegensatz zu den anderen Beispielen, die wir haben, anschauen, in dieser animation wird hingerichtet, das heißt, es wird nicht funktionieren, im Internet Explorer und Edge.

Dieser Artikel ist erschienen in Deutsch am Browser…unplugged.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!