Dieser Codepen ist von der Arbeit von Sten Hougaard inspiriert

Vorbereitungen

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

 
Animated text
  
 



 
Click on me!
  
 

Ich habe SVG mit Adobe Illustrator erstellt. Das Hauptmerkmal dafür muss eine geringe 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 min-width und min-height 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 Pfad 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, dessen Länge wir 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 haben unsere Animation auf unendliche Iterationen und eine Dauer von 10 Sekunden eingestellt. Erinnern Sie sich an den Offset? Unsere „aktive“ Animation dauert nur 1,5 Sekunden.