Library animasi confetti frontend yang berguna

 (github.com/catdad)
5 poin oleh GN⁺ 2024-04-26 | 1 komentar | Bagikan ke WhatsApp

  • Cara instalasi

    • Bisa diinstal sebagai modul melalui NPM 
      npm install --save canvas-confetti
    • Bisa digunakan di proyek dengan require('canvas-confetti')
    • Karena ini adalah komponen klien, library ini tidak berjalan di Node. Proyek harus dibangun menggunakan webpack atau sejenisnya
    • Bisa langsung disertakan di halaman HTML melalui CDN 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • Saat menyertakannya ke dalam proyek, disarankan menggunakan versi terbaru dari halaman releases

  • Mode pengurangan animasi

    • Sebagian pengguna tidak menyukai motion, jadi hal ini perlu dipertimbangkan
    • Dengan opsi disableForReducedMotion, kita bisa mengakomodasi pengguna yang tidak menginginkan animasi yang mengganggu
    • Secara default dinonaktifkan, tetapi nilai default ini direncanakan akan berubah pada rilis mayor mendatang

API

  • confetti([options {Object}]) → Promise|null

    • Menerima satu objek opsi sebagai parameter
    • Jika window.Promise dapat digunakan, fungsi ini mengembalikan Promise; jika tidak bisa digunakan (misalnya IE), mengembalikan null
    • Implementasi Promise bisa disediakan melalui polyfill atau confetti.Promise
    • Jika confetti dipanggil beberapa kali sebelum selesai, fungsi ini mengembalikan Promise yang sama. Secara internal elemen canvas yang sama digunakan kembali
    • Setelah semua animasi selesai, Promise yang dikembalikan dari setiap pemanggilan akan di-resolve
    • Properti utama pada objek options
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex dll.

  • confetti.shapeFromPath({ path, matrix? }) → Shape

    • Membuat bentuk confetti kustom menggunakan string SVG Path
    • Hanya mendukung warna solid dan Stroke belum diimplementasikan
    • Memerlukan matriks transformasi. Bisa diberikan langsung atau dihitung menggunakan helper
    • Terbatas pada browser yang mendukung Path2D
    • Mengembalikan objek Shape

  • confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape

    • Fitur untuk merender confetti emoji
    • Disarankan menggunakan satu karakter, terutama emoji
    • Karena teks dirasterisasi, hasilnya tidak cocok untuk diubah ukurannya setelah dibuat
    • Jika ukuran diubah dengan scalar, nilai yang sama juga harus digunakan di sini
    • Opsi text, scalar, color, fontFamily

  • confetti.create(canvas, [globalOptions]) → function

    • Membuat instance fungsi confetti yang menggunakan canvas kustom
    • Ukuran canvas bisa dibatasi
    • Opsi global
      • resize : mengatur ukuran gambar canvas dan apakah ukurannya dipertahankan saat ukuran jendela berubah
      • useWorker : apakah rendering menggunakan web worker asinkron jika memungkinkan
      • disableForReducedMotion : apakah confetti dinonaktifkan sepenuhnya bagi pengguna mode pengurangan animasi
    • Hal yang perlu diperhatikan saat menggunakan useWorker: true
      • Canvas tidak boleh dimanipulasi secara langsung. Kontrolnya dipindahkan ke web worker

  • confetti.reset()

    • Menghentikan animasi dan menghapus semua confetti
    • Promise yang belum terselesaikan langsung di-resolve
    • Instance yang dibuat dengan confetti.create memiliki metode reset sendiri

Contoh penggunaan

  • Penggunaan dasar

    confetti();

  • Menggunakan banyak confetti

    confetti({
  particleCount: 150
});

  • Menyebarkan lebih lebar

    confetti({
  spread: 180
});

  • Menembakkan sedikit confetti dari posisi acak

    confetti({
  particleCount: 100, 
  startVelocity: 30,
  spread: 360,
  origin: { 
    x: Math.random(),  
    y: Math.random() - 0.2
  }
});

  • Menembakkan terus-menerus dari beberapa arah selama 30 detik

    var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  confetti({
    particleCount: 7,
    angle: 60, 
    spread: 55,
    origin: { x: 0 }
  });

  confetti({  
    particleCount: 7,
    angle: 120,
    spread: 55, 
    origin: { x: 1 }
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

Opini GN⁺

  • canvas-confetti tampaknya merupakan library ringan yang memudahkan penerapan efek confetti di halaman web. Library ini mendukung instalasi melalui NPM maupun CDN, sehingga terlihat cukup nyaman digunakan oleh developer.

  • Library ini mendukung berbagai pengaturan efek confetti sehingga cukup fleksibel. Jumlah confetti, tingkat penyebaran, ukuran, bentuk, dan warna bisa diatur dengan bebas untuk menciptakan berbagai suasana.

  • Menarik bahwa confetti dengan bentuk kustom juga bisa dibuat menggunakan teks atau SVG path. Khususnya, confetti berbasis emoji terasa seperti ide yang menyenangkan.

  • Kemampuan menjalankan animasi dengan Web Worker tanpa memblokir main thread juga tampak menjadi kelebihan. Namun, dalam kasus ini canvas tidak lagi bisa dikendalikan secara langsung, sehingga ada trade-off.

  • Dukungan mode pengurangan motion untuk pengguna yang sensitif terhadap animasi merupakan hal positif dari sisi aksesibilitas web. Karena mode ini direncanakan akan aktif secara default di versi mendatang, hal ini perlu diperhatikan.

  • Secara keseluruhan, ini tampak seperti library yang mudah digunakan dan menawarkan banyak opsi. Cocok untuk halaman perayaan atau game yang membutuhkan suasana ceria. Namun, penggunaan yang berlebihan dapat merusak pengalaman pengguna, jadi sebaiknya digunakan secara proporsional.

Bacaan terkait

1 komentar

 
GN⁺ 2024-04-26
Komentar Hacker News
  • Trik untuk animasi yang berkinerja baik adalah menggambar di canvas, menempatkan canvas di depan semua elemen lain, lalu menonaktifkan pointer event pada canvas agar halaman tetap bisa diinteraksikan
  • Ini mengingatkan pada masa SMA pada 2015 saat bersenang-senang membuat web. Saya pernah membuat animasi taburan confetti di sebuah situs kecil untuk mengajak seorang gadis ke pesta homecoming (kalau dipikir sekarang terasa culun). Ada masa ketika membuat situs web saat masih muda terasa seperti punya kekuatan super
  • Saya suka proyek kecil yang murni dibuat untuk bersenang-senang. Itulah alasan saya mulai ngoding, dan sampai sekarang masih menjadi motivasi utama
  • Jika jumlah partikel di halaman demo diubah menjadi sekitar 400, kita bisa melihat pemandangan mengecewakan di mana confetti tampak seperti bentuk "kerucut datar" yang seragam. Ini terlihat terlalu sempurna sehingga merusak ilusinya
  • Minat terhadap detail seperti ini di dunia—visualisasi statistik, properti film, confetti di situs web, dan semacamnya—cukup jarang, jadi saya menghargainya setiap kali menemukannya
  • Saya menduga distribusi nyatanya mendekati Gaussian, dan solusi yang baik tampaknya adalah langsung mengubah distribusi acaknya
  • Ini bukan hanya library yang keren dan berguna, tetapi juga contoh bagus dari "deep module" yang dibahas John Ousterhout dalam 'A Philosophy of Software Design'
  • Versi library yang paling dasar (memunculkan confetti) sangat mudah dipakai, tetapi kita bisa mendapatkan banyak hal dengan menjelajahi opsi yang ditawarkan (salju, warna tertentu, berbagai efek confetti, dll.)
  • Saya menambahkan efek confetti saat penjualan terjadi di dashboard manajer untuk tim sales, dan ternyata efeknya menyenangkan serta memotivasi
  • Meskipun mengesankan dan keren, saya tidak ingin melihat ini dijalankan di situs web yang saya gunakan. Terutama saya tidak ingin confetti muncul saat popup newsletter tampil atau ketika menambahkan barang ke keranjang belanja
  • Saya berharap nama fungsi reset-nya adalah confetti.resetti()
  • Beberapa tahun lalu saya membuat animasi serupa sebagai bagian dari sebuah produk. Alurnya adalah ketika pengguna baru mendaftar dan untuk pertama kalinya menggunakan produk untuk membuat hasil tertentu, animasi confetti akan ditampilkan. Para manajer produk menganggapnya menyenangkan dan segar lalu membanggakannya kepada para eksekutif, tetapi setelah melalui review UX dan pengujian aksesibilitas, akhirnya fitur itu dihapus dari produk. Menyenangkan untuk ditunjukkan dalam demo, tetapi bisa mengganggu bagi pengguna
  • Ada juga library Party.js: https://party.js.org/
  • Saya ingat betapa menakjubkannya perasaan saat menambahkan efek salju di situs e-commerce sekitar tahun 2005. Itu menunjukkan betapa jauhnya kita sudah melangkah (dalam beberapa hal!)