Bagaimana untuk Mencipta Kesan Animasi Teks Lukisan Tangan Menggunakan Animasi Dash SVG?

Bagaimana untuk Menghidupkan Teks Tulisan Tangan pada Halaman Web Menggunakan SVG?

Pernyataan Masalah:

Anda cuba menghidupkan teks yang telah anda simpan sebagai SVG, tetapi anda hanya dapat menghidupkan strok, yang bukan kesan yang diingini. Anda ingin melaksanakan animasi yang serupa dengan contoh yang diberikan, yang mencipta rupa lukisan tangan. Inilah yang anda miliki setakat ini:

Sampel Kod:

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Jawapan:

Animasi yang anda cuba capai menggunakan teknik animasi sengkang standard tetapi klip strok animasi dengan garis besar yang menyerupai lukisan tangan gaya.

Teknik Animasi Dash:

Barisan standard, seperti:

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

dianimasikan dengan mengawal nilai strok- dasharray dan stroke-dashoffset dalam animasi bingkai utama.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Dalam contoh ini, sifat lejang-dasharray mentakrifkan panjang sempang dan jurang di sepanjang laluan, dan set sempang lejang mentakrifkan offset sempang dalam laluan. Apabila animasi berkembang daripada 0% kepada 100%, nilai set pemuka lejang berkurangan, menyebabkan sempang muncul secara beransur-ansur di sepanjang laluan.

Mencipta Rupa Lukisan Tangan:

Untuk memotong lejang animasi dengan garis besar, laluan SVG tambahan digunakan dengan lejang yang sepadan dengan lebar dan warna strok animasi. Laluan garis besar ini harus meliputi seluruh kawasan yang akan diduduki oleh strok animasi. Dengan mentakrifkan sifat cantuman garisan strok bagi garis besar kepada miter, gaya penjuru tajam dicipta, memberikan kesan garisan yang dilukis dengan tangan.