Nützliche Frontend-Bibliothek für Confetti-Animationen

 (github.com/catdad)
5 Punkte von GN⁺ 2024-04-26 | 1 Kommentare | Auf WhatsApp teilen

  • Installationsmethoden

    • Kann über NPM als Modul installiert werden 
      npm install --save canvas-confetti
    • Kann im Projekt mit require('canvas-confetti') verwendet werden
    • Da es sich um eine Client-Komponente handelt, funktioniert es nicht in Node. Das Projekt muss mit webpack o. Ä. gebaut werden
    • Kann über ein CDN direkt in eine HTML-Seite eingebunden werden 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • Bei Einbindung ins Projekt wird empfohlen, auf der Releases-Seite die neueste Version zu verwenden

  • Modus für reduzierte Animationen

    • Einige Nutzer bevorzugen keine Bewegungen, daher sollte dies berücksichtigt werden
    • Mit der Option disableForReducedMotion kann auf Nutzer Rücksicht genommen werden, die keine irritierenden Animationen möchten
    • Standardmäßig deaktiviert, aber in einem zukünftigen Major Release soll der Standardwert geändert werden

API

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

    • Nimmt ein einzelnes Optionsobjekt als Parameter entgegen
    • Gibt ein Promise zurück, wenn window.Promise verfügbar ist, andernfalls (z. B. in IE) null
    • Eine Promise-Implementierung kann per Polyfill oder über confetti.Promise bereitgestellt werden
    • Wenn confetti vor Abschluss mehrfach aufgerufen wird, wird dasselbe Promise zurückgegeben. Intern wird dasselbe Canvas-Element wiederverwendet
    • Sobald alle Animationen abgeschlossen sind, wird das von jedem Aufruf zurückgegebene Promise aufgelöst (resolve)
    • Wichtige Eigenschaften des options-Objekts
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex usw.

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

    • Erzeugt benutzerdefinierte Confetti-Formen mit einem SVG-Path-String
    • Unterstützt nur Vollfarben, Stroke ist nicht implementiert
    • Eine Transformationsmatrix ist erforderlich. Sie kann direkt übergeben oder mit einem Helper berechnet werden
    • Auf Browser mit Unterstützung für Path2D beschränkt
    • Gibt ein Shape-Objekt zurück

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

    • Funktion zum Rendern von Emoji-Confetti
    • Empfohlen wird ein einzelnes Zeichen, insbesondere ein Emoji
    • Da der Text rasterisiert wird, ist er nach der Erzeugung nicht gut für Größenänderungen geeignet
    • Wenn die Größe mit scalar angepasst wird, muss hier derselbe Wert verwendet werden
    • Optionen: text, scalar, color, fontFamily

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

    • Erzeugt eine Instanz der confetti-Funktion, die ein benutzerdefiniertes Canvas verwendet
    • Die Größe des Canvas kann begrenzt werden
    • Globale Optionen
      • resize: legt die Canvas-Bildgröße fest und ob sie bei Änderungen der Fenstergröße beibehalten wird
      • useWorker: ob nach Möglichkeit asynchrone Web Worker zum Rendern verwendet werden sollen
      • disableForReducedMotion: ob Confetti für Nutzer mit reduziertem Animationsmodus vollständig deaktiviert werden soll
    • Hinweise bei Verwendung von useWorker: true
      • Das Canvas darf nicht direkt manipuliert werden, da die Kontrolle an den Web Worker übertragen wird

  • confetti.reset()

    • Stoppt die Animation und entfernt sämtliches Confetti
    • Nicht aufgelöste Promises werden sofort aufgelöst
    • Mit confetti.create erzeugte Instanzen besitzen eine eigene reset-Methode

Anwendungsbeispiele

  • Grundlegende Verwendung

    confetti();

  • Viel Confetti verwenden

    confetti({
  particleCount: 150
});

  • Weit streuen

    confetti({
  spread: 180
});

  • Kleine Menge zufällig von zufälliger Position aus starten

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

  • 30 Sekunden lang fortlaufend aus mehreren Richtungen starten

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

Meinung von GN⁺

  • canvas-confetti wirkt wie eine leichtgewichtige Bibliothek, mit der sich Confetti-Effekte einfach auf Webseiten anwenden lassen. Sie unterstützt sowohl die Installation per NPM als auch die Einbindung per CDN, was für Entwickler sehr praktisch ist.

  • Die Bibliothek unterstützt zahlreiche Einstellungen für den Confetti-Effekt und ist dadurch sehr flexibel. Anzahl, Streuung, Größe, Form und Farben des Confetti lassen sich frei anpassen, wodurch sich unterschiedliche Stimmungen erzeugen lassen.

  • Interessant ist auch, dass sich mit Text oder SVG-Pfaden benutzerdefinierte Confetti-Formen erstellen lassen. Besonders Confetti mit Emojis ist eine unterhaltsame Idee.

  • Ein weiterer Vorteil ist, dass sich die Animation mithilfe von Web Workern ausführen lässt, ohne den Main Thread zu blockieren. Allerdings gibt es dabei den Trade-off, dass das Canvas nicht mehr direkt gesteuert werden kann.

  • Positiv im Hinblick auf Web Accessibility ist die Unterstützung eines Modus für reduzierte Animationen, um auf Nutzer Rücksicht zu nehmen, die empfindlich auf Bewegung reagieren. In einer zukünftigen Version soll dieser Modus standardmäßig aktiviert werden, was man im Blick behalten sollte.

  • Insgesamt wirkt es wie eine einfach zu verwendende Bibliothek mit vielen Optionen. Sie dürfte sich gut für Glückwunschseiten, Spiele und andere Szenarien eignen, in denen eine lebhafte Atmosphäre gefragt ist. Ein übermäßiger Einsatz kann jedoch die User Experience beeinträchtigen, daher sollte sie mit Maß eingesetzt werden.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-04-26
Hacker-News-Kommentar
  • Der Trick für performante Animationen besteht darin, auf ein Canvas zu zeichnen, das Canvas vor allen anderen Elementen zu platzieren und Pointer-Events auf dem Canvas zu deaktivieren, damit die Seite weiterhin interaktiv bleibt.
  • Ich erinnere mich noch daran, wie viel Spaß ich 2015 in der Highschool mit Webentwicklung hatte. Ich baute eine Konfetti-Animation für eine kleine Website, um ein Mädchen zum Homecoming einzuladen (heute wirkt das ziemlich nerdig). Es gab eine Zeit, in der sich das Erstellen von Websites als Kind wie eine Superkraft anfühlte.
  • Ich liebe kleine Projekte, die nur dem Spaß dienen. Deshalb habe ich überhaupt mit dem Programmieren angefangen, und das treibt mich bis heute an.
  • Wenn man auf der Demo-Seite die Partikelanzahl auf etwa 400 erhöht, sieht man leider, dass das Konfetti wie ein gleichmäßiger „flacher Kegel“ aussieht. Das wirkt zu perfekt und zerstört die Illusion.
  • In Bereichen wie Statistikvisualisierung, Filmrequisiten oder Website-Konfetti ist Aufmerksamkeit für solche Details selten; deshalb schätze ich es besonders, wenn ich ihr irgendwo begegne.
  • Ich vermute, die reale Verteilung nähert sich einer Gauß-Verteilung an, und als Lösung wäre es wohl am besten, die Zufallsverteilung direkt zu verändern.
  • Es ist nicht nur eine coole und nützliche Bibliothek, sondern auch ein gutes Beispiel für ein „Deep Module“, wie John Ousterhout es in A Philosophy of Software Design beschreibt.
  • Die grundlegendste Version der Bibliothek (Konfetti auslösen) ist sehr einfach zu benutzen, aber man kann viel herausholen, wenn man die angebotenen Optionen erkundet (Schnee, bestimmte Farben, verschiedene Konfetti-Effekte usw.).
  • Ich habe im Admin-Dashboard von Vertriebsmitarbeitern bei einem Verkauf einen Konfetti-Effekt hinzugefügt, und überraschenderweise macht das Spaß und motiviert.
  • Beeindruckend und cool ist es schon, aber ich möchte nicht sehen, wie so etwas auf Websites ausgelöst wird, die ich benutze. Besonders bei Newsletter-Pop-ups oder wenn ich etwas in den Warenkorb lege, will ich kein Konfetti sehen.
  • Ich wünschte, die Reset-Funktion hieße confetti.resetti().
  • Vor einigen Jahren habe ich als Teil eines Produkts eine ähnliche Animation gebaut. Der Ablauf war so, dass neue Nutzer nach der Anmeldung und der ersten Erstellung eines bestimmten Ergebnisses im Produkt eine Konfetti-Animation sahen. Die Produktmanager fanden das unterhaltsam und frisch und zeigten es stolz den Führungskräften, aber nach UX-Reviews und Accessibility-Tests wurde es schließlich aus dem Produkt entfernt. In Demos war es lustig, für Nutzer konnte es jedoch lästig sein.
  • Es gibt auch die Bibliothek Party.js: https://party.js.org/
  • Ich erinnere mich noch daran, wie beeindruckend es sich anfühlte, um 2005 einen Schneefall-Effekt in eine E-Commerce-Website einzubauen. Das zeigt, wie weit wir gekommen sind (zumindest in mancher Hinsicht!).