Bagaimana saya membuat penjana untuk pemuat svg dengan pilihan sass dan smil

Artikel ini memperincikan penciptaan penjana loader SVG yang menawarkan pilihan animasi SMIL dan SASS. Projek ini, yang dilahirkan dari pertemuan pengalaman pembelajaran, menyediakan alat yang serba boleh untuk menghasilkan pemuat SVG yang disesuaikan.

Kejadian penjana

Tiga faktor utama mengilhami perkembangan:

1. Animasi "SVG" Sarah Drasner

Pendedahan awal penulis kepada SASS Loops datang dari buku Sarah Drasner, khususnya bab mengenai visualisasi data animasi menggunakan fungsi SASS untuk menghidupkan animasi. Ini mencetuskan minat terhadap kemungkinan gelung SASS untuk animasi.

2. Permintaan replikasi loader

Permintaan untuk meniru loader gaya Apple menyediakan aplikasi praktikal untuk pengetahuan baru. Penulis melaksanakan gelung SASS untuk menguruskan kelewatan animasi dengan cekap:

 @for $ i dari 1 hingga 12 {
  .loader: nth-of-type (#{$ i}) {
    Animasi: 1S $ I * 0.08S OpacityLoader Infinite;
  }
}
@KeyFrames OpacityLoader {
 kepada {opacity: 0; }
}

Kod SASS ringkas ini mencapai hasil yang sama dengan setara yang lebih lama dalam CSS vanila:

 .loader: nth-of-type (1) {
  Animasi: 1S 0.08s Opacityloader Infinite;
}
.loader: nth-of-type (2) {
  Animasi: 1s 0.16s opacityloader Infinite;
}

/ * ... */

.loader: nth-of-type (12) {
  Animasi: 1S 0.96S OpacityLoader Infinite;
}
@KeyFrames OpacityLoader {
  kepada {opacity: 0; }
}

3. Idea galeri

Gabungan kecekapan gelung SASS dan keperluan untuk pemuat membawa kepada konsep penjana loader, menangani jurang yang dirasakan dalam sumber dalam talian yang tersedia.

Output Animasi Dual: Smil dan Sass

Cabaran pembangunan awal dengan output SASS membawa kepada kemasukan animasi smil sebagai alternatif. Walau bagaimanapun, kedua -dua pilihan akhirnya diintegrasikan, walaupun terdapat perbezaan di dalam output.

SMIL vs CSS/SASS: Perbezaan utama

Proses pembangunan menyerlahkan beberapa perbezaan utama:

• Kemerdekaan sumber: SMIL menghidupkan secara langsung dalam markup SVG, tidak seperti CSS atau SASS.
• Imej Embedding: Animasi SMIL berterusan apabila SVG digunakan sebagai imej atau latar belakang.
• Animasi Fluidity: Animasi SMIL sering kelihatan lebih lancar, walaupun alasan yang tepat masih tidak jelas.
• Animasi Chaining: additive="sum" dalam SMIL menambah animasi secara berurutan, manakala CSS/SASS mengutamakan perisytiharan animasi terakhir untuk sifat yang bertentangan.
• Pengendalian Transform: Transformasi memerlukan penyelesaian dalam sass untuk mencapai pariti dengan tingkah laku SMIL, yang memerlukan penggunaan<g></g> unsur -unsur untuk merangkum bentuk.

Stack Teknologi: vue.js dan nuxt.js

Projek ini memanfaatkan vue.js untuk seni bina berasaskan komponen, pengikatan data intuitif, dan kemudahan pengendalian HTML dan SVG. Nuxt.js menyediakan persekitaran pembangunan yang diselaraskan dengan ciri -ciri seperti penghalaan automatik dan pengoptimuman SEO.

Contoh penggunaan loader

Fleksibiliti penjana membolehkan kaedah integrasi yang pelbagai:

• SMIL SVG sebagai Imej Latar Belakang: Muat turun SVG yang dihasilkan dan gunakannya sebagai imej latar belakang CSS.
• Langsung HTML Embedding: Benamkan kod SVG yang dihasilkan terus ke HTML.
• Integrasi Loop SASS: Gunakan gelung SASS yang dihasilkan untuk menghidupkan SVG sebaris.

Pembangunan berterusan dan peningkatan masa depan

Rancangan masa depan termasuk menambah pilihan gaya ketiga untuk manipulasi SVG yang lebih mudah, tunggal-elemen, menangani cabaran dalam mengendalikan parameter animasi tersuai dan meningkatkan kejelasan kod. Sifat sumber terbuka projek mengalu-alukan sumbangan dan maklum balas.

Perjalanan projek, yang dimulakan oleh gelung SASS yang mudah, mempamerkan kuasa dan fleksibiliti animasi SMIL, walaupun kebimbangan yang lalu. Walaupun sokongan penyemak imbas perlu diperiksa (menggunakan sumber seperti Caniuse), keadaan semasa menunjukkan daya maju yang berterusan. Jadual sokongan penyemak imbas terperinci ditinggalkan di sini untuk keringkasan.

Atas ialah kandungan terperinci Bagaimana saya membuat penjana untuk pemuat svg dengan pilihan sass dan smil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!