Cara menghidupkan SVG dengan imej sempadan

Buat kesan sempadan dinamik menggunakan atribut border-image CSS dan SVG animasi

Artikel ini akan memperkenalkan cara menggabungkan atribut border-image CSS dan SVG animasi untuk mewujudkan kesan animasi SVG yang dinamik di sekitar sempadan. Kami akan belajar bagaimana untuk buatan tangan SVG animasi sembilan grid yang boleh disesuaikan yang bukan sahaja dapat menghasilkan semula kesan ini, tetapi juga menyesuaikannya mengikut keperluan anda.

Kesan akhir adalah seperti berikut:

Animasi ini sebenarnya adalah sebahagian daripada teka-teki bendera yang saya sedang membangunkan "The Skull" untuk meneroka struktur dalaman Arduino dan mikrokontrolernya. Saya mencari cara membuat sempadan animasi seperti ini, tetapi tidak dapat mencari contoh yang berguna. Kebanyakan kandungan yang saya dapati berkaitan dengan kesan "semut perarakan", tetapi malangnya trik stroke-dasharray tidak berfungsi dengan tengkorak, apalagi bentuk yang lebih kompleks.

Oleh itu, dengan semangat pembelajaran dan perkongsian, saya akan berkongsi pengalaman saya dengan anda di sini!

Sekiranya saya menggunakan background atau border-image ?

Pada mulanya, saya tidak tahu kewujudan atribut border-image . Dalam percubaan pertama saya, saya cuba menggunakan ::before elemen pseudo dan menghidupkan atribut background-position . Hasilnya adalah seperti berikut:

Seperti yang anda lihat, kaedah ini berfungsi, tetapi untuk melengkapkan seluruh sempadan, sekurang-kurangnya lapan elemen yang berbeza (atau elemen pseudo) diperlukan. Ini akan mengelirukan kod HTML dan tidak sesuai.

Saya menyiarkan soalan dalam kumpulan Facebook pemaju CSS Israel dan semua orang menunjukkan atribut border-image kepada saya. Ia sesuai dengan apa yang dipanggil: Gunakan imej (atau kecerunan CSS) sebagai sempadan elemen.

Untuk menggunakan border-image anda perlu memberikan imej yang digunakan dalam fesyen sembilan grid (bayangkan melapisi grid kaki tic pada imej). Setiap sembilan kawasan ini mewakili bahagian yang berbeza dari sempadan: bahagian atas, kanan, kiri dan bawah, empat sudut, dan pertengahan (bahagian tengah akan diabaikan).

Sebagai contoh, jika kita hanya memerlukan tengkorak statik, kita boleh menggunakan corak SVG untuk mengulangi tengkorak sembilan kali. Pertama, kita menggunakan jalan tengkorak untuk menentukan corak 24 × 24, dan kemudian gunakan corak ini sebagai mengisi untuk segi empat tepat 72 × 72:

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

Seterusnya, kami mentakrifkan sempadan dan menetapkan border-image elemen sasaran:

 .Skulls {
  Sempadan: 24px Pepejal Telus;
  Sempadan-imej: url ("https://skullctf.com/images/skull-9.svg") 24 pusingan;
}

Dengan cara ini kita mendapat sempadan yang terdiri daripada tengkorak:

Tambah animasi SVG

Sekarang kita boleh menambah animasi ke tengkorak ini! Ia berfungsi dengan baik untuk kebanyakan masa.

Idea ini adalah untuk membuat animasi yang berbeza untuk setiap kawasan dalam imej sempadan. Sebagai contoh, di sudut kiri atas, kami mempunyai satu tengkorak yang bergerak dari kanan ke kiri, manakala tengkorak lain bergerak dari atas ke bawah pada masa yang sama.

Kami akan menghidupkan atribut transform untuk mencapai kesan pergerakan. Kami juga akan menggunakan SVG<use></use> Unsur -unsur untuk mengelakkan pengulangan panjang berulang untuk setiap tengkorak<path></path> Definisi:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Kiri {ke {transform: translate (-32px, 0)}}
  @KeyFrames down {to {transform: translate (0, 32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

Sintaks animasi SVG di sini mungkin kelihatan biasa, kerana ia bukan semacam sintaks khusus SVG, seperti SMIL, tetapi menggunakan animasi CSS. Sangat sejuk, bukan?

Kesan akhir adalah seperti berikut:

Jika kita menambah grid, kita dapat melihat bahawa animasi ini juga meliputi sebahagian daripada tepi atas dan kiri:

Selepas kami menambah baki tiga tepi, ia kelihatan lebih mengesankan, dengan itu meliputi lapan kawasan imej sempadan:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Kiri {ke {transform: translate (-32px, 0)}}
  @KeyFrames down {to {transform: translate (0, 32px)}}
  @KeyFrames right {to {transform: translate (32px, 0)}}
  @KeyFrames up {to {transform: translate (0, -32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

Ini memberikan kami gelung lengkap:

Letakkan semuanya bersama-sama dan kami menggunakan SVG animasi yang kami buat sebagai border-image untuk mendapatkan hasil yang diinginkan:

Saya boleh bermain ini sepanjang hari ...

Apabila saya mula -mula berjaya, saya mula menyesuaikan sifat animasi. Ini adalah salah satu kelebihan menggunakan SVG dan bukannya GIF: mengubah sifat animasi semudah menukar harta CSS dalam fail sumber SVG, anda dapat melihat hasilnya dengan segera, belum lagi saiz fail yang lebih kecil (terutama ketika berurusan dengan kecerunan), sokongan warna penuh dan skala yang jelas.

Pertama, saya cuba melihat apa yang akan kelihatan seperti jika saya menukar fungsi masa animasi untuk ease :

Kita juga boleh membuat tengkorak pudar antara merah dan hijau:

Kita juga boleh membuat arah perubahan tengkorak kerana ia bergerak di sekitar jadual skor tinggi:

Anda boleh mengakses tab JavaScript di mana anda boleh menyesuaikan kod sumber SVG dan mencubanya sendiri.

Gajah di dalam bilik (ahem, firefox)

Apabila saya mula -mula berjaya, saya sangat gembira. Walau bagaimanapun, terdapat beberapa perkara yang perlu anda perhatikan. Titik pertama dan paling penting ialah atas sebab tertentu, Firefox tidak menjadikan animasi di tepi sempadan, hanya animasi di sudut:

Menariknya, jika saya menukar SVG ke GIF dengan animasi yang sama, ia berfungsi dengan sempurna. Walau bagaimanapun, animasi kelebihan pada perhentian Chrome! ? ‍♂️

Bagaimanapun, ini seolah-olah menjadi kesilapan penyemak imbas, kerana Firefox menghidupkan tepi jika kita menukar harta border-image-repeat untuk stretch , tetapi hasilnya agak pelik (walaupun ia mungkin sesuai dengan topik halaman):

Mengubah nilai border-image-repeat ke space juga seolah-olah berfungsi, tetapi hanya jika lebar elemen bukanlah antara integer saiz tengkorak (dalam kes ini 32 piksel), yang bermaksud akan ada beberapa jurang dalam animasi.

Saya juga mendapati bahawa apabila saiz kontena bukanlah pelbagai saiz patch (dalam kes ini 32 piksel), terdapat beberapa masalah visual seperti garis hitam kecil di tengkorak. Saya mengesyaki ini mempunyai kaitan dengan beberapa masalah pembulatan titik terapung. Ia juga cenderung untuk pecah apabila dizoom.

Tidak sempurna, tetapi benar -benar selesai! Jika anda ingin melihat versi akhir, anda boleh melawat halaman skor tinggi "The Skull". Semoga anda dapat melihat nama anda tidak lama lagi!

Atas ialah kandungan terperinci Cara menghidupkan SVG dengan imej sempadan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!