Hinzufügen von Partikeleffekten auf DOM-Elemente mit Leinwand

0
36

Werfen wir einen Blick auf, wie man web-Seiten visuell-fähig durch die Kombination der Freiheit der <canvas> mit HTML-Elementen. Insbesondere werden wir die Erstellung einer einfachen HTML-zu-Partikel-Effekt, aber die gleiche Technik könnte verwendet werden, für viele Arten von Effekten.

Bevor wir beginnen, fühlen Sie sich frei, schnappen Sie sich den source-code im repo.

Ansicht Repo

Erstellen Sie das erste element

Zuerst erstellen wir ein HTML-element zu bauen. Ich bin mit einem einfachen Stil-Taste, aber es kann wirklich jedes HTML-element.

Finden Sie die Stift-DOM-Canvas #1 ” von Zach Saucier (@Zeaklous) auf CodePen.

Ein moderner browser wie Chrome, Firefox, oder Edge ist erforderlich, um diese demos.

Aber wie können wir ein canvas-Bereich zu “sehen”, dieses element, so dass wir manipulieren jedes pixel mit canvas? Um dies zu erreichen, werden wir im wesentlichen brauchen, um einen Schnappschuss von unserem HTML-element — wie ein “print screen” – aber nur für das jeweilige element (den button), mit dem wir versuchen zu manipulieren, in Leinwand.

Erstellen Sie eine Leinwand-version von unserem element

Auch wenn es keine native Möglichkeit für Browser, dies zu tun und uns erlauben, Sie zu manipulieren, in JavaScript, es ist ein sehr handliches Bibliothek namens html2canvas, die uns helfen können. Alles, was wir tun müssen ist, laden Sie die Bibliothek, dann rufen Sie html2canvas (- element) und wird es wieder ein Versprechen zusammen mit einer Leinwand-version von unserem element! Verrückt genial.

Finden Sie den Stift DOM zu Leinwand #2 von Zach Saucier (@Zeaklous) auf CodePen.

Hier haben wir eine HTML-version und eine canvas-version unseres ” neben jeder anderen. Wir können die Leinwand-version als “screenshot” und als Quelle für Informationen, wie Sie die Farbe eines pixels an einer bestimmten Stelle.

Erste Daten aus unserem Leinwand

Um das zu tun, erstellen wir eine neue Funktion bekommen, die pixel-Informationen an einem bestimmten Ort. Wir brauchen auch nicht die Anzeige der Leinwand, die würden wir bekommen unsere Daten Farbe aus, weil wir zeigen wollen, die original-HTML-element statt.

Funktion getColorAtPoint(e) {
// Die Koordinate des Klicks
let x = e ist.offsetX;
lassen Sie y = e ist.offsetY;

// Erhalten die Daten Farbe von der Leinwand-version von unserem element an dieser Position
lassen Sie rgbaColorArr = ctx.getImageData(x, y, 1, 1).Daten;

// Mach was mit rgbaColorArr
}

Finden Sie den Stift, DOM, Canvas #3 von Zach Saucier (@Zeaklous) auf CodePen.

Jetzt brauchen wir eine Leinwand Teilchen mit Hilfe dieser Informationen.

Erstellen Sie eine Leinwand für die Anzeige von Partikeln

Wir haben nicht wirklich eine Leinwand zu setzen, die Partikel auf noch, denn wir wollen behalten die Leinwand haben wir von html2canvas für den Zugriff auf Informationen Farbe nur. Also erstellen wir einen weiteren:

var particleCanvas, particleCtx;
Funktion createParticleCanvas() {
// Erstellen unsere Leinwand
particleCanvas = document.createElement(“canvas”);
particleCtx = particleCanvas.getContext(“2d”);

// Die Größe unserer Leinwand
particleCanvas.Breite = window.innerWidth;
particleCanvas.height = Fenster.innerHeight;

// Position aus canvas
particleCanvas.Stil.position = “absolute”;
particleCanvas.Stil.top = “0”;
particleCanvas.Stil.Links = “0”;

// Sicherstellen, dass es auf andere Elemente
particleCanvas.Stil.zIndex = “1001”;

// Stellen Sie sicher, dass andere Elemente, die unter ihm sind anklickbar
particleCanvas.Stil.pointerEvents = “none”;

// Hinzufügen unserer Leinwand an der Seite
Dokument.Körper.appendChild(particleCanvas);
}

Holen Sie sich koordinieren-Daten

Wir müssen auch weiterhin zu Holen die Farbe der Daten von unserem lokalen Koordinaten — nicht nur oben und Links von der Schaltfläche, sondern auch die position in globalen Koordinaten (in Bezug auf die gesamte web-Seite), um die Partikel in der richtigen Platz auf der Leinwand.

Wir können dies über das folgende:

btn.addEventListener(“click”, e => {
// Holen Sie sich unsere Farbdaten wie vor
lassen Sie localX = e.offsetX;
lassen Sie localY = e.offsetY;
lassen Sie rgbaColorArr = ctx.getImageData(localX, localY, 1, 1).Daten;

// Die button-Positionierung in Bezug auf die Fenster
lassen bcr = btn.getBoundingClientRect();
lassen Sie globalX = bcr.Links + localX;
lassen Sie globalY = bcr.top + localY;

// Erstellen Sie ein Teilchen mit der Farbe, die wir erhalten, an das Fenster Lage
// dass wir errechnet
createParticleAtPoint(globalX, globalY, rgbaColorArr);
});

Erstellen Sie eine Partikel-Prototyp

Und lasst uns auch ein basic-Teilchen, hat eine draw – Funktion die Verwendung von Variablen:

/* Eine “explodierende” Partikel-Effekt verwendet, Kreise */
var ExplodingParticle = function() {
// Festlegen, wie lange wollen wir unsere Partikel zu animieren, für
diese.animationDuration = 1000; // in ms

// Einstellen der Geschwindigkeit für unsere Partikel
diese.speed = {
x: -5 + Math.random() * 10,
y: -5 + Math.random() * 10
};

// Die Größe unserer Partikel
diese.radius = 5 + Math.random() * 5;

// Set max time-to-live für unsere Partikel
diese.Leben = 30 + Math.random() * 10;
diese.remainingLife =.Leben;

// Diese Funktion wird aufgerufen durch unsere animation Logik später auf
diese.Unentschieden = ctx => {
sei p = this;

if(dies.remainingLife > 0
& & .radius > 0) {
// Zeichne einen Kreis an der aktuellen Position
ctx.beginPath();
ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
ctx.fillStyle = “rgba (” +.rgbArray[0] + ‘,’+.rgbArray[1] + ‘,’+.rgbArray[2] + “, 1)”;
ctx.fill();

// Update des Partikels Lage und Leben
p.remainingLife–;
p.radius= 0.25;
p.startX += p.Geschwindigkeit.x;
p.startY += p.Geschwindigkeit.y;
}
}
}

Erstellen Sie eine Partikel-Fabrik

Wir brauchen auch eine Funktion zu erstellen, die diese Teilchen auf einige Koordinaten und Farbinformationen, so dass Sie sicher, dass wir Sie hinzufügen, um das array von Teilchen, die erstellt werden:

var Partikel = [];
Funktion createParticleAtPoint(x, y, colorData) {
lassen particle = new ExplodingParticle();
Teilchen.rgbArray = colorData;
Teilchen.startX = x;
Teilchen.startY = y;
Teilchen.startTime = Date.jetzt();

Partikel.push(Partikel);
}

Hinzufügen von Animations-Logik

Wir müssen auch einen Weg, Sie zu animieren, alle Partikel, die erstellt werden.

Funktion update() {
// Löschen der alten Partikel
if(typeof particleCtx !== “undefined”) {
particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
}

// Zeichne alle unsere Partikel in Ihren neuen Standort
for(let i = 0; i < particles.length; i++) {
Teilchen[i].zeichnen(particleCtx);

// Einfache Art und Weise zu reinigen, wenn das Letzte Teilchen ist getan animieren
if(i === Teilchen.length – 1) {
lassen Sie Prozent = (Datum.jetzt() – particles[i].startTime) / Partikel.animationDuration;

if(Prozent > 1) {
Teilchen = [];
}
}
}

// Animieren performant
Fenster.requestAnimationFrame(update);
}

Fenster.requestAnimationFrame(update);

Setzen die Stücke zusammen, wir können jetzt Teilchen auf unsere HTML-element wenn wir auf Sie!

Finden Sie den Stift DOM zu Leinwand #4 von Zach Saucier (@Zeaklous) auf CodePen.

Ein Teilchen feuert aus der Taste jedes mal, wenn darauf geklickt wird.

Ordentlich!

Wenn wir wollen, zu “explodieren” die ganze Schaltfläche, die auf klicken Sie auf, statt nur einem pixel, wir brauchen Sie nur zu ändern, klicken Sie auf unsere Funktion:

lassen Sie reductionFactor = 17;
btn.addEventListener(“click”, e => {
// Die Farbdaten für unseren button
let Breite = btn.offsetWidth;
lassen Höhe = btn.offsetHeight
lassen Sie colorData = ctx.getImageData(0, 0, Breite, Höhe).Daten;

// Verfolgen Sie, wie viele Male wir haben die iterierten (in der Reihenfolge zu reduzieren
// die Gesamtzahl von Teilchen erstellen)
let count = 0;

// Gehen durch jede Position unseres Schaltfläche, und erstellen Sie ein Teilchen,
für(lassen localX = 0; localX < Breite; localX++) {
für(lassen localY = 0; localY < Höhe; lokal++) {
if(count % reductionFactor === 0) {
lassen Sie index = (localY * Breite + localX) * 4;
lassen Sie rgbaColorArr = colorData.slice(index, index + 4);

lassen bcr = btn.getBoundingClientRect();
lassen Sie globalX = bcr.Links + localX;
lassen Sie globalY = bcr.top + localY;

createParticleAtPoint(globalX, globalY, rgbaColorArr);
}
count++;
}
}
});

Finden Sie den Stift DOM zu Leinwand #5 von Zach Saucier (@Zeaklous) auf CodePen.

Nun wird die Schaltfläche angezeigt, zu explodieren in viele winzige Partikel, die, wenn geklickt wird.

Hoffentlich wird das web jetzt fühlt sich weniger restriktiv als noch am Anfang dieses Artikels nun, dass wir wissen, wir können mit den Zusätzen (wie eine Leinwand) für die Ausübung kreativer Freiheit.

Wir können noch mehr kreativ mit edge-detection zu sagen, wenn unser element ist außerhalb der Schranken, die einen container (also versteckt von der Ansicht) und erzeugen Teilchen, wenn unser element geht außerhalb der Grenzen.

Einen ganzen Artikel geschrieben werden konnte, diesen Prozess, da die Positionierung der Elemente in einem web-browser ist Komplex, aber ich habe ein kleines plugin namens Zerfallen, umfasst die Behandlung für diese Art der Sache.

Zerfallen: Ein plugin, um diesen Effekt für für Sie

Zerfallen ist open-source und mit der großen Menge der Unordnung, die erste production-ready code für diese Technik benötigt. Es ermöglicht auch mehrere Elemente für diesen Effekt auf der gleichen Seite, angegebenen Container verwendet werden, eine Möglichkeit zu ignorieren, festgelegte Farben, wenn nötig, und Veranstaltungen für verschiedene wichtige Momente im Prozess.

Ansicht Repo

Mit Zerfallen, wir müssen nur erklären, Daten-dis-type=”enthalten” auf unseren button und er wird es so machen, dass, wenn unser element geht, die außerhalb seines Containers Grenzen, Teilchen erzeugt! Sehen Sie die demo für sich selbst.

Zerfallen ist enthalten Wirkung auf ein draggable element.

Eine andere Art von Wirkung, die wir vornehmen können, mit Zerfallen ist, wo der container wird direkt in der Umgebung unserer element. Dies ermöglicht die eigenständige Partikel-Animationen wie dem button-Effekt, den wir vorher erwähnt. Durch die Animation der container und unsere wichtigste element selbst, können wir Teilchen in noch mehr interessante Möglichkeiten.

Ein slide to unlock ” animation Trigger explodierenden Partikel am Ende.

Aber dieser Ansatz hat auch seine Grenzen (und so auseinanderfällt). Zum Beispiel, es funktioniert nur wieder, IE11 durch das fehlen von pointer-events-Unterstützung vor, dass (vorausgesetzt, Zerfallen kompiliert wird, ES5). Zerfallen unterstützt nicht jedes DOM-element können wir uns vorstellen, aufgrund der Einschränkungen von html2canvas. Diejenigen, die ich am meisten einschränken, sind die unvollständige CSS-transform-Unterstützung und das fehlen von clip-path-Unterstützung.

Installieren Sie Zerfallen, können Sie mit npm installieren Sie zerfallen, wenn Sie mit npm. Oder Sie können manuell einfügen html2canvas.js und disintegrate.js bevor Sie zerfallen.init().

Zerfallen ist sehr neu und könnte einige Verbesserungen. Wenn Sie beitragen möchten, beide Zerfallen und html2canvas sind open source und Anregungen sind willkommen!

Wie denken Sie, diese Funktion könnte verwendet werden, in Ihren Projekten? Wie siehst du diesen Ansatz erweitern, was möglich ist, auf dem Internet? Lasst mich in den Kommentaren wissen.