Tiruan menyerlahkan teks dengan pen

Pen kod ini diilhamkan oleh karya Sten Hougaard

Persediaan

Mari kita cipta dua bekas untuk pelaksanaan animasi yang berbeza:

<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>

Saya telah mencipta svg menggunakan Adobe illustrator, ciri utama untuknya mestilah tinggi kecil dan lebar besar.
Adalah penting untuk menyebut bahawa svg ialah anak kepada elemen pengepala kerana kami akan meletakkan svg berbanding dengannya.

CSS

Kami menukar bekas kami kepada kotak fleksibel untuk meletakkan segala-galanya dengan anggun di tengah.

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

h1 {
 display: inline;
 position: relative;
}   

sebaris digunakan untuk hanya mengurangkan lebar elemen kepada kandungannya kerana svg akan bergantung padanya

Seterusnya, kita harus meletakkan svg berbanding dengan pengepala:

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

Kami menggunakan kaedah standard untuk meletakkan elemen relatif di tengah induk. Untuk melaraskan svg pada teks, kita harus menggunakan lebar min dan ketinggian min.

Logik animasi dengan javascript

Untuk menganimasikan elemen dalam javascript, kami boleh menggunakan kaedah animasi(rangka kunci, pilihan) yang menarik.

Bingkai utama

Mari kita membedah fungsi getDrawingParameters, yang memberikan sifat untuk diulang:

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;
};

Pertama, kita perlu tahu berapa lama laluan kita sebenarnya, dengan menggunakan kaedah svg getTotalLength:

const length = path.getTotalLength();

Sekarang, kita harus menggunakan panjang yang dikira untuk mensimulasikan lukisan. Mari kita tentukan titik permulaan kita. Kami memerlukan atribut strokeDasharray:

path.style.strokeDasharray = length;

Di sini, kami memberitahu atribut ini untuk melukis laluan dengan bergantian satu sempang (saiz=panjang) dan satu jurang (saiz=panjang).

Atribut seterusnya, di mana kita memerlukan panjang ialah set pemuka lejang:

path.style.strokeDashoffset = length;

Nilai ini memberitahu bahawa pengiraan tatasusunan sengkang ditarik oleh nilai panjang. Dan oleh kerana, kami menetapkan tatasusunan dash kami kepada 'jarak-jarak-panjang-jarak-panjang-jarak-panjang ...', laluan permulaan akan kosong (jurang).

Jadi, kami mentakrifkan sifat boleh lelar kami dalam tatasusunan:

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

Kami menggunakan offset untuk mentakrifkan masa relatif pada mana sifat ini mesti dicapai. Ia dibuat untuk meniru kelewatan pada setiap lelaran.

Pilihan

Argumen kedua kaedah bernyawa ialah pilihan:

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

Kami menetapkan animasi kami kepada lelaran tak terhingga dan tempoh 10 saat. Ingat offset? animasi "aktif" kami mengambil masa hanya 1.5 saat.

Atas ialah kandungan terperinci Tiruan menyerlahkan teks dengan pen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!