Spielen mit Partikeln mit der Webanimationen -API

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 id="Schritt-Partikelbreite-Höhe-und-Hintergrund"> 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)

Das obige ist der detaillierte Inhalt vonSpielen mit Partikeln mit der Webanimationen -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!