उपयोगी फ्रंटएंड confetti animation लाइब्रेरी

 (github.com/catdad)
5 पॉइंट द्वारा GN⁺ 2024-04-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • इंस्टॉल करने का तरीका

    • NPM के ज़रिए मॉड्यूल के रूप में इंस्टॉल किया जा सकता है 
      npm install --save canvas-confetti
    • require('canvas-confetti') से प्रोजेक्ट में इस्तेमाल किया जा सकता है
    • यह एक client component है, इसलिए Node में काम नहीं करता। webpack आदि का उपयोग करके प्रोजेक्ट को build करना होगा
    • CDN के ज़रिए HTML पेज में सीधे शामिल किया जा सकता है 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • प्रोजेक्ट में शामिल करते समय releases पेज से नवीनतम वर्ज़न इस्तेमाल करने की सिफारिश की जाती है

  • reduced motion मोड

    • कुछ उपयोगकर्ता motion पसंद नहीं करते, इसलिए इसे ध्यान में रखना चाहिए
    • disableForReducedMotion विकल्प के ज़रिए उन उपयोगकर्ताओं का ध्यान रखा जा सकता है जो विचलित करने वाले animation नहीं चाहते
    • डिफ़ॉल्ट रूप से यह निष्क्रिय है, लेकिन भविष्य के किसी major release में इसका डिफ़ॉल्ट मान बदलने की योजना है

API

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

    • यह एक single options object को पैरामीटर के रूप में लेता है
    • यदि window.Promise उपलब्ध है तो Promise लौटाता है, और यदि उपलब्ध नहीं है (जैसे IE) तो null लौटाता है
    • Polyfill या confetti.Promise के माध्यम से Promise implementation दी जा सकती है
    • पूरा होने से पहले confetti को कई बार कॉल करने पर वही Promise लौटता है। अंदरूनी रूप से वही canvas element दोबारा उपयोग होता है
    • सभी animations पूरी होने पर हर कॉल से लौटाया गया Promise resolve हो जाता है
    • options object की मुख्य properties
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex आदि

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

    • SVG Path string का उपयोग करके custom confetti shape बनाई जा सकती है
    • केवल single color समर्थित है और Stroke अभी लागू नहीं है
    • transformation matrix की ज़रूरत होती है। इसे सीधे दिया जा सकता है या helper से calculate किया जा सकता है
    • यह Path2D को support करने वाले browsers तक सीमित है
    • Shape object लौटाता है

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

    • emoji confetti render करने के लिए फ़ीचर
    • single character, खासकर emoji, इस्तेमाल करने की सिफारिश की जाती है
    • टेक्स्ट rasterize किया जाता है, इसलिए बनने के बाद उसका आकार बदलना उपयुक्त नहीं है
    • scalar से आकार बदलने पर यहाँ भी वही मान इस्तेमाल करना होगा
    • text, scalar, color, fontFamily विकल्प

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

    • custom canvas इस्तेमाल करने वाले confetti function का instance बनाता है
    • canvas के आकार को सीमित किया जा सकता है
    • global options
      • resize : canvas image size सेट करना और window size बदलने पर उसे बनाए रखना
      • useWorker : जहाँ संभव हो, asynchronous web worker का उपयोग करके render करना है या नहीं
      • disableForReducedMotion : reduced motion मोड उपयोगकर्ताओं के लिए confetti को पूरी तरह निष्क्रिय करना है या नहीं
    • useWorker: true इस्तेमाल करते समय सावधानियाँ
      • canvas को सीधे manipulate नहीं करना चाहिए। उसका नियंत्रण web worker को transfer हो जाता है

  • confetti.reset()

    • animation रोकता है और सभी confetti हटा देता है
    • unresolved Promise को तुरंत resolve कर देता है
    • confetti.create से बनाए गए instance का अपना reset method होता है

उपयोग उदाहरण

  • बुनियादी उपयोग

    confetti();

  • बड़ी मात्रा में confetti का उपयोग

    confetti({
  particleCount: 150
});

  • चौड़ा फैलाव

    confetti({
  spread: 180
});

  • random position से कम मात्रा में लॉन्च करना

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

  • 30 सेकंड तक कई दिशाओं से लगातार लॉन्च करना

    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⁺ की राय

  • canvas-confetti एक हल्की लाइब्रेरी लगती है जिससे वेब पेज पर आसानी से confetti effect लागू किया जा सकता है। NPM इंस्टॉलेशन और CDN, दोनों का समर्थन होने से डेवलपर सुविधा अच्छी लगती है.

  • यह confetti effect के लिए कई तरह की settings देता है, इसलिए इसकी लचीलापन अधिक है। confetti की संख्या, फैलाव, आकार, shape, color आदि को स्वतंत्र रूप से नियंत्रित करके अलग-अलग माहौल बनाए जा सकते हैं.

  • टेक्स्ट या SVG path का उपयोग करके custom shape वाले confetti भी बनाए जा सकते हैं, जो दिलचस्प है। खासकर emoji का उपयोग करने वाला confetti एक मज़ेदार विचार लगता है.

  • Web Worker का उपयोग करके main thread को block किए बिना animation चलाया जा सकता है, यह भी एक फ़ायदा लगता है। हालांकि इस स्थिति में canvas को सीधे नियंत्रित नहीं किया जा सकता, इसलिए एक trade-off है.

  • animation के प्रति संवेदनशील कुछ उपयोगकर्ताओं को ध्यान में रखते हुए reduced motion मोड का समर्थन करना web accessibility के लिहाज़ से सकारात्मक है। भविष्य के वर्ज़न में यह मोड डिफ़ॉल्ट रूप से सक्रिय होगा, इसलिए इस पर ध्यान देना चाहिए.

  • कुल मिलाकर यह उपयोग में आसान और कई विकल्प देने वाली लाइब्रेरी लगती है। उत्सव जैसा माहौल बनाने वाले celebration pages या games के लिए यह उपयुक्त हो सकती है। हालांकि इसका अत्यधिक उपयोग user experience को प्रभावित कर सकता है, इसलिए इसे संतुलित रूप से इस्तेमाल करना बेहतर होगा.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-04-26
Hacker News राय
  • बेहतर performance वाली animation का ट्रिक यह है कि canvas पर draw करें, canvas को बाकी सभी elements के ऊपर रखें, लेकिन canvas पर pointer events disable कर दें ताकि पेज के साथ interaction किया जा सके
  • 2015 में हाई स्कूल के दिनों में web development करते हुए बहुत मज़ा आया था, यह याद अभी भी है। homecoming party के लिए एक लड़की को invite करने हेतु मैंने एक छोटी website पर confetti animation बनाया था (अब सोचता हूँ तो थोड़ा nerdy लगता है)। बचपन में एक समय ऐसा था जब website बनाना किसी superpower जैसा लगता था
  • मुझे सिर्फ़ मज़े के लिए किए जाने वाले छोटे projects बहुत पसंद हैं। यही वजह थी कि मैंने programming शुरू की थी, और आज भी यही मेरी प्रेरक शक्ति है
  • demo page में particle count को लगभग 400 पर बदल दें, तो आप यह निराशाजनक दृश्य देख सकते हैं कि confetti एक समान "flat cone" आकार में दिखने लगता है। यह इतना परफेक्ट दिखता है कि भ्रम टूट जाता है
  • statistical visualization, movie props, website confetti जैसी चीज़ों में इस तरह की detail पर ध्यान दुनिया में कम ही मिलता है, इसलिए जहाँ भी यह दिखता है, मैं उसकी कद्र करता हूँ
  • मेरा अनुमान है कि वास्तविक distribution Gaussian के क़रीब होगा, और समाधान के तौर पर random distribution को सीधे बदलना बेहतर होगा
  • यह सिर्फ़ एक cool और उपयोगी library ही नहीं है, बल्कि John Ousterhout की 'A Philosophy of Software Design' में बताए गए "deep module" का भी एक अच्छा उदाहरण है
  • library का सबसे basic version (confetti summon करना) इस्तेमाल करने में बहुत आसान है, लेकिन दिए गए options (snow, specific colors, विभिन्न confetti effects आदि) को explore करते हुए काफ़ी कुछ हासिल किया जा सकता है
  • मैंने salespeople के admin dashboard में sale होने पर confetti effect जोड़ा था, और हैरानी की बात है कि यह मज़ेदार भी था और motivation भी देता था
  • प्रभावशाली और शानदार होने के बावजूद, मैं नहीं चाहूँगा कि यह उन websites पर चले जिन्हें मैं इस्तेमाल करता हूँ। खासकर newsletter popup या cart में product add करते समय confetti बिल्कुल नहीं चाहिए
  • काश reset function का नाम confetti.resetti() रखा गया होता
  • कुछ साल पहले मैंने एक product के हिस्से के रूप में ऐसा ही animation बनाया था। flow यह था कि जब नया user signup करता और product का पहली बार उपयोग करके कोई खास output बनाता, तब confetti animation दिखता। product managers को यह मज़ेदार और ताज़गीभरा लगा और उन्होंने इसे executives को गर्व से दिखाया, लेकिन बाद में UX review और accessibility testing के बाद इसे product से हटा दिया गया। demo में दिखाने के लिए यह मज़ेदार था, लेकिन users के लिए परेशान करने वाला हो सकता था
  • Party.js library भी है: https://party.js.org/
  • मुझे याद है कि लगभग 2005 में जब हमने एक e-commerce site पर snowfall effect डाला था तो वह कितना अद्भुत लगा था। इससे पता चलता है कि हम कितना आगे आ चुके हैं (कुछ मायनों में!)