WordPress hat den Block-Editor (auch Gutenberg genannt) bereits in Version 5.0 ausgeliefert und damit einen schicken neuen Vorschau-Bildschirm für Beiträge, der das sich selbst zeichnende WordPress-Logo anzeigt, während die Vorschau geladen wird.
Das ist es, was Sie erhalten, wenn Sie einen Beitragsentwurf speichern und im Editor auf die Schaltfläche "Vorschau" klicken. Wie haben sie das gemacht? Ich hatte Schwierigkeiten, den Quellcode der Seite anzuzeigen, da die Vorschau ziemlich schnell geladen wird, aber ich habe gesehen, dass für das WordPress-Logo SVG verwendet wird. Das ist alles, was ich wirklich brauchte, denn mein Geist kehrte sofort zu etwas zurück, das Chris 2014 geschrieben hat, das die Eigenschaften stroke-dasharray und stroke-dashoffset verwendet, um denselben Effekt zu erzielen.
Das ist das Beispiel, das Chris in diesem Beitrag geteilt hat
Sehen Sie den Pen bGyoz von Chris Coyier (@chriscoyier) auf CodePen.
Ich konnte mir inzwischen den CSS-Code besorgen, um zu bestätigen, dass die WordPress-Zeichnung tatsächlich dieselbe Technik verwendet, aber ich werde teilen, wie mein Verstand die Dinge aufschlüsselte, während ich versuchte, sie zu dekonstruieren.
Wir arbeiten mit einem direkt eingebetteten SVG
Das Schöne an der WordPress-Version ist, dass wir mit zwei statt einem SVG-Pfad arbeiten. Das bedeutet, wir haben zwei Teile, die scheinbar gleichzeitig gezeichnet werden. Hier ist das SVG, das im HTML eingebettet ist. Wir haben auch den Text "Generiere Vorschau", der außerhalb des SVG stehen kann.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-hidden="true" focusable="false">
<path d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none"></path>
<path d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none"></path>
</svg>
<p>Generating preview...</p>Der erste Pfad ist eine Ellipse, die als Rahmen um den zweiten Pfad dient, welcher die Form des WordPress-Logos ist. Es ist wahrscheinlich eine gute Idee, jedem Pfad eine Klasse zu geben – besonders wenn dies nicht das einzige Element auf der Seite ist –, aber ich habe mich entschieden, die Elemente klassenlos zu lassen, da dies das einzige Element in der Demo ist. Wir können beide Pfade zusammen in CSS auswählen oder Pseudoselektoren (z. B. path:nth-child(2)) verwenden, um sie in diesem Fall einzeln auszuwählen.
Es gibt noch ein paar andere organisatorische Dinge, die dort passieren. Zum Beispiel erhält das SVG Attribute, um es zugänglicher zu machen, wie z. B. die Identifizierung als Bild, das Ausblenden für Screenreader und die Verhinderung der Fokussierbarkeit.
Wir müssen das SVG leicht stylen
Sehr, sehr leichtes Styling. Wir brauchen einen Strich, da die Pfade keine Füllfarbe haben. Sonst würden wir nichts sehen. Nun, eine unsichtbare Form, aber im Wesentlichen ein Nichts.
svg {
stroke: #555;
stroke-width: 0.5;
width: 250px;
}Das gibt uns die Umrisslinie für beide Pfade. Das Schöne an der stroke-width-Eigenschaft ist, dass sie Dezimalwerte akzeptiert, sodass wir die Linien etwas dünner machen können. Die Zeichnung sieht auf diese Weise ein wenig wie mit Bleistift gezeichnet aus.
Die Breite ist hier ziemlich willkürlich, aber sie ist wichtig, da die Eigenschaften stroke-dasharray und stroke-dashoffset, mit denen wir arbeiten werden, darauf angewiesen sind. Wenn diese Eigenschaftswerte kleiner sind als die Größe des SVG, stoppt die Zeichnung vorzeitig. Wenn sie zu groß sind, wird die Geschwindigkeit der Zeichnung zu hoch.
Nachdem wir nun unsere Breite kennen und die Pfadstriche sehen können, können wir stroke-dasharray und stroke-dashoffset entsprechend einstellen.
svg path {
stroke-dasharray: 300;
stroke-dashoffset: 300;
}Etwas größer als das SVG und viel Platz zwischen den Strichen, was genau richtig sein sollte. Diese Werte können angepasst werden, um die Animation nach Ihren Wünschen zu gestalten.
Der Rest ist nur die Anwendung von Chris' Technik
Die Zeichnung ist eine CSS-Animation mit einem Keyframe. Wenn wir den stroke-dashoffset bei null beginnen, sind die Pfade beim ersten Laden unsichtbar und wachsen auf den zuvor festgelegten Wert von 300, wenn die Animation 100 % erreicht. Wir setzen den Offset erneut auf 300, damit die Striche und die Zwischenräume über das SVG hinausgehen, um das Ganze abzudecken.
Die ganze Magie steckt in nur fünf Codezeilen
@keyframes draw {
0% {
stroke-dashoffset: 0;
}
}Sie können die Animation nennen, wie Sie möchten. Wir können uns damit begnügen, die Animation nur bei 0 % zu definieren, da 100 % implizit sind.
Oh! Und wir müssen die Animation an die Pfade anhängen, also
svg path {
animation: draw 2s ease-out infinite alternate;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}Sie können diese Werte definitiv auch anpassen, um die Geschwindigkeit zu erhöhen oder zu verringern. Das Easing verleiht der Animation diesen leichten Puls-Effekt, bei dem sie am Anfang und am Ende etwas langsamer ist als in der Mitte der Bewegung.
Alles zusammen jetzt!
Sehen Sie den Pen
WordPress Vorschau Ladezustand von Geoff Graham (@geoffgraham)
auf CodePen.
Ich habe es bereits erwähnt, aber ich konnte schließlich den Quellcode der tatsächlichen Implementierung schnappen, und er ist ziemlich nah dran und verwendet dieselben Prinzipien.
Toller Beitrag!