Verwenden Sie die Webanimationen -API, um coole Partikeleffekte zu erstellen: Klicken Sie auf die Schaltfl?che, um das Feuerwerk zu blühen!

Nichts kann den Charme der Animation besser zeigen als Partikeleffekte! Jedes Mal, wenn ich eine neue Technologie erforsche, kann ich nicht anders, als so viele Partikel wie m?glich zu verwenden, um eine Pr?sentation zu machen. In diesem Artikel wird die API von Webanimationen verwendet, um Feuerwerkseffekte auszul?sen, indem Sie auf eine Schaltfl?che klicken, um mehr erstaunliche Partikelmagie zu erstellen.

Browserunterstützung

Zum Zeitpunkt des Schreibens unterstützen alle wichtigen Browser au?er Safari und Internet Explorer zumindest teilweise die Webanimationen -API. Der Safari -Support kann im Entwicklermenü "Experience -Funktionen" aktiviert werden.

Der Browser unterstützt Daten von Caniuse, die weitere Details enth?lt. Die Nummer zeigt an, dass der Browser diese Funktion aus dieser Version und sp?ter unterstützt.

Desktop

Mobile/Tablet

Wenn Sie Twitter Love Animation reproduzieren m?chten, k?nnen Sie sich auch auf diesen wunderbaren Artikel von Ana Tudor beziehen, der auch ein gutes Beispiel für die Auswirkung eines Button -Explosionspartikels ist.

HTML -Struktur

Diese Demo erfordert nicht viel HTML -Code. Wir werden einen verwenden<button></button> Element, kann aber auch andere Arten von Tagelementen sein. Bei Bedarf k?nnen wir sogar ein Klickereignis auf der Seite anh?ren, damit die Partikel von überall auftauchen k?nnen.

 <button id="button">Klicken Sie auf mich</button>

CSS -Stil

Da jedes Teilchen einige gemeinsame CSS -Eigenschaften aufweist, k?nnen wir sie in den globalen CSS der Seite einstellen. Sie k?nnen benutzerdefinierte Tagelemente wie in HTML erstellen, die ich verwenden werde<particle></particle> Tagennamen, um die Verwendung semantischer Tags zu vermeiden. Aber in der Tat k?nnen Sie Animation animieren<div> Anwesend<code><span></span> oder ein Etikett, das Sie w?hlen.

 Partikel {
  Grenzradius: 50%;
  links: 0;
  Zeiger-Events: Keine;
  Position: fest;
  Top: 0;
  Deckkraft: 0; /*Die anf?ngliche Transparenz betr?gt 0, wobei Partikel sichtbar sind, bevor die Animation beginnt*/
}

Was beachtet werden sollte ist:

• Partikel sollten nicht mit dem Layout der Seite interagieren, daher stellen wir position auf fixed , top und left auf 0PX ein.
• Wir haben auch pointer-events entfernt, um eine Benutzerinteraktion mit HTML-Partikeln zu vermeiden, wenn sie auf dem Bildschirm angezeigt werden.

Da das Stildesign von Button und Seitenlayouts nicht im Mittelpunkt dieses Artikels steht, werde ich diesen Abschnitt überspringen.

JavaScript -Code

Hier sind sechs Schritte, die wir in JavaScript befolgen:

1. H?ren Sie sich den Klickereignis der Schaltfl?che an
2. Erstellen 30<particle></particle> und fügen Sie das Element dem DOM hinzu
3. Stellen Sie für jedes Partikel die zuf?llige Breite, H?he und Hintergrundfarbe ein
4. Animieren Sie jedes Teilchen so, dass es sich von der Maus Position zu zuf?lliger Position bewegt und allm?hlich verblasst
5. Entfernen Sie sie nach Abschluss der Animation aus dem DOM<particle></particle> Element

Schritt 1: Klicken Sie auf das Ereignis

 // Wir prüfen zuerst, ob der Browser die Webanimationen -API unterstützt
if (document.body.animate) {
  // Wenn unterstützt, fügen wir ein Klick -Listener -Dokument hinzu. QuerySelector ('#button'). AddEventListener ('Click', Pop);
}

Schritt 2: Partikelerstellung

 // Die Funktion pop () wird als Funktion Pop (e) {bezeichnet
  // Zirkular erzeugen 30 Partikel für (sei i = 0; i <h4> Schritt 3: Partikelbreite, H?he und Hintergrund</h4><pre class="brush:php;toolbar:false"> Funktion CreateParticle (x, y) {
  // ... (vorheriger Code)
  // Berechnen Sie die Zufallsgr??e zwischen 5px und 25px const size = math.floor (math.random () * 20 5);
  // Gr??e auf jedes Partikel anwenden.
  partial.Style.Height = `$ {size} px`;
  // Zuf?llige Farben in der blauen/lila paletten partial.style.background = `HSL ($ {math.random () * 90 180}, 70%, 60%)`;
  // ... (N?chste Schritte)
}

Schritt 4: Animieren Sie jedes Partikel

 Funktion CreateParticle (x, y) {
  // ... (vorheriger Code)
  // Zuf?llige X- und Y -Zielpositionen im Bereich der Mausposition 75px const destinationx = x (math.random () - 0,5) * 2 * 75 erstellen;
  const destination = y (math.random () - 0,5) * 2 * 75;

  // Die Animation in einer Variablen speichern, da wir sie sp?ter Const Animation = Partikel.animate ([
    {
      // Stellen Sie die Anfangsposition des Partikels ein // Wir verwenden die halbe Gr??e des Partikels, um das Partikel so zu verschieben, dass es auf der Maus zentriert ist: `übersetzen ($ {x - (Gr??e/ 2)} px, $ {y - (size/ 2)} px)`,,
      Deckkraft: 1
    },
    {
      // Wir definieren die endgültige Koordinate als zweite Keyframe -Transformation: `Translate ($ {destinationx} px, $ {destinationy} px)`,,
      Deckkraft: 0
    }
  ], {
    // Setzen Sie die zuf?llige Dauer zwischen 500 ms und 1500 ms: 500 Mathematik.Random () * 1000,,
    Lockerung: 'Kubikbezier (0, .9, .57, 1)',
    // Verwenden Sie zuf?llige Werte zwischen 0 ms und 200 ms, um jedes Teilchen zu verz?gern: math.random () * 200
  });
  // ... (N?chste Schritte)
}

Schritt 5: Entfernen Sie Partikel nach Abschluss der Animation

 Funktion CreateParticle (x, y) {
  // ... (vorheriger Code)
  // Wenn die Animation abgeschlossen ist, entfernen Sie die elementanimation.onfinish aus dem Dom = () => {{
    Partikel.Remove ();
  };
}

Endwirkung

Durch die gemeinsame Integration des Codes k?nnen wir den gewünschten Effekt erzielen: farbenfrohe Partikelexplosionseffekt.

Wenn Sie keine Animationen in der Demo sehen, überprüfen Sie bitte, ob Ihr Browser die Webanimationen -API unterstützt. Weitere Informationen finden Sie im Browser -Support -Formular zu Beginn des Artikels.

Unbegrenzte Kreativit?t

Da all dies CSS verwendet, ist das ?ndern des Partikelstils sehr einfach. Hier sind einige Beispiele mit verschiedenen Formen (sogar Zeichen!).

Oder wir k?nnen die Taste selbst sogar explodieren lassen, wie es Zach Saucier in diesem Beitrag getan hat.

(Zweiter zus?tzlicher Beispielcode für andere Formen und Zeichen und Links zum Zach -Saucier -Artikel)