Bermain dengan zarah menggunakan API Animasi Web

Gunakan API Animasi Web untuk membuat kesan zarah yang sejuk: Klik butang untuk mekar bunga api!

Tidak ada yang dapat menunjukkan daya tarikan animasi lebih baik daripada kesan zarah! Setiap kali saya meneroka teknologi baru, saya tidak dapat membantu tetapi menggunakan sebanyak mungkin zarah untuk membuat persembahan. Artikel ini akan menggunakan API Animasi Web untuk mencetuskan kesan bunga api dengan mengklik butang untuk membuat sihir zarah yang lebih menakjubkan.

Sokongan penyemak imbas

Pada masa penulisan, semua pelayar utama, kecuali Safari dan Internet Explorer, menyokong API Animasi Web sekurang -kurangnya sebahagiannya. Sokongan Safari boleh diaktifkan dalam menu pemaju "pengalaman pengalaman".

Penyemak imbas menyokong data dari Canciuse, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dari versi ini dan kemudian.

Desktop

Mudah alih/tablet

Jika anda ingin menghasilkan semula animasi cinta Twitter, anda juga boleh merujuk artikel indah ini oleh Ana Tudor, yang juga merupakan contoh hebat kesan zarah letupan butang.

Struktur HTML

Demo ini tidak memerlukan banyak kod HTML. Kami akan menggunakannya<button></button> Elemen, tetapi juga boleh menjadi jenis elemen tag lain. Sekiranya diperlukan, kita juga boleh mendengar sebarang acara klik pada halaman untuk membiarkan zarah muncul dari mana -mana sahaja.

 <button id="button">Klik saya</button>

Gaya CSS

Oleh kerana setiap zarah mempunyai beberapa sifat CSS yang biasa, kita boleh menetapkannya dalam CSS global halaman. Anda boleh membuat elemen tag tersuai seperti di html, saya akan menggunakan<particle></particle> Nama tag untuk mengelakkan menggunakan tag semantik. Tetapi sebenarnya, anda boleh animasi<div> ,<code><span></span> atau sebarang label yang anda pilih.

 zarah {
  Radius sempadan: 50%;
  Kiri: 0;
  Pointer-events: Tiada;
  Kedudukan: Tetap;
  Atas: 0;
  Kelegapan: 0; /*Ketelusan awal adalah 0, mengelakkan zarah kelihatan sebelum animasi bermula*/
}

Apa yang harus diperhatikan ialah:

• Zarah tidak boleh berinteraksi dengan susun atur halaman, jadi kami menetapkan position untuk fixed , top dan left ke 0px.
• Kami juga mengeluarkan pointer-events untuk mengelakkan sebarang interaksi pengguna dengan zarah HTML apabila ia muncul di skrin.

Oleh kerana reka bentuk gaya butang dan susun atur halaman bukan tumpuan artikel ini, saya akan melangkau bahagian ini.

Kod JavaScript

Berikut adalah enam langkah yang akan kita ikuti di JavaScript:

1. Dengarkan acara klik butang
2. Buat 30<particle></particle> dan tambahkan elemen ke dom
3. Tetapkan lebar rawak, ketinggian, dan warna latar untuk setiap zarah
4. Buat setiap zarah sehingga bergerak dari kedudukan tetikus ke kedudukan rawak dan memudar secara beransur -ansur
5. Setelah animasi selesai, keluarkannya dari dom<particle></particle> elemen

Langkah 1: Klik Acara

 // Kami mula -mula memeriksa sama ada penyemak imbas menyokong API Animasi Web
jika (document.body.animate) {
  // Jika disokong, kami menambah dokumen pendengar klik.QuerySelector ('#butang'). AddEventListener ('klik', pop);
}

Langkah 2: Penciptaan zarah

 // fungsi pop () dipanggil fungsi pop (e) {
  // Pekeliling menjana 30 zarah untuk (biarkan i = 0; i <h4 id="Langkah-Lebar-zarah-ketinggian-dan-latar-belakang"> Langkah 3: Lebar zarah, ketinggian, dan latar belakang</h4><pre class="brush:php;toolbar:false"> fungsi createParticle (x, y) {
  // ... (kod sebelumnya)
  // Kirakan saiz rawak antara 5px dan 25px const size = math.floor (math.random () * 20 5);
  // Sediakan saiz untuk setiap zarah.style.width = `$ {size} px`;
  partial.style.height = `$ {size} px`;
  // menghasilkan warna rawak dalam palet biru/ungu partial.style.background = `hsl ($ {math.random () * 90 180}, 70%, 60%)`;
  // ... (langkah seterusnya)
}

Langkah 4: Buat setiap zarah

 fungsi createParticle (x, y) {
  // ... (kod sebelumnya)
  // Menjana kedudukan sasaran x dan y secara rawak dalam julat kedudukan tetikus 75px const destinationX = x (math.random () - 0.5) * 2 * 75;
  const destination = y (math.random () - 0.5) * 2 * 75;

  // Simpan animasi dalam pemboleh ubah kerana kita akan memerlukannya kemudian const animation = particle.animate ([[
    {
      // Tetapkan kedudukan awal zarah // kami menggunakan separuh saiz zarah untuk mengalihkan zarah supaya ia berpusat pada tetikus: `translate ($ {x - (saiz/ 2)} px, $ {y - (saiz/ 2)} px)`,
      Opacity: 1
    },
    {
      /
      Opacity: 0
    }
  ], {
    // Tetapkan tempoh rawak antara 500ms dan 1500ms: 500 math.random () * 1000,
    pelonggaran: 'kubik-bezier (0, .9, .57, 1)',
    // Gunakan nilai rawak antara 0ms dan 200ms untuk melambatkan setiap zarah: math.random () * 200
  });
  // ... (langkah seterusnya)
}

Langkah 5: Keluarkan zarah selepas animasi selesai

 fungsi createParticle (x, y) {
  // ... (kod sebelumnya)
  // Apabila animasi selesai, keluarkan elemen animasi.onfinish dari dom = () => {
    zarah.remove ();
  };
}

Kesan akhir

Dengan mengintegrasikan semua kod bersama -sama, kita boleh mendapatkan kesan yang kita mahu: kesan letupan zarah berwarna -warni.

Jika anda tidak melihat animasi dalam demo, sila periksa sama ada penyemak imbas anda menyokong API Animasi Web. Untuk butiran, sila rujuk borang sokongan penyemak imbas pada permulaan artikel.

Kreativiti tanpa had

Oleh kerana semua ini menggunakan CSS, mengubah gaya zarah sangat mudah. Berikut adalah beberapa contoh menggunakan pelbagai bentuk (walaupun aksara!).

Atau kita juga boleh membiarkan butang itu sendiri meletup seperti Zach Saucier dalam jawatan ini.

(Kod sampel tambahan kedua untuk bentuk dan watak lain dan pautan ke artikel Zach Saucier)