Kullanışlı bir frontend confetti animasyon kütüphanesi

 (github.com/catdad)
5 puan yazan GN⁺ 2024-04-26 | 1 yorum | WhatsApp'ta paylaş

  • Kurulum yöntemi

    • NPM üzerinden modül olarak kurulabilir 
      npm install --save canvas-confetti
    • Projede require('canvas-confetti') ile kullanılabilir
    • İstemci bileşeni olduğu için Node'da çalışmaz. Proje webpack vb. ile build edilmelidir
    • CDN üzerinden doğrudan HTML sayfasına eklenebilir 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • Projeye dahil ederken releases sayfasındaki en güncel sürümün kullanılması önerilir

  • Azaltılmış animasyon modu

    • Bazı kullanıcılar hareketi tercih etmez, bu yüzden bunun dikkate alınması gerekir
    • disableForReducedMotion seçeneğiyle dikkat dağıtıcı animasyon istemeyen kullanıcılar gözetilebilir
    • Varsayılan olarak devre dışıdır, ancak gelecekteki bir major sürümde varsayılan değerin değiştirilmesi planlanmaktadır

API

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

    • Parametre olarak tek bir seçenek nesnesi alır
    • window.Promise kullanılabiliyorsa Promise döndürür, kullanılamıyorsa (IE vb.) null döndürür
    • Polyfill veya confetti.Promise üzerinden bir Promise implementasyonu sağlanabilir
    • Tamamlanmadan önce confetti birden çok kez çağrılırsa aynı Promise döndürülür. İçeride aynı canvas öğesi yeniden kullanılır
    • Tüm animasyonlar tamamlandığında her çağrıdan dönen Promise resolve edilir
    • options nesnesinin başlıca özellikleri
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex vb.

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

    • SVG Path dizgesi kullanarak özel confetti şekilleri oluşturur
    • Yalnızca düz renk desteklenir, Stroke henüz uygulanmamıştır
    • Dönüşüm matrisi gerekir. Doğrudan verilebilir veya helper ile hesaplanabilir
    • Path2D destekleyen tarayıcılarla sınırlıdır
    • Shape nesnesi döndürür

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

    • Emoji confetti render etmek için kullanılan özellik
    • Tek karakter, özellikle emoji kullanılması önerilir
    • Metin rasterize edildiğinden oluşturulduktan sonra yeniden boyutlandırmaya uygun değildir
    • scalar ile boyutlandırılacaksa burada da aynı değerin kullanılması gerekir
    • text, scalar, color, fontFamily seçenekleri

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

    • Özel bir canvas kullanan confetti fonksiyonu örneği oluşturur
    • Canvas boyutunun sınırlandırılmasını sağlar
    • Global seçenekler
      • resize : canvas görüntü boyutunu ayarlama ve pencere boyutu değiştiğinde bunu koruma
      • useWorker : mümkünse render için asenkron web worker kullanılıp kullanılmayacağı
      • disableForReducedMotion : azaltılmış animasyon modunu kullanan kullanıcılar için confetti'nin tamamen devre dışı bırakılıp bırakılmayacağı
    • useWorker: true kullanılırken dikkat edilmesi gerekenler
      • Canvas doğrudan manipüle edilmemelidir. Kontrol web worker'a aktarılır

  • confetti.reset()

    • Animasyonu durdurur ve tüm confetti'leri kaldırır
    • Çözülmemiş Promise'leri hemen resolve eder
    • confetti.create ile oluşturulan örneklerin kendi reset metodu vardır

Kullanım örnekleri

  • Temel kullanım

    confetti();

  • Çok miktarda confetti kullanımı

    confetti({
  particleCount: 150
});

  • Geniş alana yayma

    confetti({
  spread: 180
});

  • Rastgele konumdan az miktarda fırlatma

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

  • 30 saniye boyunca birden çok yönden art arda fırlatma

    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);
  }
}());

GN⁺ görüşü

  • canvas-confetti, web sayfalarında kolayca confetti efekti uygulanmasını sağlayan hafif bir kütüphane gibi görünüyor. Hem NPM ile kurulum hem de CDN yöntemi desteklendiği için geliştirici açısından oldukça pratik görünüyor.

  • Confetti efektinde çeşitli ayarları desteklediği için esnekliği yüksek. Confetti sayısı, yayılma miktarı, boyut, şekil ve renk gibi unsurlar serbestçe ayarlanabildiğinden farklı atmosferler oluşturmak mümkün görünüyor.

  • Metin veya SVG path kullanarak özel şekilli confetti üretilebilmesi ilgi çekici. Özellikle emoji kullanan confetti yaklaşımı eğlenceli bir fikir gibi duruyor.

  • Web Worker kullanarak ana thread'i bloklamadan animasyon çalıştırabilmesi de bir avantaj gibi görünüyor. Ancak bu durumda canvas'ın doğrudan kontrol edilememesi bir trade-off yaratıyor.

  • Animasyona duyarlı bazı kullanıcıları düşünerek azaltılmış hareket modunu desteklemesi, web erişilebilirliği açısından olumlu. Gelecek sürümlerde bu modun varsayılan olarak etkinleşmesinin planlandığı da not edilmeli.

  • Genel olarak, kullanımı kolay ve çeşitli seçenekler sunan bir kütüphane gibi görünüyor. Neşeli bir atmosfer gerektiren kutlama sayfaları veya oyunlar için uygun olabilir. Ancak aşırı kullanım kullanıcı deneyimini olumsuz etkileyebileceğinden dengeli şekilde kullanılması daha doğru olur.

İlgili okumalar

1 yorum

 
GN⁺ 2024-04-26
Hacker News görüşleri
  • İyi performanslı animasyonların püf noktası, canvas’a çizip canvas’ı diğer tüm öğelerin önüne koymak; ama sayfayla etkileşime devam edilebilmesi için canvas üzerinde pointer event’lerini devre dışı bırakmak
  • 2015’te lisede web geliştirmeyle uğraşırken çok eğlendiğimi hatırlıyorum. Homecoming partisi için bir kızı davet etmek amacıyla küçük bir web sitesine konfeti animasyonu yapmıştım (şimdi düşününce biraz nerd işi görünüyor). Küçükken web sitesi yapmanın süper güç gibi hissettirdiği zamanlar vardı
  • Sırf eğlence için yapılan küçük projelere bayılıyorum. Programlamaya başlama nedenim buydu ve hâlâ en büyük motivasyon kaynaklarımdan biri
  • Demo sayfasında parçacık sayısını yaklaşık 400’e çıkarınca, konfetinin düzgün bir "yassı koni" şeklinde göründüğü hayal kırıklığı yaratan manzarayı görebilirsiniz. Fazla kusursuz görünmesi, illüzyonu bozuyor
  • İstatistik görselleştirmelerinde, film aksesuarlarında, web sitelerindeki konfetilerde; dünyada bu tür detaylara gösterilen özen nadir. Nerede görsem kıymetini biliyorum
  • Gerçek dağılımın Gaussian dağılıma yakın olacağını tahmin ediyorum; çözüm olarak da rastgele dağılımı doğrudan değiştirmek mantıklı görünüyor
  • Bu sadece havalı ve kullanışlı bir kütüphane değil, aynı zamanda John Ousterhout’un 'A Philosophy of Software Design'da sözünü ettiği "deep module" kavramına da iyi bir örnek
  • Kütüphanenin en temel sürümünü (konfeti çağırma) kullanmak çok kolay, ama sunulan seçenekleri (kar, belirli renkler, çeşitli konfeti efektleri vb.) kurcaladıkça da epey şey elde edilebiliyor
  • Satış ekibinin yönetici paneline satış gerçekleştiğinde konfeti efekti ekledim; şaşırtıcı şekilde eğlenceli ve motive edici oldu
  • Etkileyici ve hoş olsa da, kullandığım web sitelerinde bunun çalıştığını görmek istemem. Özellikle newsletter popup’larında ya da sepete ürün eklerken konfeti çıkmasını istemiyorum
  • Reset fonksiyonunun adını keşke confetti.resetti() koysalar
  • Birkaç yıl önce bir ürünün parçası olarak benzer bir animasyon yapmıştım. Yeni kullanıcı kaydolup ürünü ilk kez kullanarak belirli bir çıktı oluşturduğunda konfeti animasyonu gösteriliyordu. Ürün yöneticileri bunu eğlenceli ve taze bulup yöneticilere övünerek gösterdi, ama sonrasında UX incelemesi ve erişilebilirlik testlerinden geçince sonunda üründen kaldırıldı. Demoda göstermek için eğlenceliydi ama kullanıcılar için can sıkıcı olabiliyor
  • Party.js diye bir kütüphane de var: https://party.js.org/
  • 2005 civarında bir e-ticaret sitesine kar yağışı efekti eklediğimde hissettiğim o şaşırtıcı duyguyu hatırlıyorum. Ne kadar yol kat ettiğimizi gösteriyor (bazı açılardan!)