Bagaimana untuk Menghidupkan Teks Tulisan Tangan dengan SVG: Dasharray, Dashoffset dan Masking?

Cara Menghidupkan Teks Tulisan Tangan pada Halaman Web Menggunakan SVG

Objektif

Dalam panduan ini, kita akan mendalami teks SVG yang menganimasikan agar serupa kesan menarik daripada tulisan tangan. Kami akan meneroka teknik yang diilhamkan oleh animasi teladan, seperti yang ditemui di sini:

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen.io/munkholm/pen/EaZJQE

Pelaksanaan

Untuk mencapai kesan tulisan tangan yang menawan ini, kami akan menyimpang daripada standard pendekatan menghidupkan hanya strok teks. Sebaliknya, kami akan mendapat inspirasi daripada animasi luar biasa yang dinyatakan sebelum ini.

Teknik 1:

• Animasikan sifat dasharray lejang dan set pemuka lejang pada laluan.
• Klip strok animasi dengan garis besar lukisan tangan yang dikehendaki bentuk.

Kod JavaScript:

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS:

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

Teknik 2:

• Buat topeng dengan garis besar daripada bentuk lukisan tangan.
• Animasikan kedudukan topeng di sepanjang laluan.

Kod JavaScript:

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS:

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG Topeng:

<defs>
  <mask>

Nota Tambahan:

• Sesuaikan pemasaan dan laluan animasi agar sepadan dengan keperluan khusus anda.
• Eksperimen dengan gaya lukisan yang berbeza untuk mencapai kesan lukisan tangan yang unik.
• Gunakan resolusi tinggi SVG untuk mengekalkan butiran rumit teks atau bentuk.

Demo Langsung:

Lihat contoh interaktif pada CodePen:

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Teks Tulisan Tangan dengan SVG: Dasharray, Dashoffset dan Masking?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!