Wenn es um Bewegung und Animationen geht, liebe ich wahrscheinlich nichts mehr als Partikel. Deshalb erstelle ich jedes Mal, wenn ich neue Technologien erkunde, am Ende Demos mit möglichst vielen Partikeln.
In diesem Beitrag erstellen wir noch mehr Partikelmagie mithilfe der Web Animations API, um beim Klicken auf einen Button einen Feuerwerkseffekt zu erzeugen.
Browser-Unterstützung
Zum Zeitpunkt, an dem ich diesen Artikel schreibe, unterstützen alle gängigen Browser – mit Ausnahme von Safari und Internet Explorer – die Web Animations API zumindest teilweise. Die Safari-Unterstützung kann im Menü "Experimentelle Features" des Entwicklermenüs aktiviert werden.
Diese Browser-Unterstützungsdaten stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 84 | 75 | Nein | 84 | 13.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 13.4-13.7 |
Wenn Sie daran interessiert sind, die Twitter-Herz-Animation zu reproduzieren, können Sie sich auch diesen coolen Artikel von Ana Tudor ansehen, der ein weiteres großartiges Beispiel für explodierende Partikel auf einem Button ist.
HTML-Setup
Wir benötigen für diese Demo nicht viel HTML. Wir verwenden ein <button>-Element, es könnte aber auch ein anderes Tag-Element sein. Wir könnten sogar auf jeden Klick auf der Seite reagieren, um Partikel überall erscheinen zu lassen, wenn wir wirklich wollten.
<button id="button">Click on me</button>CSS-Setup
Da jede Partikel einige CSS-Eigenschaften gemeinsam hat, können wir diese im globalen CSS der Seite festlegen. Da Sie benutzerdefinierte Tag-Elemente in HTML erstellen können, verwende ich den Tag-Namen <particle>, um die Verwendung semantischer Tags zu vermeiden. Aber in Wahrheit könnten Sie <p>, <i> oder jedes beliebige Tag animieren.
particle {
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
}Ein paar Dinge, die hier zu beachten sind
- Die Partikel sollten nicht mit dem Layout unserer Seite interagieren, daher setzen wir eine
fixed-Position mittopundleftauf jeweils0px. - Wir entfernen auch Pointer-Events, um jegliche Benutzerinteraktion mit den HTML-Partikeln zu vermeiden, während sie auf dem Bildschirm sind.
Da das Styling des Buttons und des Seitenlayouts nicht wirklich der Zweck dieses Artikels ist, lasse ich das beiseite.
JavaScript-Setup
Hier sind die sechs Schritte, denen wir in unserem JavaScript folgen werden
- Auf Klick-Ereignis am Button lauschen
- Erstellen von 30
<particle>-Elementen und Anhängen an das<body> - Festlegen einer zufälligen
width,heightundbackgroundfür jede Partikel - Animieren jeder Partikel von der Mausposition zu einer zufälligen Stelle, während sie ausblendet
- Entfernen der
<particle>aus dem DOM, wenn die Animation abgeschlossen ist
Schritt 1: Das Klick-Ereignis
// We first check if the browser supports the Web Animations API
if (document.body.animate) {
// If yes, we add a click listener on our button
document.querySelector('#button').addEventListener('click', pop);
}Schritt 2: Die Partikel
// The pop() function is called on every click
function pop(e) {
// Loop to generate 30 particles at once
for (let i = 0; i < 30; i++) {
// We pass the mouse coordinates to the createParticle() function
createParticle(e.clientX, e.clientY);
}
}
function createParticle(x, y) {
// Create a custom particle element
const particle = document.createElement('particle');
// Append the element into the body
document.body.appendChild(particle);
}Schritt 3: Breite, Höhe und Hintergrund der Partikel
function createParticle (x, y) {
// [...]
// Calculate a random size from 5px to 25px
const size = Math.floor(Math.random() * 20 + 5);
// Apply the size on each particle
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Generate a random color in a blue/purple palette
particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}Schritt 4: Jede Partikel animieren
function createParticle (x, y) {
// [...]
// Generate a random x & y destination within a distance of 75px from the mouse
const destinationX = x + (Math.random() - 0.5) * 2 * 75;
const destinationY = y + (Math.random() - 0.5) * 2 * 75;
// Store the animation in a variable because we will need it later
const animation = particle.animate([
{
// Set the origin position of the particle
// We offset the particle with half its size to center it around the mouse
transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
opacity: 1
},
{
// We define the final coordinates as the second keyframe
transform: `translate(${destinationX}px, ${destinationY}px)`,
opacity: 0
}
], {
// Set a random duration from 500 to 1500ms
duration: 500 + Math.random() * 1000,
easing: 'cubic-bezier(0, .9, .57, 1)',
// Delay every particle with a random value from 0ms to 200ms
delay: Math.random() * 200
});
}Da wir eine zufällige Verzögerung haben, sind die Partikel, die auf den Beginn ihrer Animation warten, oben links auf dem Bildschirm sichtbar. Um dies zu verhindern, können wir in unserem globalen CSS die Opazität jeder Partikel auf null setzen.
particle {
/* Same as before */
opacity: 0;
}Schritt 5: Partikel nach Abschluss der Animation entfernen
Es ist wichtig, die Partikelelemente aus dem DOM zu entfernen. Da wir bei jedem Klick 30 neue Elemente erstellen, kann der Speicher des Browsers ziemlich schnell voll werden und die Leistung beeinträchtigen. Hier ist, wie wir das machen können
function createParticle (x, y) {
// Same as before
// When the animation is finished, remove the element from the DOM
animation.onfinish = () => {
particle.remove();
};
}Endergebnis
Wenn wir alles zusammenfügen, erhalten wir das, was wir suchen: eine farbenfrohe Explosion von Partikelgüte.
Sie sehen die Animation in der Demo nicht? Überprüfen Sie, ob Ihr Browser die Web Animations API unterstützt. in der Support-Tabelle am Anfang des Beitrags.
Seien Sie kreativ!
Da all dies CSS verwendet, ist es ziemlich einfach, die Partikelstile zu ändern. Hier sind fünf Beispiele, die verschiedene Formen... und sogar Zeichen verwenden!
Oder hey, wir können sogar den Button selbst explodieren lassen, wie Zach Saucier es in diesem Beitrag getan hat.
Cool, aber Safari sagte nein :-(
Es funktioniert in Safari, wenn Sie Web-Animationen unter Entwickler -> Experimentelle Features aktivieren.
Erstaunlich, ich habe es gerade ausprobiert und ja, so erstaunlich, dass ich jetzt damit angeben kann.
Wirklich coole Sache! Beachten Sie, dass < in Ihrer For-Schleife und Ihren Math.floor-Anwendungsfällen zu einer um eins geringeren Obergrenze führt. D. h. 29 Partikel / Größe 5-24px usw. (wenn ich mich nicht irre). Danke für die tolle Demo!
Guter Punkt und tatsächlich ist es dasselbe Problem bei Teilen, bei denen ich Math.random() verwende (da es niemals 1 als Wert ausgibt) :)
Das ist so großartig! Können wir diese mit Web Animations API machen? https://tympanus.net/Development/ParticleEffectsButtons/
Oder diese hier https://tympanus.net/Development/Animocons/?
Wie können wir die Buttons so verschwinden lassen? Vielen Dank
Hast du dir die anderen oben genannten Artikel angesehen? :)
Ich denke, du wirst einige deiner Antworten finden :-)
Vielen Dank für den ausgezeichneten Artikel! Tatsächlich habe ich noch nie von dieser API gehört. Es scheint einfacher, Animationen zur Laufzeit auf diese Weise zu erstellen, als dafür z. B. css-in-js wie styled-components zu verwenden.
Hallo
Welches Programm verwendest du zum Schreiben von Code?