JS implementiert WeChats "Shit Bombing"-Funktion

Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat WeChat eine neue Funktion veröffentlicht (aktualisiert auf WeChat 8.0.6). Die beliebteste Funktion ist zweifellos die „Shit-Explosion“-Funktion, und verschiedene Gruppen haben begonnen, die Shit-Explosion-Funktion zu verwenden.

Ich weiß nicht, ob Sie so etwas schon einmal erlebt haben. Als ich ein Kind war (also als ich noch sehr jung war, als ich noch in der Grundschule war), habe ich diesen bösen Spaß während des chinesischen Neujahrs auch ausprobiert. Ich hätte nicht erwartet, dass WeChat eine Online-Version davon machen würde. Sogar der Erfinder des Produkts machte sich über diese funktionale Erfindung lustig. Wenn wir jedoch eine Funktion schaffen können, die allen Spaß macht, dann ist die Bedeutung des Produkts die Mühe wert.

Zuvor, als WeChat 8.0 aktualisiert wurde, habe ich auch einen Artikel mit dem Titel „So erzielen Sie die Emoticon-Effekte ‚explosiver‘ Feuerwerkskörper in WeChat 8.0“ geschrieben. In einem früheren Artikel habe ich canvas verwendet, um dies zu implementieren. Jemand hat am Ende des Artikels kommentiert, dass ähnliche Funktionen durch lottie erreicht werden können. Tatsächlich bin ich daran sehr interessiert, habe es aber nie ausprobiert. Dieses Mal möchte ich eine neue Methode verwenden, lottie , um diese Funktion zu erreichen.

Wirkungserfahrung:

https://example.qiufeng.blue/wechat-feces/3-2-feces.html

Github-Adresse:

https://github.com/hua1995116/node-demo/tree/master/wechat-feces

Schrittaufschlüsselung

Jedes Objekt besteht aus kleineren Objekten. Wenn wir also die oben genannten Funktionen erreichen möchten, müssen wir dies natürlich Schritt für Schritt tun. Ich habe die oben genannten Funktionen grob in die folgenden vier Schritte unterteilt. Keiner von ihnen ist zu schwierig und man kann sagen, dass sogar ein Front-End-Neuling sie problemlos implementieren kann.

1. Lass die Bombe platzen

In diesem Schritt können wir das Wissen über quadratische Funktionen nutzen, um einen Flugbahnpfad zu schreiben (ähnlich wie y = $x^2$), und dann tween.js verwenden, um eine Tween-Animation zu erstellen.

2. Bombenexplosion

Verwenden Sie lottie , um Animationen zu realisieren.

3. Die Kacke wurde in die Luft gesprengt

Verwenden von css -Animationen

4. Alle sind schockiert

Verwenden von css -Animationen

Zusammenfassen

Das Obige ist die allgemeine Idee, über die wir sprechen möchten. Vielleicht sind Sie bereits mit einigen der Implementierungen vertraut, sodass Sie einige davon überspringen können. Lassen Sie uns nun, unter Berücksichtigung der oben genannten Ideen, mit der Umsetzung in die Praxis beginnen.

Konkrete Umsetzung

1. Lass die Bombe platzen

Bei genauerem Hinsehen ist zu erkennen, dass die Flugbahn der Bombe eigentlich eine Parabel ist. Wenn wir diese Funktion erreichen möchten, können wir leicht an quadratische Funktionen denken.

Sehen wir uns zunächst die Definition einer quadratischen Funktion an.

Allgemein gesagt nennt man eine Funktion der Form y=ax²+bx+c (a≠0) (a, b, c sind Konstanten) eine quadratische Funktion.

So wird es in Bildern ausgedrückt.

Dies ist offensichtlich der gewünschten Flugbahn sehr ähnlich.

Denn im normalen kartesischen Koordinatensystem zeigt die y-Achse senkrecht nach oben und die x-Achse waagerecht nach rechts. Bei der DOM-Positionierung ist oben links (0, 0), horizontal rechts die positive x-Achse und vertikal nach unten die positive y-Achse. Das Koordinatensystem wird einfach entlang der x-Achse umgedreht.

Wir müssen also nur eine quadratische Funktion bestimmen und erhalten dann die Flugbahn. Da der allgemeine Term einer quadratischen Funktion drei Unbekannte hat, müssen wir zur Bestimmung einer quadratischen Funktion nur drei Punkte kennen. Nehmen wir an, dass unsere quadratische Funktion so aussieht.

Unsere drei Punkte sind (0,H), (H,0), (3H, 3H). Durch Ersetzen des allgemeinen Terms erhalten wir die folgende Formel:

Dann lösen

erhalten:

Daher müssen wir nur die Höhe des höchsten Punkts der Bombe aus der „Scheiße“ ermitteln, um die gesamte Flugbahn zu zeichnen.

Nehmen wir nun an, unsere Bombe ist ein kleines Quadrat von 10px * 10px, und der Startpunkt ist auf (300, 300) und der Endpunkt auf (0, 100) H=100 eingestellt. Zu diesem Zeitpunkt erhalten wir die folgende quadratische Funktion:

Wir können die folgende Flugbahnanimation erhalten:

Zum Rendern jedes Animationsbilds haben wir die bekannte Tween-Animationsbibliothek Tween.js verwendet. Tween (Animation) ist ein Konzept, mit dem Sie die Eigenschaften eines Objekts auf sanfte Weise ändern können. Sie sagen ihm einfach, welche Eigenschaften geändert werden sollen, welche Endwerte sie haben sollen, wenn das Tween fertig ist, und wie lange das dauern soll, und die Tween-Engine kümmert sich um die Berechnung der Werte vom Start- bis zum Endpunkt.

var coords = { x: 300 }; // Der Startpunkt ist x = 300
var tween = new TWEEN.Tween(Koordinaten)
	.to({ x: 0 }, 1000) // Der Endpunkt ist x = 0 und die Aktion wird in 1 Sekunde abgeschlossen.easing(TWEEN.Easing.Linear.None) // Konstante Geschwindigkeit

Mit der obigen Definition können wir den x Wert jeder Änderung in onUpdate abrufen und dann y über die obige quadratische Funktion ermitteln und anschließend das kleine Quadrat aktualisieren.

tween.onUpdate(Funktion() {
    var x = Koordinaten.x;
    var y = 1/120 * x * x – 11/6 * x + 100;
		box.style.setProperty('transformieren', 'übersetzen(' + x + 'px, ' + y + 'px)');
})

An diesem Punkt fehlt dem Effekt, den wir fertiggestellt haben, noch etwas. Genau wie beim Malen haben wir nur das Skelett gezeichnet und müssen es einhüllen und ausmalen. Als nächstes müssen wir nur die folgenden zwei Dinge tun, und dann können wir den Effekt sehen ~

1. Ersetzen Sie das Quadrat durch eine Bombe. Die Form der Bombe ist sehr einfach und wir können PS verwenden, um sie aus der Ebene auszuschneiden.

2. Ändern Sie den Bewegungswinkel.

Vollständiger Code für diesen Abschnitt: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html

2. Bombenexplosion

Lassen Sie uns dann über die Wirkung der Bombenexplosion sprechen. Wie oben erwähnt, möchte ich lottie zum Schreiben der Animation verwenden. Was ist also lottie ?

Lottie ist eine Bibliothek, die mit AE erstellte Animationen analysieren kann (müssen mit Bodymovin in das JSON-Format exportiert werden) und Web, iOS, Android und React Native unterstützt. Auf der Webseite kann die Lottie-Web-Bibliothek die exportierte JSON-Animationsdatei analysieren und die Animation in Form von SVG oder Canvas in unsere Seite zeichnen.

Dann ging ich zu https://lottiefiles.com/ und fand eine json Datei mit Spezialeffekten für Explosionen.

Das Schreiben ist sehr einfach. Sie müssen nur lottie importieren und dann die Methode bodymovin.loadAnimation aufrufen.

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</Kopf>
<Text>
<div Klasse="bodymovin"></div>
<Skript>
    const animation = fenster.bodymovin.loadAnimation({
        Container: document.querySelector('.bodymovin'), // Das DOM-Element, das die Animation enthalten soll. Renderer: 'svg', // Rendering-Methode, SVG, Canvas, HTML (die Lightweight-Version rendert nur SVG)
        loop: true, // Ob in einer Schleife abgespielt werden soll autoplay: true, // Ob automatisch abgespielt werden soll path: './bomb.json', // Pfad der JSON-Animationsdatei });
</Skript>

Daher müssen wir den Explosionseffekt nur unmittelbar nach Abschluss der Parabel aufrufen, und tween.js stellt mir auch die Ereignismethode onComplete zur Verfügung. Wir müssen nur die Explosionsanimation im onComplete -Rückruf starten.

tween.onComplete(Funktion () {
  // Explosionsanimation schreiben}) 

Vollständiger Code für diesen Abschnitt: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html

3. Die Kacke wurde in die Luft gesprengt

3.1 Form

Auf ähnliche Weise schneidet Bomb mit PS eine transparente Schicht „Baba“ aus, genau so. (Es macht nichts, wenn ein paar Kletten vorhanden sind. Der eigentliche Kot ist nicht so groß, sodass die Kletten nicht leicht zu erkennen sind. Sie können das Problem auch durch Feinabstimmung beheben.)

.Kot {
  Position: absolut;
  Hintergrundbild: URL(./feces.jpg);
  Hintergrundgröße: 100 %;
  Hintergrundposition: Mitte;
  Hintergrundwiederholung: keine Wiederholung;
  Breite: 80px;
  Höhe: 80px;
  Transform-Origin: Mitte;
}

// Erstelle ein Baba-Element Funktion createfeces(scale = 1) {
  const fece = document.createElement('div');
  fece.className = "Kot";
  // Da Kot groß oder klein sein kann und Richtungen hat, sind Werte reserviert.
  const symbol = Math.random() > 0,5 ? 1 : -1;
  fece.style.transform = `Skala(${Skala * 1,1}) drehen(${Symbol * 20 * Math.random()}Grad)`
  Kot zurückgeben;
}

3.2 Standort

Wir können sehen, dass bei der Explosion Kot herausgeflogen ist. Es sind hauptsächlich 7 Kotstücke, die herausfliegen. Das mittlere ist das größte, und die anderen werden kleiner, je weiter sie vom Zentrum entfernt sind. Die Anordnung ähnelt einem Kreis, ist aber nicht so regelmäßig.

Daher können wir dies zunächst auf die einfachste Weise erreichen, indem wir es mit einem Kreis umgeben. Ein Kreis hat 360°, also müssen wir ihn nur in 6 gleiche Teile unterteilen. Wir umschließen insgesamt 6 Bälle, so dass zwischen jedem ein Winkel von 60° besteht.

Da die Bombe oben ungefähr eine Fläche von 300 x 300 hat, setze ich die Koordinaten des Mittelpunkts auf (150,150), erzeuge dann zufällig einen x-Punkt zwischen 70 und 230 und berechne dann den y-Wert. Nachdem der erste Punkt bestimmt wurde, beträgt der Winkel zwischen jedem Punkt 60 °, und die verbleibenden 5 Punkte können berechnet werden.

Da Berechnungen mit dem Mittelpunkt (150,150) als Kreismittelpunkt schwierig sind, habe ich den Mittelpunkt für die Berechnung auf (0, 0) verschoben und schließlich alle berechneten Punkte entlang der x- und y-Achse um 150 verschoben.

// Berechne die Positionen mehrerer zu generierender Häufchen // Der übergebene Parameter num ist die Anzahl der zu generierenden Häufchen function randomPosition(num) {
  const radius = 80; // Kreisradius const randomX = Math.random() * radius // Nimm ein beliebiges x zwischen 0 und Radius
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // Bestimme einen Punkt auf dem Kreis im ersten Quadranten const radian = Math.atan(y / randomX); // Der Bogenmaßwert dieses Punktes const step = Math.PI * 2 / num; // Der Bogenmaßwert jedes Scheißhaufens return new Array(num).fill(0).map((item, index) => {
    const r = (Index * Schritt + Bogenmaß)
    // Bogenmaß in 0 - 2 * PI umwandeln
    const tr = r > Math.PI * 2? r – Math.PI * 2: r < 0? r + Math.PI * 2: r;
    zurückkehren {
      x: Radius * Math.sin(tr),
      y: Radius * Math.cos(tr),
    }
  })
            
} 

Dann zeichnen wir gemäß dieser Idee, zeichnen 6 Häufchen und verschieben sie dann jeweils um 150 Grad entlang der x- und y-Achse.

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // Du kannst hier auch mehr als 6 definieren 

Es sieht ein bisschen so aus, aber sie sind alle gleich groß, also müssen wir damit umgehen und die Größe entsprechend der Entfernung vom Mittelpunkt skalieren. Ich habe grob eins geschrieben. Da der Radius des Kreises 80 beträgt, wird die Größe des Kots mit jeder Erhöhung um 80 auf 2/3 der ursprünglichen Größe anwachsen.

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // Da eine Verschiebung um 150 Grad erfolgt ist, muss die Entfernung vom Mittelpunkt berechnet werden const r = Math.pow(2/3, dis / length); // Das zu skalierende Verhältnis 

In realen Szenen wird unsere Platzierung jedoch eher zufällig sein, daher habe ich der Position jedes Haufens einen Zufallswert hinzugefügt, und der mittlere Haufen wird eher zur oberen linken Ecke hin verschoben, und ich habe auch einen bestimmten Zufallswert hinzugefügt.

Funktion Zufallsposition(Zahl) {
...
gibt neues Array(num).fill(0).map((item, index) => { zurück
  const r = (Index * Schritt + Bogenmaß)
  const tr = r > Math.PI * 2? r – Math.PI * 2: r < 0? r + Math.PI * 2: r;
  zurückkehren {
    // Zufälligen Wert x hinzufügen: Länge * Math.sin(tr) + (Math.random() > 0,5 ? 1 : -1) * 10 * Math.random(),
    y: Länge * Math.cos(tr) + (Math.random() > 0,5 ? 1 : -1) * 10 * Math.random(),
  }
})
} 

3.3 Winkel

Zum Schluss müssen wir nur noch den Winkel jedes Babas verschönern.

Funktion createfeces(scale) {
  const fece = document.createElement('div');
  fece.className = "Kot";
  const symbol = Math.random() > 0,5 ? 1 : -1; // Erzeuge einen zufälligen Winkel zwischen -20 und 20 fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = "0";
  Kot zurückgeben;
} 

3.4 Animation

Da dies einem Bombenabwurf gleicht, werde ich nicht ins Detail gehen. Es sollte erwähnt werden, dass wir hier zwei Tween-Animationen verwenden müssen, da die Kacke zuerst aus der Bombenposition kommt und dann langsam herunterkommt.

// Die Animation des ersten Auftretens, des Herausstürmens aus dem Explosionsloch function initFece(end) {
	...
  const start = { x: 0, y: 100, z: 0 }; // Explosionspunkt const tween = new TWEEN.Tween(start)
  .to({ ...end, z: 1 }, 100)
  .easing(TWEEN.Easing.Linear.Keine)
  .onUpdate(Funktion () {
    fece.style.setProperty('oben', `${start.y}px`);
    fece.style.setProperty('links', `${start.x}px`);
    fece.style.setProperty('Deckkraft', `${start.z}`);
  })
  .onComplete(Funktion () {
    initDown(start, fece).start(); // Punch-Out abgeschlossen, führe fallende transparente Animation aus})
  Tween zurückgeben;
}
// Fallen und transparent werden Animationsfunktion initDown(start, fece) {
  Konstante s = {
    y: start.y,
    o: 1,
  };
  const e = { y: start.y + 80, o: 0 };
  const tween = neues TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(Funktion () {
    fece.style.setProperty('oben', `${sy}px`);
    fece.style.setProperty('Deckkraft', `${so}`);
  })
  .onComplete(Funktion () {
  })
  Tween zurückgeben;
}

Endgültiger Effekt

Vollständiger Code für diesen Abschnitt: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html

3.5 Zusammenfassung

Da dieser Abschnitt ziemlich lang ist, fassen wir das Wissen zusammen

• Verwenden Sie zunächst die Eigenschaften der Kreisbahn von 1 = x² + y² um die Anfangsposition festzulegen
• Durch das Hinzufügen von Zufallswerten wird die Verteilung etwas unregelmäßiger.
• Fügen Sie dem Kot zufällige Winkel hinzu
• Bringen Sie das Zentrum näher an den Explosionspunkt
• Fügen Sie verkettete Animationen zum Erscheinen und Fallen hinzu

4. Alle sind schockiert

Diese Funktion kann mit einer einfachen CSS-Animation erreicht werden. Ich werde hier nicht näher darauf eingehen. Wenn Sie interessiert sind, können Sie es implementieren und in die Kommentare schreiben ~

Abschluss

Dies ist lediglich eine Erkundung dieses Effekts aus Neugier und keine 100%ige Wiederherstellung der Animation. Ich bin kein Animationsprogrammierer und verwende die obige Bibliothek zum ersten Mal. Mein Schreibstil ist also möglicherweise nicht sehr professionell. (Wenn Sie Fragen haben, weisen Sie bitte im Kommentarbereich auf etwaige Fehler hin.) Aber ich hoffe, Ihnen eine interessante Idee zu vermitteln. Beim Erstellen von Animationen können Sie lottie und tween -Bibliotheken verwenden, komplexe Probleme vereinfachen, unregelmäßige Dinge in regelmäßige Dinge umwandeln, komplexe Dinge in einfache Dinge verwandeln und sie schließlich Schritt für Schritt vertiefen. Ich möchte auch Nanxi für das Korrekturlesen dieses Artikels danken.

Dies ist das Ende dieses Artikels über die Verwendung von JS zur Implementierung der WeChat-Kampagne „Shit Bombing“. Weitere relevante Inhalte zur WeChat-Kampagne „Shit Bombing“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!