Cara Mendapatkan Animasi Tulisan Tangan Dengan Strok SVG Tidak Teratur

Saya mahu melakukan animasi tulisan tangan untuk fon kaligrafi - jenis di mana kata -kata bernyawa seperti mereka ditulis oleh pen yang tidak kelihatan. Kerana fon kaligrafi mempunyai lebar strok yang tidak sekata (mereka sebenarnya tidak sebatan dari segi SVG), hampir mustahil untuk melakukan perkara seperti ini dengan teknik animasi jalan biasa. Tetapi saya dapati aplikasi inovatif SVG Masking untuk mencapai kesan ini dalam hal beberapa minit.

Semasa meneliti bagaimana untuk melakukan ini, saya mengumpulkan maklumat dari pelbagai sumber. Saya menggabungkan mereka bersama -sama dan dapat mewujudkan kesan akhir.

Mari buat ini bersama!

SVG Masking

Jika lebar strok semua huruf dalam perkataan atau ayat walaupun di seluruh, maka Craig Roblewsky mempunyai cara yang baik untuk menghidupkan tulisan tangan. Ini adalah teknik pintar yang menghidupkan SVG Stroke-Dasharray dan atribut stroke-offset.

Fon kaligrafi seperti yang kita mahu menghidupkan di sini mempunyai lebar strok yang tidak sekata di seluruh huruf, oleh itu ia perlu menjadi dan menghidupkannya dengan cara itu tidak akan berfungsi. Caranya ialah menggunakan SVG Masking.

Mari kita mulakan dengan memikirkan fon apa yang kita mahu gunakan. Yang akan saya gunakan sepanjang artikel ini adalah Hasheartone, yang mempunyai penampilan strok berus yang bagus yang sesuai untuk tulisan tangan.

Idea ini adalah untuk membuat dari kalimat yang sama yang kita mahu menghidupkan, kemudian letakkan di atas ayat. Dalam erti kata lain, akan ada dua lapisan ayat yang sama. Oleh kerana topeng duduk di atas, kami akan menjadikannya putih sehingga ia akan menyembunyikan ayat asal di bawahnya. Kami akan menghidupkan topeng supaya lapisan bawah diturunkan sebagai animasi berjalan.

Membuat lapisan

Asas trik ini ialah kita sebenarnya akan membuat dua lapisan berasingan, satu di atas yang lain:

1. Lapisan bawah adalah kata -kata dengan font yang dikehendaki (dalam kes saya ia adalah Hasheartone).
2. Lapisan atas adalah laluan buatan tangan yang menghampiri kata -kata.

Mewujudkan jalan buatan tangan tidak begitu sukar seperti yang anda fikirkan. Kami memerlukan jalan yang berterusan untuk menghidupkan dan mendedahkan ayat itu. Ini bermakna tiada untuk ini. Tetapi, banyak yang menggambarkan aplikasi - termasuk ilustrator - boleh menukar huruf ke laluan:

1. Pilih perkataan.
2. Buka panel "Properties" dan klik Buat garis besar .

Dan, seperti sihir, huruf menjadi garis besar dengan titik vektor yang mengikuti bentuknya.

Pada ketika ini, sangat penting untuk memberikan nama -nama yang bermakna kepada laluan ini, yang disimpan sebagai lapisan. Apabila kami menjangkakan ini kepada SVG, aplikasi akan menjana kod dan menggunakan nama lapisan tersebut sebagai ID dan kelas.

Perhatikan bagaimana huruf individu mempunyai mengisi tetapi tiada strok:

Di SVG, kita boleh menghidupkan strok dengan cara yang kita mahu, jadi kita perlu mencipta itu sebagai lapisan utama kedua kita, topeng. Kita boleh menggunakan alat pen untuk mengesan huruf.

1. Pilih alat pen.
2. Tetapkan pilihan isi kepada "Tiada."
3. Lebar strok bergantung pada fon yang anda gunakan. Saya menetapkan pilihan lebar strok kepada 5px dan menetapkan warna menjadi hitam.
4. Mula melukis!

Kemahiran alat pena saya tidak bagus, tetapi tidak mengapa. Apa yang penting bukan kesempurnaan, tetapi topeng meliputi lapisan di bawahnya.

Buat topeng untuk setiap huruf dan ingat untuk menggunakan nama yang baik untuk lapisan. Dan pasti menggunakan semula topeng di mana terdapat lebih daripada satu huruf yang sama-tidak perlu menarik semula watak "A" yang sama berulang kali.

Mengeksport

Seterusnya, kita perlu mengeksport fail SVG. Itu mungkin bergantung kepada aplikasi yang anda gunakan. Dalam Illustrator, anda boleh melakukannya dengan Fail → Eksport → Eksport sebagai → SVG

Popup pilihan SVG akan dibuka, di bawah adalah tetapan pilihan untuk dieksport untuk contoh ini.

Sekarang, tidak semua aplikasi akan mengeksport SVG dengan cara yang sama. Ada yang melakukan pekerjaan yang sangat baik untuk menghasilkan kod yang langsing dan cekap. Yang lain, tidak begitu banyak. Sama ada cara, adalah idea yang baik untuk memecahkan fail dalam editor kod

Apabila kami bekerja dengan SVG, terdapat beberapa petua yang perlu dipertimbangkan untuk membantu menjadikannya sebagai cahaya yang mungkin demi prestasi:

1. Mata yang lebih sedikit, fail yang lebih ringan.
2. Menggunakan kotak viewbox yang lebih kecil boleh membantu.
3. Terdapat banyak alat untuk mengoptimumkan SVG lebih jauh lagi.

Menyunting kod SVG secara manual

Sekarang, tidak semua aplikasi akan mengeksport SVG dengan cara yang sama. Ada yang melakukan pekerjaan yang sangat baik untuk menghasilkan kod yang langsing dan cekap. Yang lain, tidak begitu banyak. Sama ada cara, adalah idea yang baik untuk memecahkan fail dalam editor kod dan membuat beberapa perubahan.

Beberapa perkara yang patut dilakukan:

1. Berikan atribut lebar dan ketinggian elemen
2. Gunakan elemen . Oleh kerana kita bekerja dengan laluan, kata -kata itu sebenarnya tidak diiktiraf oleh pembaca skrin. Jika anda memerlukannya untuk dibaca apabila fokus, maka ini akan melakukan silap mata.
3. Terdapat kemungkinan elemen kumpulan () dengan ID berdasarkan lapisan yang dinamakan dalam aplikasi ilustrasi. Dalam demo khusus ini, saya mempunyai dua elemen kumpulan: #pemasaran-lab (garis besar) dan #pemasaran-topeng (topeng). Gerakkan topeng ke dalam elemen . Ini akan menyembunyikannya secara visual, iaitu apa yang kita mahu.
4. Terdapat kemungkinan laluan di dalam kumpulan topeng. Jika ya, teruskan dan keluarkan atribut transformasi dari mereka.
5. Balut setiap elemen laluan dalam dan beri mereka kelas .mask dan ID yang menunjukkan huruf mana yang bertopeng.

Contohnya:

 <kop>
 <path ...></path>
</kop>

Di dalam kumpulan garis besar (yang saya berikan id #pemasaran-makmal), gunakan topeng ke elemen laluan watak masing-masing dengan menggunakan topeng = "url ( #mask-marketing-m)".

 <g>
 <path mask="url (#mask-marketing-m)" d="m427,360, ..."></path>
</g>

Inilah kod untuk satu watak menggunakan semua pengubahsuaian di atas:

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <twite> Lab Pemasaran 
 <defs>
  <g>
   <kop>
    <path d="M375.5, ..., 9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7"></path>
   
  </kop></g>
 </defs>
 <g>
  <path mask="URL (#Mask-Marketing-M)" d="M427,360.22C-.11.08-.17.14-.17.18H427C0"></path>
 </g>
</twite></svg>

Akhirnya, kami akan menambah CSS untuk elemen .mask yang mengatasi warna strok dengan putih sehingga tersembunyi terhadap warna latar belakang dokumen.

 .mask {
 Isi: Tiada;
 Strok: #FFF;
}

Animasi

Kami akan menghidupkan harta CSS Stroke-Dasharray untuk mendapatkan kesan yang berterusan. Kita boleh melakukan animasi dengan sama ada CSS dan Javasscript atau dengan Greensock (GSAP). Kami akan melihat kedua -dua pendekatan.

CSS dan JavaScript

Ia agak mudah untuk melakukan ini dalam CSS sahaja. Anda boleh menggunakan JavaScript untuk mengira panjang laluan dan kemudian menghidupkannya dengan menggunakan nilai yang dikembalikan. Jika anda tidak mahu menggunakan JavaScript sama sekali, maka anda boleh mengira panjang laluan sekali dan hardcode yang nilai ke dalam CSS.

 / * Tetapkan stroke-dasharray dan stroke-dashoffset */
.mask {
 Stroke-Dasharray: 1000;
 Stroke-Dashoffset: 1000;
}


/ * Animasi stroke-dashoffset ke panjang sifar */
@KeyFrames StrokeOffset {
 ke {
  Stroke-Dashoffset: 0;
 }
}


/ * Sapukan animasi untuk setiap topeng */
#mask-m {
 Animasi: StrokeOffset 1s linear ke hadapan;
}

JavaScript boleh membantu mengira jika anda lebih suka pergi ke laluan itu:

 // letakkan topeng dalam pelbagai
const topeng = ['m', 'a', 'r', 'k-1', 'k-2', 'e', ​​'t-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']


Masks.Foreach ((topeng, indeks, el) => {
 const id = `#mask- $ {mask}` // prepend #mask- ke setiap nama elemen topeng
 Biarkan Path = Document.QuerySelector (ID)
 panjang const = path.getTotallength () // Kirakan panjang jalan
 path.style.strokedArray = panjang; // Tetapkan panjang ke stroke-dasharray dalam gaya
 path.style.strokedAshOffset = panjang; // Tetapkan panjang ke stroke-dashoffset dalam gaya
})

GSAP

GSAP mempunyai plugin DrawSVG yang membolehkan anda secara progresif mendedahkan (atau menyembunyikan) strok SVG , , , , , atau . Di bawah tudung, ia menggunakan CSS Stroke-Dashoffset dan Stroke-Dasharray Properties.

Inilah cara ia berfungsi:

1. Sertakan skrip GSAP dan DrawSVG dalam kod.
2. Sembunyikan grafik pada mulanya dengan menggunakan Autoalpha.
3. Buat garis masa.
4. Tetapkan Autoalpha untuk benar untuk grafik.
5. Tambah semua jalur jalur watak ID ke garis masa dalam urutan yang betul.
6. Gunakan DrawSVG untuk menghidupkan semua aksara.

Rujukan

1. Garis lukisan animasi di SVG oleh Jake Archibald
2. Membuat animasi logo saya oleh Cassie Evans

Atas ialah kandungan terperinci Cara Mendapatkan Animasi Tulisan Tangan Dengan Strok SVG Tidak Teratur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!