Mehr als 300 Zeilen CSS-Code, um die explosiven Spezialeffekte von WeChat 8.0 zu erzielen

Ein Hauptmerkmal des WeChat 8.0-Updates ist die Unterstützung für animierte Emojis. Wenn die von Ihnen gesendete Nachricht nur ein integriertes Emoji-Symbol hat, wird dieses Emoji eine einfache Animation haben. Einige spezielle Emojis haben auch bildschirmfüllende Spezialeffekte. Beispielsweise hat das Feuerwerk-Emoji einen bildschirmfüllenden Feuerwerk-Spezialeffekt und das Bomben-Emoji hat eine Explosionsanimation und die Nachricht und der Avatar vibrieren entsprechend.

Mit dem professionellen Geist eines Front-End-Ingenieurs wollte ich sehen, ob ich einen ähnlichen Spezialeffekt erzielen konnte. Nach langem Ringen steht nun folgendes Ergebnis fest:

Der Kern des Projekts ist die Verwendung der Lottie-Animationsbibliothek. lottie ist eine von Airbnb erstellte Animationsbibliothek für alle Plattformen (Web, Android, iOS, React Native). Ihre Besonderheit besteht darin, dass sie mit Adobe After Effects erstellte Animationen direkt abspielen kann. Nachdem Designer das Bodymovin-Plug-In in After Effects verwendet haben, um Animationen in das JSON-Format zu exportieren, können Entwickler diese dann über das SDK der entsprechenden Plattform abspielen. (Projektadresse und Beispieldemonstration finden Sie am Ende des Artikels)

Nach Abschluss dieses Projekts habe ich das Gefühl, dass mein Front-End-Wissen bereichert wurde und ich habe neue Ideen für den zukünftigen Umgang mit komplexen Spezialeffekten. Wenn Sie auch Ihre Front-End-Entwicklungsfähigkeiten weiter verbessern möchten, können Sie diesen Artikel zum Üben befolgen. Zusätzlich zur Verwendung der Lottie-Bibliothek wird dieser gesamte Artikel mit nativem HTML/CSS/JavaScript implementiert, sodass Sie ihn schnell beherrschen, egal ob Sie ein React-, Vue- oder anderer Ingenieur sind.

Schreibschnittstelle

Ursprünglich wollte ich den HTML/CSS-Teil überspringen, aber ich dachte, dass CSS die Schwachstelle der meisten Leute sein könnte, also beschloss ich, die Ideen zur Implementierung der Schnittstelle aufzuschreiben. Wenn Sie den Kernteil sehen möchten, können Sie direkt zu 2. Senden normaler Nachrichten springen.

1. HTML-Teil

Schauen wir uns zunächst den HTML-Teil an. Aus dem Effektdiagramm:

• Oben befindet sich eine Titelleiste mit der Aufschrift „Chatten Sie mit XXX“.
• In der Mitte befindet sich das Chat-Informationsfeld, das die von beiden Parteien gesendeten Nachrichten enthält. Jede Nachricht besteht aus dem Avatar des Absenders und dem Nachrichteninhalt. Die von mir gesendeten Nachrichten stehen rechts und die von der anderen Partei gesendeten Nachrichten stehen links.
• Darunter befinden sich die unteren Informationen mit einer Schaltfläche zur Emoticon-Auswahl, einem Textfeld zum Bearbeiten der Nachricht und einer Schaltfläche zum Senden.

Der entsprechend dieser Struktur geschriebene HTML-Code sieht dann wie folgt aus:

<Haupt>
  <div Klasse="Chat">
    <div class="titleBar">Chatten Sie mit XXX</div>
    <div Klasse="Panel">
      <div Klasse="Nachricht von mir">
        <img src="./me.png" alt="" />
        <p><span>Hallo</span></p>
      </div>
      <div class="Ihre Nachricht">
        <img class="avatar" src="./du.png" alt="" />
        <p><span>Hallo</span></p>
      </div>
      <!-- Andere Nachrichten auslassen -->
    </div>
    <Fußzeile>
      <button class="Aufkleber auswählen">
        <img src="./emoji.svg" alt="" />
        <div Klasse="Aufkleber"></div>
      </button>
      <Eingabe
             Klasse="Nachrichteneingabe"
             Typ="Text"
             Name=""
             Ich würde=""
             Platzhalter="Bitte geben Sie Chat-Informationen ein"
             />
      <button class="send">Senden</button>
    </Fußzeile>
  </div>
</main>

Die den einzelnen Elementen entsprechenden Schnittstellenteile sind:

• Das <main /> -Element ist ein Gesamtcontainer, der zum Zentrieren des Chatfensters verwendet wird.
• <div class="chat"> ist der Container der Chat-Anwendung, der zum Layout der Titelleiste, des Chat-Panels und des unteren Sendefelds verwendet wird.
• <div class="titleBar"> wird verwendet, um die Titelleiste anzuzeigen.
• <div class="panel"> ist das Nachrichtenfenster, das zum Layout der Nachrichten verwendet wird.
• <div class="message"> ist der Nachrichtencontainer. Unterschiedliche Klassen werden verwendet, um den Absender zu unterscheiden. mine bedeutet, dass die Nachricht von mir gesendet wurde, und yours bedeutet, dass die Nachricht von der anderen Partei gesendet wurde. In jeder Nachricht wird <img class="avatar" > verwendet, um den Avatar anzuzeigen, und das Element <p> wird verwendet, um den Text anzuzeigen. Das Element <span> im Element <p> dient als Lottie-Container zum Abspielen der Emoticon-Animation.
• <footer> wird zum Layout der unteren Bedienschaltflächen und des Nachrichtensendefelds verwendet. In:
• <button class="chooseSticker"> ist die Schaltfläche zur Ausdrucksauswahl, die durch ein Smiley-SVG-Bild dargestellt wird. <div class="stickers"> darin ist die Popup-Ebene des Ausdrucksauswahlfelds. Die Ausdrücke darin werden dynamisch in JS geladen, um eine Animationsvorschau zu erhalten.
• <input class="messageInput" /> ist ein Eingabefeld für Chatnachrichten, nichts Besonderes.
• <button class="send">

Dies ist die Grundstruktur von HTML. Als nächstes schauen wir uns den CSS-Stil an.

2. CSS-Teil

Erstellen Sie eine style.css-Datei im Stammverzeichnis des Projekts und importieren Sie sie in das <head>-Tag von index.html:

<link rel="stylesheet" href="style.css" />

2.1 Globale Stile

Definieren Sie zunächst einige CSS-Variablen. CSS-Variablen werden verwendet, um es uns zu erleichtern, auf denselben Attributwert zu verweisen. Wenn wir den Stil später aktualisieren, können wir mehrere Änderungen vermeiden:

:Wurzel {
  --Primärfarbe: hsl(200, 100 %, 48 %);
  --inverse-color: hsl(310, 90 %, 60 %);
  --shadow-large: 0 0px 24px hsl(0, 0 %, 0 %, 0,2);
  --shadow-medium: 0 0 12px hsl(0, 0 %, 0 %, 0,1);
}

Die Bedeutungen dieser Variablen sind:

• --primary-color: hsl(200, 100%, 48%) , Primärfarbe, wie beispielsweise der blaue Hintergrund der von mir gesendeten Nachrichten.
• --inverse-color: hsl(310, 90%, 60%) , inverse Farbe oder Akzentfarbe, die einen Kontrast zur Primärfarbe bildet, beispielsweise die Hintergrundfarbe einer Schaltfläche „Senden“.
• --shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2) , großer Schatten, wie der Schatten der Titelleiste und der unteren Leiste.
• --shadow-medium: 0 0 12px hsl(0, 0%, 0%, 0.1) , kleiner Schatten, wie z. B. Eingabefeld und Popup-Ebene zur Emoticon-Auswahl.

Als nächstes folgen einige Reset-Stile:

* {
  Box-Größe: Rahmenbox;
  Polsterung: 0;
  Rand: 0;
  Schriftfamilie: Helvetica, „PingFang SC“, „Microsoft Yahei“, serifenlos;
}

Diese Stile gelten für alle Elemente. Stellen Sie das Boxmodell auf border-box ein, damit die inneren Ränder und Grenzen innerhalb der Breite und Höhe berechnet werden, setzen Sie den inneren und äußeren Abstand auf 0 und legen Sie abschließend die Standardschriftart fest.

2.2 Hauptcontainer

Der Main-Container wird verwendet, um den Chat-Anwendungscontainer in der Mitte des Browsers zu positionieren. Er verwendet ein Rasterlayout, legt Breite und Höhe auf 100 % des sichtbaren Bereichs des Browsers fest und setzt die Hintergrundfarbe auf Dunkelgrau:

hauptsächlich {
  Anzeige: Raster;
  Platziere Elemente: Mitte;
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrundfarbe: hsl (0, 0 %, 10 %);
}

2.3 Chat-Anwendungscontainer

Der Chat-Anwendungscontainer legt eine feste Breite und Höhe fest, um einen Mobiltelefonbildschirm zu simulieren, und verwendet ein Rasterlayout, um die Position der Titelleiste, des Chat-Bereichs und der unteren Bedienleiste zu steuern:

.chat {
  Breite: 375px;
  Höhe: 700px;
  Hintergrund: hsl (0, 0 %, 100 %);
  Rahmenradius: 8px;
  Anzeige: Raster;
  Rastervorlagenzeilen: maximaler Inhalt 1fr maximaler Inhalt;
}

Hier werden grid-template-rows verwendet, um die Chat-Anwendung in drei Zeilen zu unterteilen. Die Höhe der Titelleiste in der ersten Zeile und der unteren Bedienleiste in der letzten Zeile entspricht der maximalen Höhe des Inhalts, und das Chat-Panel in der Mitte entspricht der schwebenden Höhe.

2.4 Titelleiste

Die Titelleiste legt einfach eine Polsterung, Textzentrierung und einen Schatten fest:

.Titelleiste {
  Polsterung: 24px 0;
  Textausrichtung: zentriert;
  Kastenschatten: var(--shadow-large);
}

Tipps zur Optimierung der Benutzeroberfläche: Der innere Abstand wird verwendet, um den Weißraum zu vergrößern und eine visuelle Entspannung zu bewirken, und der Schatten wird verwendet, um ihn vom darunter liegenden Chat-Bereich zu unterscheiden.

2.5 Chat-Panel

Das Chat-Panel verwendet ein flexibles Layout, um die Nachrichten darin anzuordnen, legt die Anordnungsrichtung in Spalten fest und stellt den Überlauf auf „Automatisch“ ein. Wenn die Gesamthöhe der Nachricht die Höhe des Panels überschreitet, wird eine Bildlaufleiste angezeigt:

.Panel {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Polsterung: 24px 12px;
  Überlauf: automatisch;
}

Tipps zur Optimierung der Benutzeroberfläche: Die Polsterung dient auch hier dazu, genügend Platz zu lassen, um das Element von anderen Elementen abzugrenzen und so ein Gefühl der Überfüllung zu vermeiden.

2.6 Meldungen

Die Nachricht ist in drei Teile unterteilt: Nachrichtencontainer, Avatar und Nachrichtentext. Der Nachrichtentext und der Avatar sind im Nachrichtencontainer enthalten. Schauen wir uns zunächst den Stil des Nachrichtencontainers an. Der Nachrichtencontainer verwendet Flex-Layout, um den Nachrichtentext und den Avatar in einer Zeile mit einer maximalen Breite von 80 % der Panelbreite anzuordnen, und legt die Schriftart und die Ränder fest:

.Nachricht {
  Anzeige: Flex;
  maximale Breite: 80 %;
  Schriftgröße: 14px;
  Rand: 8px 0;
  Position: relativ;
}

position wird hier auf relativ eingestellt, um die bildfüllende Spezialeffektanimation dahinter zu positionieren.

Der Avatar legt einfach die Breite, Höhe, abgerundeten Ecken und den Abstand zum Nachrichtentext fest:

.Nachricht img {
  Breite: 40px;
  Höhe: 40px;
  Rahmenradius: 12px;
  Rand rechts: 12px;
}

Tipps zur Optimierung der Benutzeroberfläche: Hier müssen wir die Bedeutung des Abstands erwähnen. Ordnen Sie die Elemente nicht zu kompakt an, da dies sonst den visuellen Effekt stark beeinträchtigt. Die direkteste Auswirkung ist visuelle Überfüllung und visuelle Ermüdung.

Der Nachrichtentext verfügt ebenfalls über Abstände und abgerundete Ecken. Die abgerundeten Ecken entsprechen hier dem Avatar, um das Gefühl der Harmonie zu erhöhen. Es setzt außerdem einen Schatten und verwendet Flex-Layout, um den Text oder die Emoticon-Nachricht darin zu zentrieren:

.Nachricht p {
  Polsterung: 8px 12px;
  Rahmenradius: 12px;
  Kastenschatten: var(--shadow-large);
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

Standardmäßig basieren diese Stile auf der Nachricht der anderen Partei. Wenn es sich um eine von mir gesendete Nachricht handelt, muss sie rechts platziert werden und es müssen einige Anpassungen vorgenommen werden. Zuerst habe ich für die von mir gesendete Nachricht „Flex-Flow“ in „Row-Reverse“ geändert, sodass die Positionen des Avatars und des Nachrichtentexts vertauscht wurden. Anschließend habe ich „Align-Self“ verwendet, um es an der rechten Seite des Panels auszurichten:

.Nachricht.Mine {
  Flex-Flow: Zeile umkehren;
  selbst ausrichten: Ende flexen;
}

Passen Sie den äußeren Rand des Avatars an. Jetzt sollte es der Rand vom Nachrichtentext auf der linken Seite sein:

.message.mine img {
  Rand rechts: 0;
  Rand links: 12px;
}

Stellen Sie die Hintergrundfarbe des Nachrichtentexts auf Blau und die des Textes auf Weiß ein:

.Nachricht.Mine p {
  Hintergrundfarbe: var(--primary-color);
  Farbe: weiß;
}

2.7 Untere Bedienleiste

Sehen wir uns zunächst das Gesamtlayout des unteren Aktionsleistencontainers an. Verwenden Sie das Rasterlayout, um die Emoji-Auswahlschaltfläche, das Nachrichtensendefeld und die Senden-Schaltfläche in drei Spalten aufzuteilen. Mit Ausnahme des Nachrichtensendefelds, das eine schwebende Breite hat, haben die anderen beiden Schaltflächen eine feste Breite und sind standardmäßig zentriert. Legen Sie abschließend Schatten und Abstand fest:

Fußzeile {
  Anzeige: Raster;
  Rastervorlagenspalten: 48px 1fr 75px;
  Elemente ausrichten: zentrieren;
  Polsterung: 12px;
  Kastenschatten: var(--shadow-large);
}

Die Schaltfläche zur Emoticon-Auswahl richtet sich nach links aus und legt die relative Positionierung fest, um die Popup-Ebene zur Emoticon-Auswahl zu positionieren. Anschließend wird die Größe des Schaltflächensymbols festgelegt:

.Sticker auswählen {
  sich rechtfertigen: anfangen;
  Position: relativ;
}
.chooseSticker img {
  Breite: 36px;
  Höhe: 36px;
}

Der CSS-Code für die Popup-Ebene zur Emoji-Auswahl ist ziemlich umfangreich, aber sehr einfach. Schauen wir uns zuerst den Code an:

.Aufkleber {
  Anzeige: Raster;
  Rastervorlagenspalten: Wiederholen (automatisches Ausfüllen, 24 px);
  Spaltenabstand: 18px;

  Rahmenradius: 8px;
  Hintergrundfarbe: weiß;
  Kastenschatten: var(--shadow-medium);
  Polsterung: 6px 12px;
  Schriftgröße: 24px;

  Position: absolut;
  oben: berechnet (-100 % – 18 Pixel);
  Breite: 300px;
  Deckkraft: 0;
}

Dieser Code bedeutet:

• Die Popup-Ebene verwendet ein Rasterlayout. Repeat(auto-fill, 24px) bedeutet, so viele Spaltenelemente wie möglich in einer Zeile zu platzieren, wie die Breite zulässt. Die Breite jeder Spalte ist auf 24px festgelegt. Stellen Sie anschließend den Spaltenabstand auf 18px ein.
• Legen Sie Eckradius, Hintergrundfarbe, Schatten, Polsterung und Schriftgröße fest.
• Stellen Sie die Positionierung auf absolut ein, verschieben Sie sie auf 100 % der Höhe des enthaltenen Elements (also die Höhe von .chooseSticker) minus 18 Pixel und passen Sie sie an die entsprechende Position an. Stellen Sie die Breite auf 300 Pixel und die Deckkraft auf 0 ein, um es auszublenden.

Die Stile des Nachrichteneingabefelds und der Schaltfläche sind relativ einfach. Die Breite des Nachrichteneingabefelds füllt die gesamte Spalte aus, und die Schaltfläche „Senden“ verwendet justify-self: end , um sich rechtsbündig auszurichten. Hier der gleich gepostete Code:

.messageInput {
  Kastenschatten: var(--shadow-medium);
  Polsterung: 0px 12px;
  Rahmenradius: 8px;
  Breite: 100 %;
}
.schicken {
  Höhe: 100%;
  Breite: 90%;
  Rahmenradius: 8px;
  sich rechtfertigen: Ende;
  Farbe: weiß;
  Hintergrundfarbe: var(--inverse-color);
}

Fügen Sie abschließend einen .show Stil hinzu, um diesen Stil der Emoticon-Popup-Ebene hinzuzufügen und ihn anzuzeigen, wenn auf die Schaltfläche „Emoticon senden“ geklickt wird:

.zeigen {
  Deckkraft: 1;
}

3. JS-Teil

Schreiben Sie einen grundlegenden JS-Code, bevor Sie der Chat-Oberfläche Funktionen hinzufügen. Erstellen Sie eine Datei index.js im Stammverzeichnis des Projekts und verweisen Sie in index.html darauf. Beachten Sie, dass sie über dem schließenden Tag von </body> platziert werden sollte, damit der Code in js erst ausgeführt wird, nachdem das HTML-DOM geladen wurde, um zu verhindern, dass das Element gefunden wird:

<Text>
   <!-- Andere Codes ausgelassen-->
   <script src="index.js"></script>
 </body>

Holen Sie sich in index.js zuerst das zu bedienende DOM-Element:

const panelEle = document.querySelector(".panel");
const chooseStickerBtn = document.querySelector(".chooseSticker");
const stickersEle = document.querySelector(".stickers");
const msgInputEle = document.querySelector(".messageInput");
const sendBtn = document.querySelector(".send");

In:

• panelEle ist ein Nachrichtenpanel-Element, das zum Anhängen neuer Nachrichten verwendet wird.
• chooseStickerBtn ist die Schaltfläche zur Emoticon-Auswahl. Wenn Sie darauf klicken, wird das Emoticon-Auswahlfeld angezeigt.
• stickersEle ist das angezeigte Emoticon-Auswahlfeld.
• msgInputEle ist das Nachrichteneingabefeld.
• sendBtn ist die Senden-Schaltfläche.

Importieren Sie dann Lotties JS-Bibliothek. Sie können sie aus dem Beispielcode-Repository herunterladen oder lottie.min.js von https://cdnjs.com/libraries/bodymovin herunterladen. Legen Sie sie nach dem Herunterladen in das Stammverzeichnis des Projekts und importieren Sie sie dann über dem Import von index.js in index.html:

<script src="lottie.min.js"></script>

Laden Sie die Ressourcendateien für die Ausdrucksanimation herunter, die alle im JSON-Format vorliegen. Legen Sie sie nach dem Herunterladen einfach im Stammverzeichnis des Projekts ab:

• Kürbis-Emoticon: https://lottiefiles.com/43215-pumpkins-sticker-4
• Bomben-Emoticon: https://lottiefiles.com/3145-bomb
• Explosionsanimation: https://lottiefiles.com/9990-explosion

Schauen wir uns als Nächstes an, wie jede Funktion implementiert wird.

Senden Sie eine normale Nachricht

Beim Senden einer normalen Nachricht wird die Nachricht der Nachrichtenliste hinzugefügt und der Inhalt im Eingabefeld gelöscht, nachdem der Benutzer die Nachricht in das Eingabefeld eingegeben und auf „Senden“ geklickt hat. Fügen Sie dann der Schaltfläche „Senden“ ein Klickereignis hinzu:

sendBtn.addEventListener("klicken", () => {
  const msg = msgInputEle.value;
  wenn (Nachricht) {
    Nachricht anhängen(Nachricht);
  }
});

In der Ereignisbehandlungsfunktion:

• Ermitteln Sie, ob der Benutzer eine Nachricht eingegeben hat.
• Wenn es eingegeben wird, wird es der Nachrichtenliste angehängt.

Schauen wir uns den Code der Funktion appendMsg() an:

Funktion appendMsg(msg, Typ) {
  // Nachrichtenelement erstellen const msgEle = panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // Auf den von "mir" gesendeten Stil einstellen msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // Zur neuesten Nachricht scrollen panelEle.scrollTop = panelEle.scrollHeight;
  msgInputEle.value = "";
}

Die Funktion erhält zwei Parameter, msg und type, die Inhalt und Typ der anzuhängenden Nachricht sind. type ist optional. Wenn es nicht übergeben wird, wird es als normale Textnachricht betrachtet. Wenn „stickers“ übergeben wird, handelt es sich um eine Emoticon-Nachricht, die jetzt nicht benötigt wird. In dieser Funktion werden hauptsächlich folgende Dinge erledigt:

• Erstellen Sie ein neues Nachrichtenelement msgEle entsprechend der HTML-Struktur der Nachricht und hängen Sie es an die Nachrichtenliste an.
• Stellen Sie den Nachrichtenstil auf „Von mir gesendet“ ein.
• Die internen Elemente sind der Avatar und die Textnachricht, die in Form eines Template-Strings dem innerHTML-Attribut von msgEle zugewiesen werden und in <p> der Wert der Variable msg verwendet wird.
• Scrollen Sie abschließend mit der Bildlaufleiste zur neuesten Nachricht und löschen Sie die Nachricht im Eingabefeld.

Damit können Sie normale Textnachrichten senden.

Senden Sie animierte Emoticons

Bevor Sie animierte Emoticons senden, müssen Sie diese zuerst laden. Definieren Sie oben in index.js die Schlüssel-Wert-Paarinformationen des Ausdrucksnamens und des Ausdrucksanimationsdateipfads:

const Aufkleber = {
  Bombe:
    Pfad: "./3145-bomb.json",
  },
  Kürbis:
    Pfad: "./43215-pumpkins-sticker-4.json",
  },
};

Wir finden den entsprechenden Animationspfad basierend auf Schlüsseln wie bomb und pumkin . Initialisieren Sie dann den Ausdruck in der Popup-Ebene, damit der Benutzer Folgendes auswählen kann:

// Initialisiere das Ausdrucksfeld. Du kannst es auch initialisieren, wenn das Fenster zur Ausdrucksauswahl erscheint. Object.keys(stickers).forEach((key) => {
  const lottieEle = stickersEle.appendChild(document.createElement("span"));
  // Erstelle für jeden Ausdruck einen Lottie-Spieler const player = lottie.loadAnimation({
    Behälter: lottieEle,
    Renderer: "svg",
    Schleife: wahr,
    Autoplay: falsch,
    Pfad: Aufkleber[Schlüssel].Pfad,
  });
  // Wenn ein Emoji ausgewählt ist, sende eine Nachricht und stelle den Typ auf Sticker-Emoji-Nachricht ein lottieEle.addEventListener("click", () => {
    appendMsg(Schlüssel, "Aufkleber");
  });
  // Wenn die Maus darüber bewegt wird, wird die Animationsvorschau abgespielt. lottieEle.addEventListener("mouseover", () => {
    Spieler.spielen();
  });
  // Wenn die Maus darüber bewegt wird, stoppen Sie die Animationsvorschau lottieEle.addEventListener("mouseleave", () => {
    Spieler.Stopp();
  });
});

Der Code hier führt die folgenden Operationen aus:

• Durchlaufen Sie die Objekte, die Ausdrucksinformationen speichern.
• Erstellen Sie einen Lottie-Container und verwenden Sie das Span-Element, da der Lottie-Animationsplayer in einem bestimmten HTML-Element gemountet werden muss.
• Rufen Sie lotties loadAnimation() auf, um die Animation zu laden. Dabei müssen die folgenden Parameter übergeben werden:
• Container: Der Container, an dem der Player montiert wird.
• Renderer: Sie können wählen, ob Sie zum Rendern der Animation SVG oder Canvas verwenden möchten.
• Schleife: Gibt an, ob die Animation in einer Schleife abgespielt werden soll. Da die Animation in der Popup-Ebene zur Ausdrucksauswahl in der Vorschau angezeigt wird, wird die Schleifenwiedergabe unterstützt.
• Autoplay: Ob automatisch abgespielt werden soll. Stellen Sie es hier auf „Nein“ ein und lassen Sie die Animation abspielen, wenn die Maus darüber bewegt wird.
• Pfad: Pfad der JSON-Animationsdatei, direkt vom Objekt abgerufen.
• loadAnimation() gibt eine Instanz von Lottie zurück und speichert sie im Player.

Anschließend werden dann verschiedene Ereignisse erfasst:

• Wenn auf lottieEle, das Emoticon, geklickt wird, wird eine Emoticon-Nachricht gesendet und der msg-Parameter von appendMsg() wird auf den Schlüssel des Emoticons und der Typparameter auf „Sticker“ gesetzt.
• Wenn Sie mit der Maus über den Ausdruck fahren, wird die Animation abgespielt.
• Wenn die Maus aus dem Ausdruck herausbewegt wird, stoppen Sie die Animation.

Als nächstes fügen Sie der Schaltfläche „Emoji senden“ ein Ereignis hinzu. Beim Klicken wird der Anzeigestatus der Emoji-Popup-Ebene umgeschaltet:

chooseStickerBtn.addEventListener("klicken", () => {
  stickersEle.classList.toggle("anzeigen");
});

Klicken Sie jetzt auf die Schaltfläche „Emoji senden“, um die Popup-Ebene zur Emoji-Auswahl anzuzeigen. Sie können noch keine Emoticons senden, da diese in der Funktion appendMsg() noch nicht verarbeitet wurden. Lassen Sie uns nun den darin enthaltenen Code ändern. Stellen Sie zunächst fest: Wenn es sich um eine Emoticon-Nachricht handelt, fügen Sie dem <p> -Element in der Nachricht keine Informationen hinzu:

Funktion appendMsg(msg, Typ) {
 // ... 
  msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${Typ === "Aufkleber" ? "" : msg}</span></p>
  `;
}

Rufen Sie dann darunter die Funktion playSticker() auf, um die Animation abzuspielen:

// Emoji-Nachrichten verarbeiten und zugehörige Animationen abspielen, wenn (Typ === "Sticker") {
  spieleSticker(msg, msgEle);
}

Die Funktion playSticker() empfängt zwei Parameter, einer ist die Emoticon-Taste und der andere ist das Nachrichtenelement. Der Inhalt der msg-Variable ist zu diesem Zeitpunkt der Ausdrucksschlüssel, der im lottieEle-Klickereignis übergeben wird. Der Code in der Funktion lautet wie folgt:

Funktion playSticker(Taste, msgEle) {
  // Ausdrucksnachricht, Lottie-Animation erstellen const lottieEle = msgEle.querySelector("span");
  lottieEle.style.width = "40px";
  lottieEle.style.height = "40px";
  lottie.loadAnimation({
    Behälter: lottieEle,
    Renderer: "svg",
    Schleife: falsch,
    Autoplay: wahr,
    Pfad: Aufkleber[Schlüssel].Pfad,
  });
}

In dieser Funktion werden hauptsächlich folgende Operationen ausgeführt:

• Holen Sie sich das Span-Element in der Nachricht, das als Animationscontainer für Lottie dient.
• Stellen Sie die Breite und Höhe der Ausdrucksanimation auf 40 Pixel ein.
• Verwenden Sie Lottie, um die Animation zu laden, und setzen Sie „Loop Play“ auf „False“ und „Auto Play“ auf „True“, um die Animation automatisch abzuspielen, wenn das Emoticon gesendet wird, und sie nur einmal abzuspielen.

Jetzt können Sie Emoji-Nachrichten senden und die zugehörigen Animationen werden automatisch abgespielt. Als Nächstes sehen wir uns an, wie Sie die Vollbildanimation der Bombe und den Schütteleffekt der Nachrichtenelemente implementieren.

Senden Sie Emoticons mit Vollbildeffekten

Für diese Art von Emoticon mit Vollbild-Spezialeffekten können Sie es separat beurteilen oder verwandte Vorgänge im Objekt definieren, das das Emoticon speichert. Hier beurteilen wir der Einfachheit halber, ob der Benutzer ein Bomben-Emoticon separat gesendet hat, und wenden dann die entsprechenden Spezialeffekte an.

Zunächst wird in der Funktion appendMsg() eine Entscheidung getroffen. Wenn es sich bei der gesendeten Nachricht um eine Emoticon-Nachricht handelt und das Emoticon eine Bombe ist, wird eine Vollbildanimation abgespielt und die Nachricht geschüttelt:

Funktion appendMsg(msg, Typ) {
  if (Typ === "Aufkleber") {
    spieleSticker(msg, msgEle);
    wenn (msg === "Bombe") {
      // Explosionsanimation abspielen setTimeout(() => {
        spieleExplosion(msgEle);
      }, 800);
      // Nachrichtenliste schütteln shakeMessages();
    }
  }
}

Hier wird die Vollbild-Explosionsanimation vor der Ausführung um 800 Millisekunden verzögert. Der Zweck besteht darin, die Vollbildanimation abzuspielen, wenn der Bombenausdruck zum entsprechenden Zeitpunkt abgespielt wird. Die Funktion playExplosion() wird zum Abspielen der Animation verwendet und das Nachrichtenelement wird an sie übergeben. Nachdem die Explosions-Vollbildanimation beendet ist, rufen Sie shakeMessages() auf, um die Nachrichten zu schütteln. Hier ist der Code der Funktion playExplosion():

Funktion playExplosion(Anker) {
  const explosionAnimeEle = anchor.appendChild(document.createElement("div"));
  explosionAnimeEle.style.position = "absolut";
  explosionAnimeEle.style.width = "200px";
  explosionAnimeEle.style.height = "100px";
  explosionAnimeEle.style.right = 0;
  explosionAnimeEle.style.bottom = 0;
  const explosionPlayer = lottie.loadAnimation({
    Behälter: explosionAnimeEle,
    Renderer: "svg",
    Schleife: falsch,
    Autoplay: wahr,
    Pfad: "./9990-explosion.json",
  });
  explosionPlayer.setSpeed(0.3);
  // Nachdem die Wiedergabe abgeschlossen ist, zerstöre die explosionsbezogenen Animationen und Elemente explosionPlayer.addEventListener("complete", () => {
    explosionPlayer.destroy();
    explosionAnimeEle.entfernen();
  });
}

Die Funktion playExplosion() erhält einen Anker, also die Position, an der die Vollbildanimation startet. Da die Animation in diesem Beispiel relativ klein ist, wird sie unterhalb der zuletzt gesendeten Nachricht fixiert. Hier ist der Anker der Explosionsanimation das Nachrichtenelement. Die Funktion führt dann die folgenden Operationen aus:

• Fügen Sie ein Vollbild-Animationselement hinzu, stellen Sie es auf absolute Positionierung (200 Pixel Breite, 100 Pixel Höhe) ein und platzieren Sie es in der unteren rechten Ecke des neuesten Nachrichtenelements.
• Lottie-Animation laden, keine Schleife, automatische Wiedergabe.
• Da die ursprüngliche Animationsgeschwindigkeit zu hoch ist, wird hier die Methode setSpeed() der Lottie-Instanz aufgerufen, um die Geschwindigkeit auf das 0,3-fache einzustellen.
• Legen Sie dann den Ereignislistener für die Lottie-Instanz fest: „abgeschlossen“, der ausgelöst wird, wenn die Animation abgeschlossen ist, und die Lottie-Instanz und das Vollbild-Animationselement werden zerstört.

Auf diese Weise wird ein Vollbild-Animationseffekt erzielt. Als nächstes schauen wir uns den Code zum Message Shaking an:

Funktion shakeMessages() {
  [...panelEle.Kinder]
    .umkehren()
    .Scheibe(0, 5)
    .forEach((messageEle) => {
      const avatarEle = messageEle.querySelector("img");
      const msgContentEle = messageEle.querySelector("p");
      avatarEle.classList.remove("schütteln");
      msgContentEle.classList.remove("schütteln");
      setzeTimeout(() => {
        avatarEle.classList.add("schütteln");
        msgContentEle.classList.add("schütteln");
      }, 700);
    });
}

Die Funktionsweise dieser Funktion ist:

• Verwenden Sie reverse() und slice(), um die letzten 5 Nachrichten zu mischen. Sie können 5 auch größer machen, um mehr Nachrichten zu mischen.
• Fügen Sie dann in der Schleife dem Avatar und der Nachricht die Shake-Klasse hinzu, um die Schüttelanimation auszuführen. Der Inhalt dieser Klasse wird später vorgestellt.
• Es ist zu beachten, dass Sie vor dem Hinzufügen der Shake-Klasse zum Ausführen der Animation zuerst den Shake löschen müssen, da einige Nachrichten möglicherweise zuvor geschüttelt wurden, z. B. wenn mehrere Bomben-Emojis kontinuierlich gesendet werden. Beim späteren Hinzufügen der Shake-Klasse wurde setTimeout() verwendet, um eine Verzögerung von 700 Millisekunden zu erreichen. Der Zweck bestand darin, die Nachricht zu schütteln, wenn die Vollbildanimation bis zu einem gewissen Grad ausgeführt wurde.

Als nächstes schauen wir uns die Definition der Shake-Klasse an und fügen den folgenden Code zu style.css hinzu:

.schütteln {
  Animation: 0,8 s langes Schütteln, Ein- und Ausschalten;
}
@keyframes schütteln {
  aus {
    transformieren: übersetzen3d(0, 0px, 0px);
  }
  10% {
    transformieren: übersetzen3d(6px, -6px, 0px);
  }
  20% {
    transformieren: übersetzen3d(-5px, 5px, 0px);
  }
  30% {
    transformieren: übersetzen3d(4px, -4px, 0px);
  }
  35 % {
    transformieren: übersetzen3d(-3px, 3px, 0px);
  }
  39 % {
    transformieren: übersetzen3d(2px, -2px, 0px);
  }
  41% {
    transformieren: übersetzen3d(-1px, 1px, 0px);
  }
  42% {
    transformieren: verschiebe3d(0px, 0px, 0px) drehen(20 Grad);
  }
  52 % {
    transformieren: drehen (-15 Grad);
  }
  60 % {
    transformieren: drehen (8 Grad);
  }
  65 % {
    transformieren: drehen (-3 Grad);
  }
  67 %
    transformieren: drehen (1 Grad);
  }
  70 % {
    transformieren: drehen (0 Grad);
  }
  Zu {
    transformieren: übersetzen3d(0px, 0px, 0px) drehen(0);
  }
}

Die durch Shake-Keyframes definierte Animation wird in .shake verwendet, mit einer Ausführungszeit von 0,8 s und einer Animationsausführungsfunktion von Ease-In-Out. In den Keyframes sind zwar viele Codes enthalten, aber sie sind alle sehr einfach. Sie simulieren den Effekt einer Explosion und verschieben die Offsets der X- und Y-Achse. Jedes Mal, wenn die Offsetamplitude kleiner und schneller wird, können Sie sehen, dass die prozentualen Intervalle immer kleiner werden. Bei 42 % der Animation wurde eine Rotationsanimation hinzugefügt, um bei der Landung einen Vibrationseffekt zu erzeugen. Da sich die Rotationsachse bei der Verwendung von rotate() in der Mitte des Elements befindet, können wir die Achse der Nachrichtenblase verändern, um einen realistischeren Effekt zu erzielen:

.Nachricht p {
  Transform-Origin: links unten;
}
.Nachricht.Mine p {
  Transform-Origin: rechts unten;
}

Hier wird die Achse der von der anderen Partei gesendeten Nachricht in der unteren linken Ecke festgelegt, und die von Ihnen gesendete Nachricht wird in der unteren rechten Ecke festgelegt.

Zusammenfassen

Jetzt wurde die Funktion zur Simulation animierter WeChat 8.0-Emoticons realisiert. Die wichtigsten Punkte sind:

• Verwenden Sie die Lottie-Bibliothek, um Animationen zu laden und abzuspielen.
• Bestimmt die Position und das Timing von Vollbildanimationen.
• CSS-Implementierung einer Nachrichtenschüttelanimation.

Hast du es gelernt? Wenn ihr Fragen oder Anregungen habt, hinterlasst gerne einen Kommentar. Wenn euch der Artikel gefällt, dann gebt ihm bitte ein „Gefällt mir“ oder folgt mir. Später folgen noch weitere spannende Artikel. Vielen Dank!

Autor: Fenghua, Einführung: Front-End-Ingenieur, vermittelt Programmierkenntnisse auf intuitive und professionelle Weise. Bilibili UP@Fenghua Front-End-Ingenieur

Alle Adressen in diesem Artikel:

Beispieladresse: https://codechina.csdn.net/mirrors/zxuqian/html-css-examples

Codeadresse: https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect

lottie: https://cdnjs.com/libraries/bodymovin, laden Sie lottie.min.js herunter

Kürbis-Emoticon: https://lottiefiles.com/43215-pumpkins-sticker-4

Bomben-Emoticon: https://lottiefiles.com/3145-bomb

Explosionsanimation: https://lottiefiles.com/9990-explosion

Offizielle Lottie-Website: https://airbnb.io/lottie

Dies ist das Ende dieses Artikels darüber, wie Sie mit mehr als 300 Zeilen CSS-Code die explosiven Spezialeffekte von WeChat 8.0 erzielen. Weitere relevante Inhalte zu den explosiven Spezialeffekten von WeChat 8.0 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!