Nachahmung des Hervorhebens von Text mit einem Stift

Dieser Codepen ist von der Arbeit von Sten Hougaard inspiriert

Vorbereitungen

Lassen Sie uns zwei Container für verschiedene Implementierungen von Animationen erstellen:

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

Ich habe SVG mit Adobe Illustrator erstellt, das Hauptmerkmal dafür muss eine kleine Höhe und eine große Breite sein.
Es ist wichtig zu erwähnen, dass SVG ein untergeordnetes Element eines Header-Elements ist, da wir SVG relativ dazu positionieren.

CSS

Wir verwandeln unsere Container in Flexboxen, um alles elegant in der Mitte zu positionieren.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

Inline wird verwendet, um einfach die Breite des Elements auf seinen Inhalt zu reduzieren, da SVG darauf angewiesen ist

Als nächstes sollten wir SVG relativ zu einem Header positionieren:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

Wir verwenden die Standardmethode, um das relative Element in der Mitte des übergeordneten Elements zu positionieren. Um SVG an den Text anzupassen, sollten wir Mindestbreite und Mindesthöhe anwenden.

Animationslogik mit Javascript

Um Elemente in Javascript zu animieren, können wir die wunderbare Animationsmethode (Keyframes, Optionen) verwenden.

Schlüsselbilder

Lassen Sie uns die Funktion getDrawingParameters analysieren, die Eigenschaften zum Durchlaufen bereitstellt:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

---

Zuerst müssen wir mithilfe der SVG-Methode getTotalLength:
wissen, wie lang unser Weg tatsächlich ist

const length = path.getTotalLength();

---

Jetzt sollten wir unsere berechnete Länge verwenden, um das Zeichnen zu simulieren. Definieren wir unseren Ausgangspunkt. Wir benötigen das Attribut StrokeDasharray:

path.style.strokeDasharray = length;

Hier weisen wir dieses Attribut an, einen Pfad mit abwechselnd einem Strich (Größe=Länge) und einer Lücke (Größe=Länge) zu zeichnen.

---

Das nächste Attribut, bei dem wir die Länge benötigen, ist Stroke-Dashoffset:

path.style.strokeDashoffset = length;

Dieser Wert gibt an, dass die Berechnung des Strich-Arrays anhand des Längenwerts erfolgt. Und da wir unser Strich-Array auf „Strich-Länge Lücken-Länge Strich-Länge Lücken-Länge ...“ setzen, ist der Startpfad leer (Lücke).

---

Also definieren wir unsere iterierbaren Eigenschaften im Array:

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

Wir verwenden Offset, um die relative Zeit zu definieren, zu der diese Eigenschaft erreicht werden muss. Es wurde entwickelt, um die Verzögerung bei jeder Iteration zu imitieren.

Optionen

Das zweite Argument der animate-Methode sind Optionen:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

Wir stellen unsere Animation auf unendliche Iterationen und eine Dauer von 10 Sekunden ein. Erinnern Sie sich an den Offset? Unsere „aktive“ Animation dauert nur 1,5 Sekunden.

Das obige ist der detaillierte Inhalt vonNachahmung des Hervorhebens von Text mit einem Stift. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!