Share
Das Animieren eines SVG-Strichs ist perfekt für die Simulation von Handschrift. Im Verlauf von zwei Tutorials werden wir eine CSS-Animation verwenden, um eine saubere Signatur zu erzeugen, als würde man die Seite selbst signieren.
Folgendes bauen wir:
Bevor wir uns mit Code beschäftigen, benötigen wir eine SVG-Version Ihrer Signatur. Es ist egal, welche Software Sie verwenden, um dies zu erreichen, aber versuchen Sie, die Linien und Kurven so glatt wie möglich zu halten, um die beste Wirkung zu erzielen.
Hier ist meine, die Sie sehen können, ist mit drei verschiedenen Pfaden gezeichnet:
Erster Weg
Zweiter Weg
Dritter WegStellen Sie sicher, dass Ihre Zeichenfläche fest auf die Signatur zugeschnitten ist, und speichern Sie die Datei als SVG-Datei.
Beim Öffnen der Datei in einem Code-Editor wird die XML-Struktur der SVG-Datei angezeigt. Je nachdem, mit welcher Anwendung Sie sie entworfen haben, und wie Sie sie speichern oder exportieren, erhalten Sie eine Element mit etwas Hokuspokus davor. Der Hokuspokus kann entfernt werden.
In diesem Fall sehen die Elemente, die uns verbleiben, ungefähr so aus:
Innerhalb unserer Hauptsache wir haben ein
Wir müssen diese Vektoren etwas später separat mit CSS anvisieren, stellen Sie also sicher, dass sie jeweils einen geeigneten Klassennamen haben. Das Das Element hat wahrscheinlich bereits eine ID, die den Ebenennamen in der Anwendung widerspiegelt, mit der es entworfen wurde.
Ich habe meinen Vektoren Klassennamen gegeben, abhängig davon, was sie sind (das erste ist zum Beispiel das "Ich" in meinem Namen).
Fairerweise sieht Ihr SVG nicht so ordentlich aus. Jeder dieser Vektoren enthält eine Vielzahl von Koordinaten sowie mehrere darin eingebettete Attribute. Die Koordinaten müssen bleiben, aber wir können einige der häufig verwendeten Attribute entfernen und diese stattdessen in unser CSS einfügen, um die Dinge schön und trocken zu halten.
Ich werde dies mit CodePen erstellen, aber Sie können auch eigenständige HTML- und CSS-Dokumente verwenden, wenn Sie dies vorziehen. Fügen Sie den SVG-Code direkt in Ihr HTML-Dokument ein. Entfernen Sie anschließend die Attribute, die die Pfad- und Linienelemente gemeinsam haben, und platzieren Sie sie stattdessen im CSS-Dokument. Beispielsweise werden Sie folgende Attribute bemerken:
Accentsconagua
fill = "none" Strich = "# 0F436D" Strichbreite = "2" Strichlinienkappe = "rund" Strichlinienjoin = "rund" Schlaganfalllimit = "10"Diese können stattdessen über CSS entfernt und angewendet werden:
Pfad, Zeile Füllung: keine; Schlaganfall: # 2a3745; Strichbreite: 2; Strichlinienkappe: rund; Schlaganfall: rund; Schlaganfalllimit: 10;
Viel sauberer!
Um die Striche dieser SVG zu animieren, verwenden wir eine Technik, die zuerst von Jake Archibald diskutiert wurde. Die Idee ist wie folgt: Jedem dieser Vektoren wird ein gegeben gestrichelt Schlaganfall. Wir machen dies, indem wir ein Schlaganfall-Strich Wert innerhalb des CSS:
Für jeden dieser Vektoren machen wir den Schlaganfall-Strich genau die Länge des Pfades, so hat jeder einen einzigen Strich über die gesamte Länge. Dies erfordert ein wenig Versuch und Irrtum, aber in unserem Fall sehen die Werte folgendermaßen aus:
.Schlaganfall-I Schlaganfallstrich: 80; .stroke-an Schlaganfallarray: 360; . Schlaganfall Schlaganschlag: 40;
Um diese Striche zu animieren, müssen wir jeden der Striche so versetzen, dass die Spalt deckt den Vektor ab, nicht den Strich. Ist das sinnvoll? Diese Abbildungen können helfen. Stellen Sie sich vor, dass die gestrichelte Linie verwendet wird, um den Schnörkel am Ende der Signatur zu bedecken.
Jetzt haben wir den Strich versetzt, also ist es die Lücke, die über dem Gedeihen liegt:
Jetzt müssen wir nur noch CSS verwenden, um vom Versatzzustand zum anderen zu animieren.
Bei der CSS-Animation werden zunächst Keyframes definiert. Jedes Keyframe stellt Zustände entlang einer Zeitleiste dar. Dann rendern unsere Browser die Animationen zwischen ihnen.
Lassen Sie uns zunächst sehen, wie dieser Strichversatz animiert werden kann. Wir verwenden den ersten Strich, das „Ich“, und animieren zwischen zwei Zuständen. Beginnen Sie mit dem Einrichten einiger Keyframes:
@keyframes write1 0% stroke-dashoffset: 80; 100% hub-dashoffset: 0;
Hier geben wir den Keyframes einen Namen (write1) und unter Verwendung der Abkürzungssyntax geben Sie an, dass ganz am Anfang der Zeitleiste (0%) wir wollen das Schlaganfallversatz sein 80. Mit anderen Worten: Der exakt 80px lange Strich wird vollständig versetzt.
Am Ende der Zeitleiste (um 100%) wir wollen das Schlaganfallversatz sein 0, der Strich deckt also noch einmal den Vektor ab.
Jetzt haben wir unsere Keyframes. Lass uns sie an eine Animation anhängen. Wir fügen unserer Erklärung eine weitere Erklärung hinzu Schlaganfall-ich Regel:
.Schlaganfall-I Schlaganfallstrich: 80; Animation: write1 3s unendlich linear;
Hier mit der Animation Immobilien sagen wir, dass wir die nutzen wollen write1 Keyframes, die vor einem Moment definiert wurden, möchten, dass das Ganze genau hält 3 Sekunden lang möchten wir, dass die Animation endlos durchläuft, und wir wollen die Geschwindigkeit linear (damit es keine Beschleunigung oder Verzögerung gibt).
Folgendes bekommen wir:
Hinweis: Ich verwende Autoprefixer in CodePen, so dass ich keine Browser-Präfixe für das Animationsmaterial verwenden muss.
Wir müssen zwei weitere Sätze von Keyframes definieren (write2 und write3) für die restlichen Vektoren in der Signatur - und wir müssen um die korrekten Strichlängen versetzt werden, die wir zuvor entdeckt haben:
@keyframes write2 0% stroke-dashoffset: 360; 100% hub-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% hub-dashoffset: 0;
Dann müssen wir diese Animationen auf die verbleibenden zwei Vektoren anwenden:
.Schlaganfall Schlaganfall: 360; Animation: write2 3s unendlich linear; . Schlaganfall Schlaganschlag: 40; Animation: write3 3s unendlich linear;
Folgendes bekommen wir:
Jetzt kommen wir irgendwo hin! Jeder Vektor animiert perfekt in einer linearen Bewegung von 3 Sekunden.
Nächster Schritt? Um sie animieren zu lassen der Reihe nach.
Derzeit haben wir drei Striche, die alle gleichzeitig animieren. Im Idealfall möchten wir jedoch das „Ich“ animieren, dann das „Eine“ und schließlich das Gedeihen am Ende. Wenn wir das entlang einer Zeitleiste visualisieren, könnte es so aussehen:
Wir können diese Abschnitte der Zeitleiste tatsächlich perfekt in unseren CSS-Keyframes darstellen. Im ersten Abschnitt (von 0% bis 33,3%) möchten wir beispielsweise, dass unser „Ich“ animiert wird. Daher ändern wir die Keyframes so, dass sie bei 33,3% statt bei 100% enden.
@keyframes write1 0% stroke-dashoffset: 80; 33,3% Schlaganfallversatz: 0;
Nun, da alle drei unserer Animationen dieselbe Länge haben (3 Sekunden), können wir sicherstellen, dass die Sekunde erst nach 33,3% startet, wenn die erste Animation abgeschlossen ist:
@keyframes write2 0%, 33,3% Strichdashoffset: 360; 100% hub-dashoffset: 0;
Das gibt uns das:
Die ersten beiden Animationen laufen gut ab, also verbessern wir die Dinge, indem die zweite auf 66,6% beendet wird. Dann kann die letzte Animation beginnen. Unsere Keyframes sehen so aus:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% Schlaganfallversatz: 0; @keyframes write2 0%, 33,3% stroke-dashoffset: 360; 66,6% Schlaganfallversatz: 0; @keyframes write3 0%, 66,6% stroke-dashoffset: 40; 100% hub-dashoffset: 0;
Und die Sequenz wird so aussehen:
Was wir haben, ist gut, aber es ist nicht perfekt - sicherlich weit entfernt von einer realistischen Stiftbewegung. Jeder dieser drei Vektoren wird unabhängig von seiner Länge über eine Sekunde gezogen. Der mittlere Vektor ist länger als der letzte, also sollte das Zeichnen logischerweise länger dauern. Eine bessere Zeitleiste könnte etwa so aussehen:
Für zusätzlichen Realismus gibt es sogar eine Lücke zwischen dem ersten Vektor-Finishing und dem zweiten Anfang. Ändern wir also unsere Keyframe-Werte, um dies widerzuspiegeln:
@keyframes write1 0% stroke-dashoffset: 80; 20% hub-dashoffset: 0; @keyframes write2 0%, 25% stroke-dashoffset: 360; 90% hub-dashoffset: 0; @keyframes write3 0%, 90% stroke-dashoffset: 40; 100% hub-dashoffset: 0;
Lassen Sie uns schließlich die Dinge beschleunigen, indem Sie alles ändern 3s Werte bis 2s. Wir können auch die Animationsdeklarationen aktualisieren, sodass jede nur einmal ausgeführt wird und nicht endlos in einer Schleife abgespielt wird:
Animation: write1 2s 1 linear;
Vielleicht möchten Sie auch mit spielen linear Wert, stattdessen einige Erleichterungen wie z Leichtigkeit, Bequemlichkeit, Bequemlichkeit usw., um die Bewegung weniger gleichmäßig zu machen. Was gibt uns das alles??
Wir haben große Fortschritte gemacht und auf dem Weg viel gelernt! Im nächsten Tutorial gehen wir noch einen Schritt weiter und verwenden Waypoints.js, um uns bei der Steuerung der Animation zu helfen. Ich sehe dich dort!
