/** Tween.js
* t: current time（當前時間）；
* b: beginning value（初始值）；
* c: change in value（變化量）；
* d: duration（持續時間）。
* you can visit '緩動函數速查表' to get effect
*/ 
 
const Quad={
 easeIn: function(t, b, c, d) {
 return c * (t /=d) * t + b;
 },
 easeOut: function(t, b, c, d) {
 return -c *(t /=d)*(t-2) + b; 
 },
 easeInOut: function(t, b, c, d) {
 if ((t /=d / 2) < 1) return c / 2 * t * t + b;
 return -c / 2 * ((--t) * (t-2) - 1) + b;
 }
}
const Linear=function(t, b, c, d) { 
 return c * t / d + b; 
}

//粒子充滿粒子容器，需要容器存在尺寸以及relative定位
.Boom-Partical_Holder{
 position: absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;
}

import "partical_style.css";
 
class Partical{
 // dom為裝載動畫元素的容器 用于設置位置等樣式
 dom=null;
 // 動畫開始時間
 StartTime=-1;
 // 當前粒子的動畫方向，區別上拋運動與下拋運動
 direction="UP";
 // 動畫延遲
 delay=0;
 // 三方向位移值
 targetZ=0;
 targetY=0;
 targetX=0;
 // 縮放倍率
 scaleNum=1;
 // 是否正在執行動畫
 animating=false;
 // 粒子的父容器，標識此粒子被渲染到那個元素內
 parent=null;
 // 動畫結束的回調函數列表
 animEndCBList=[];
 // 粒子渲染的內容容器 slot
 con=null;
 
 constructor(){
 //創建動畫粒子dom
 this.dom=document.createElement("div");
 this.dom.classList.add("Boom-Partical_Holder");
 this.dom.innerHTML=`
 <div class="Boom-Partical_con">
 Boom
 </div>
 `;
 }
 
 // 在哪里渲染
 renderIn(parent) {
 // dom判斷此處省略
 parent.appendChild(this.dom);
 this.parent=parent;
 // 此處為初始化 slot 容器
 !this.con && ( this.con=this.dom.querySelector(".Boom-Partical_con"));
 }
 
 // 用于父容器移除當前粒子
 deleteEl(){
 // dom判斷此處省略
 this.parent.removeChild(this.dom);
 }
 
 // 執行動畫，需要此粒子執行動畫的角度，動畫的力度，以及延遲時間
 animate({ deg, pow, delay }={}){
 // 后續補全
 }
 
 // 動畫結束回調存儲
 onAnimationEnd(cb) {
 if (typeof cb !=='function') return;
 this.animEndCBList.push(cb);
 }
 
 // 動畫結束回調執行
 emitEndCB() {
 this.dom.style.cssText +=`;-webkit-transform:translate3d(0,0,0);opacity:1;`;
 this.animating=false;
 try {
 for (let cb of this.animEndCBList) {
 cb();
 }
 } catch (error) {
 console.warn("回調報錯:",cb);
 }
 }
 
 // 簡易實現slot功能，向粒子容器內添加元素
 insertChild(child){
 this.con.innerHTML='';
 this.con.appendChild(child);
 }
}

 const POWER=10; // 單位 vh 力的單位轉化比例
 const G=5; // 單位 vh 重力值
 const DEG=Math.PI / 180; 
 const Duration=.4e3; //假設動畫執行時長400毫秒

 // 執行動畫 角度 ， 力 1 ~ 10 ; 1=10vh
 animate({ deg, pow, delay }={}) {
 this.direction=deg > 180 ? "UP" : "DOWN";
 this.delay=delay || 0;
 let r=Math.random();
 this.targetZ=0;
 this.targetY=Math.round(pow * Math.sin(deg * DEG) * POWER);
 this.targetX=Math.round(pow * Math.cos(deg * DEG) * POWER) * (r + 1);
 this.scaleNum=(r * 0.8) * (r < 0.5 ? -1 : 1);
 this.raf();
 }

 raf(){
 // 正在執行動畫 
 this.animating=true;
 // 動畫開始時間
 this.StartTime=+new Date();
 let StartTime=this.StartTime;
 
 // 獲取延時
 let delay=this.delay;
 
 // 動畫會在延時后開始，也就是真正開始動畫的時間
 let StartTimeAfterDelay=StartTime + delay
 let animate=()=> {
 // 獲取從執行動畫開始經過了多久
 let timeGap=+new Date() - StartTimeAfterDelay;
 // 大于0 證明過了delay時間
 if (timeGap >=0) {
 // 大于Duration證明過了結束時間
 if (timeGap > Duration) {
 // 執行動畫結束回調
 this.emitEndCB();
 return;
 }
 // 設置應該設置的位置的樣式
 this.dom.style.cssText +=`;will-change:transform;-webkit-transform:translate3d(${this.moveX(timeGap)}vh,${this.moveY(timeGap)}vh,0) scale(${this.scale(timeGap)});opacity:${this.opacity(timeGap)};`;
 }
 requestAnimationFrame(animate);
 }
 animate();
 }

 // 水平方向為勻速，所以使用Linear
 moveX(currentDuration) {
 // 此處 * 2 是效果矯正后的處理，可根據自己的需求修改水平位移速度
 return Linear(currentDuration, 0, this.targetX, Duration) * 2;
 }
 
 // 縮放 使用了easeOut曲線， 可根據需求自行修改
 scale(currentDuration) {
 return Quad.easeOut(currentDuration, 1, this.scaleNum, Duration);
 }
 
 // 透明度 使用了easeIn速度曲線，保證后消失
 opacity(currentDuration) {
 return Quad.easeIn(currentDuration, 1, -1, Duration);
 }
 
 // 豎直方向上位移計算
 moveY(currentDuration) {
 let direction=this.direction;
 if (direction==='UP') {
 // G用于模擬上拋過程的重力
 // 如果是上拋運動
 if (currentDuration < Duration / 2) {
 // 上拋過程 我們使用easeOut速度逐漸減小，我們讓動畫在一半時移到最高點
 return Quad.easeOut(currentDuration, 0, this.targetY + G, Duration / 2);
 }
 // 上拋的下降過程，從最高點下降
 return this.targetY + G - Quad.easeIn(currentDuration - Duration / 2, 0, this.targetY / 2, Duration / 2);
 }
 // 下拋運動直接easeIn
 return Quad.easeIn(currentDuration, 0, this.targetY, Duration);
 }

 export default Partical; 

 import Partical from "partical.js";
 class Boom{
 // 實例化的粒子列表
 particalList=[];
 // 單次生成的粒子個數
 particalNumbers=6;
 // 執行動畫的間隔時間
 boomTimeGap=.1e3;
 boomTimer=0;
 // 用戶插入粒子的slot 的內容
 childList=[];
 // 默認旋轉角度
 rotate=120;
 // 默認的粒子發散范圍
 spread=180;
 // 默認隨機延遲范圍
 delayRange=100;
 // 默認力度
 power=3;
 // 此次執行粒子爆炸的是那個容器
 con=null;
 
 constructor({ childList , container , boomNumber , rotate , spread , delayRange , power}={}){
 
 this.childList=childList || [];
 this.con=container || null;
 this.particalNumbers=boomNumber || 6;
 this.rotate=rotate || 120;
 this.spread=spread || 180;
 this.delayRange=delayRange || 100;
 this.power=power || 3;
 this.createParticals(this.particalNumbers);
 }
 setContainer(con){
 this.con=con;
 }
 // 創建粒子 存入內存數組中
 createParticals(num){
 for(let i=0 ; i < num ; i++){
 let partical=new Partical();
 partical.onAnimationEnd(()=>{
 partical.deleteEl();
 });
 this.particalList.push(partical)
 }
 }
 // 執行動畫
 boom(){
 // 限制動畫執行間隔
 let lastBoomTimer=this.boomTimer;
 let now=+new Date();
 if(now - lastBoomTimer < this.boomTimeGap){
 // console.warn("點的太快了");
 return;
 }
 this.boomTimer=now;
 
 
 console.warn("粒子總數:" , this.particalList.length)
 let boomNums=0;
 // 在內存列表找，查找沒有執行動畫的粒子
 let unAnimateList=this.particalList.filter(partical=> partical.animating==false);
 
 let childList=this.childList;
 let childListLength=childList.length;
 
 let rotate=this.rotate;
 let spread=this.spread;
 let delayRange=this.delayRange;
 let power=this.power;
 
 // 每有一個未執行動畫的粒子，執行一次動畫
 for(let partical of unAnimateList){
 if(boomNums >=this.particalNumbers) return ;
 
 boomNums++;
 let r=Math.random();
 // 設置粒子父容器
 partical.renderIn(this.con);
 // 隨機選擇粒子的slot內容
 partical.insertChild(childList[Math.floor(r * childListLength)].cloneNode(true));
 // 執行動畫，在輸入范圍內隨機角度、力度、延遲
 partical.animate({
 deg: (r * spread + rotate) % 360,
 pow: r * power + 1,
 delay: r * delayRange,
 });
 }
 // 如果粒子樹木不夠，則再次創建，防止下次不夠用
 if(boomNums < this.particalNumbers){
 this.createParticals(this.particalNumbers - boomNums);
 }
 }
 }
 
 
 export default Boom;

 let boomChildList=[];
 
 
 for(let i=0 ; i < 10; i++){
 let tempDom=document.createElement("div");
 tempDom.className="demoDom";
 tempDom.innerHTML=i;
 boomChildList.push(tempDom);
 }
 
 let boom=new Boom({
 childList: boomChildList,
 boomNumber: 6,
 rotate: 0,
 spread: 360,
 delayRange: 100,
 power: 3,
 });

信 8.0 更新的一大特色就是支持動畫表情，如果發送的消息只有一個內置的表情圖標，這個表情會有一段簡單的動畫，一些特殊的表情還有全屏特效，例如煙花表情有全屏放煙花的特效，炸彈表情有爆炸動畫并且消息和頭像也會隨之震動。

本著前端工程師的職業精神，我就想看看能不能實現一個類似的特效。折騰許久之后，做出來的效果如下：

項目的核心是使用到了 lottie 動畫庫。lottie 是 Airbnb 出品的、全平臺（Web、Android、IOS、React Native）的動畫庫，它的特點在于能夠直接播放使用 Adobe After Effects 制作的動畫。設計師在 After Effects 中，利用 Bodymovin 插件把動畫導出為 JSON 格式之后，開發者就能夠通過相應平臺的 SDK 進行播放。（項目地址及示例演示見文末）

在做完這個項目之后我感覺到自己的前端儲備又豐富了一層，在以后應對復雜特效時又有了新的思路，如果你也想進一步提升前端開發技能，可以跟著這篇文章實踐一下。本篇文章除了使用 Lottie 庫之外，全部都是使用原生 HTML/CSS/JavaScript 實現的，這樣無論你是 React、Vue 還是其它工程師，都可以快速掌握。

編寫界面

本來想跳過 HTML/CSS 部分，但是想到 CSS 可能是大部分人的弱項，所以我決定還是把實現界面的思路寫一下，想看核心部分的可以直接跳到：二、發送普通消息部分。

1. HTML 部分

首先看 HTML 部分，從效果圖來看：

上邊有一個標題欄，顯示與 XXX 聊天。

中間是聊天信息面板，包含著雙方發送的消息，每條消息由發送者頭像和消息內容組成，我發送的在右側，對方發送的在左側。

下方是底部信息，有表情選擇按鈕、編輯消息文本框和發送按鈕。

那么根據這個結構編寫的 HTML 代碼如下所示：

<main>
  <div class="chat">
    <div class="titleBar">與 XXX 聊天</div>
    <div class="panel">
      <div class="message mine">
        <img src="./me.png" alt="" />
        <p><span>你好</span></p>
      </div>
      <div class="message yours">
        <img class="avatar" src="./you.png" alt="" />
        <p><span>Hi</span></p>
      </div>
      <!-- 省略其它消息 -->
    </div>
    <footer>
      <button class="chooseSticker">
        <img src="./emoji.svg" alt="" />
        <div class="stickers"></div>
      </button>
      <input
             class="messageInput"
             type="text"
             name=""
             id=""
             placeholder="請輸入聊天信息"
             />
      <button class="send">發送</button>
    </footer>
  </div>
</main>

各個元素所對應的界面部分為：

<main /> 元素是一個整體的容器，用于把聊天窗口居中對齊

<div class="chat"> 是聊天應用的容器，用于布局標題欄、聊天面板和底部發送框。

<div class="titleBar"> 用于顯示標題欄。

<div class="panel"> 是消息面板，用于布局其中的消息。

<div class="message"> 為消息容器，使用不同的 class 來區分發送方， mine 代表我發送的， yours 代表對方發送的。每條消息里邊使用 <img class="avatar" > 來展示頭像，使用 <p> 元素來顯示文本， <p> 元素里邊的 <span> 元素將會作為 lottie 的容器來播放表情動畫。

<footer> 用于布局底部操作按鈕和消息發送框。其中：

<button class="chooseSticker"> 是表情選擇按鈕，使用一個笑臉 svg 圖片表示，里邊的 <div class="stickers"> 是表情選擇框彈出層，里邊的表情將在 JS 中動態加載，目的是為了實現動畫預覽。

<input class="messageInput" /> 是聊天消息輸入框，沒什么特別的。

<button class="send"> 是發送按鈕

這個是 HTML 的基本結構，接下來看一下 CSS 樣式。

2. CSS 部分

在項目根目錄下創建一個 style.css 文件并在 index.html 的<head> 標簽中引入：

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

2.1 全局樣式

首先定義一些 CSS 變量，CSS 變量是為了方便我們引用同一屬性值的，后邊如果更新樣式時，可以避免多次修改：

:root {
  --primary-color: 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);
}

這些變量的含義分別是：

--primary-color: 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) ，小陰影，例如輸入框和表情選擇彈出層。

接下來是一些重置樣式：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

這些樣式對所有元素都有效，設置盒子模型為 border-box ，這樣內邊距、邊框都算在寬高之內，設置內間距和外間距為 0，最后設置默認字體。

2.2 Main 容器

Main 容器用于定位聊天應用容器到瀏覽器中間，使用 grid 布局，寬高分別設置為瀏覽器可視區域的 100%，并把背景色設置為黑灰色：

main {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  background-color: hsl(0, 0%, 10%);
}

2.3 聊天應用容器

聊天應用容器設置了固定寬高，模擬手機屏幕，并使用 grid 布局來控制標題欄、聊天面板和底部操作欄的位置：

.chat {
  width: 375px;
  height: 700px;
  background: hsl(0, 0%, 100%);
  border-radius: 8px;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
}

這里使用了 grid-template-rows 把聊天應用分成了 3 行，第一行的標題欄和最后一行的標底部操作欄的高度分別為內容的最大高度，中間的聊天面板則是浮動高度。

2.4 標題欄

標題欄簡單的設置了一個內間距、文字居中方式和陰影：

.titleBar {
  padding: 24px 0;
  text-align: center;
  box-shadow: var(--shadow-large);
}

界面優化提示：內間距用來增加留白，在視覺上引起放松，陰影則為了和下邊的聊天面板區分開

2.5 聊天面板

聊天面板使用 flex 布局對其中的消息進行排列，并設置方向為按列排布，然后設置 overflow 為 auto，在消息整體高度超出面板高度時，出現滾動條：

.panel {
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  overflow: auto;
}

界面優化提示：這里的 padding 同樣是為了留出足夠多的空白，來與其它元素隔開一段距離，以避免擁擠感。

2.6 消息

消息分為消息容器、頭像和消息體 3 個部分。其中消息體和頭像包含在消息容器中，先來看消息容器的樣式。消息容器使用 flex 布局來把消息體和頭像放在一行，寬度最大為面板寬度的 80%，并設置字體和外邊距：

.message {
  display: flex;
  max-width: 80%;
  font-size: 14px;
  margin: 8px 0;
  position: relative;
}

這里的 position 設置為 relative 是為了定位后邊的全屏特效動畫。

頭像簡單設置了寬高、圓角和距離消息體的間距：

.message img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-right: 12px;
}

界面優化提示：這里不得不再提一下間距的重要性，一定不要把各個元素安排的太過緊湊，否則十分影響視覺效果，最直接的影響就是引起視覺上的擁擠感，造成視覺疲勞。

消息體同樣的設置了間距和圓角，這里的圓角和頭像的保持一致，以增加和諧感。它還設置了陰影，并使用 flex 布局，把里邊的文字或表情消息居中對齊：

.message p {
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow-large);
  display: flex;
  align-items: center;
}

這些樣式默認都是基于對方的消息的，如果是我發送的消息需要放到右邊，并作一些調整。首先對于我發送的消息，把 flex-flow 改為 row-reverse 這樣頭像和消息體的位置就互換了，然后使用 align-self 對齊到面板的右邊：

.message.mine {
  flex-flow: row-reverse;
  align-self: flex-end;
}

調整頭像的外邊距，現在應該是距離左邊的消息體的邊距了：

.message.mine img {
  margin-right: 0;
  margin-left: 12px;
}

設置消息體的背景色為藍色，文字為白色：

.message.mine p {
  background-color: var(--primary-color);
  color: white;
}

2.7 底部操作欄

先看底部操作欄容器的整體布局，使用 grid 布局把表情選擇按鈕、消息發送框和發送按鈕分成 3 列，其中除消息發送框為浮動寬度外，其它的兩個按鈕為固定寬度，默認居中對齊，最后設置陰影和間距：

footer {
  display: grid;
  grid-template-columns: 48px 1fr 75px;
  justify-items: center;
  padding: 12px;
  box-shadow: var(--shadow-large);
}

表情選擇按鈕把自己進行了靠左對齊，并設置相對定位，用于定位表情選擇彈出層，然后設置按鈕圖標的大小：

.chooseSticker {
  justify-self: start;
  position: relative;
}
.chooseSticker img {
  width: 36px;
  height: 36px;
}

表情選擇彈出層的 CSS 代碼比較多但都很簡單，先看一下代碼：

.stickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, 24px);
  column-gap: 18px;

  border-radius: 8px;
  background-color: white;
  box-shadow: var(--shadow-medium);
  padding: 6px 12px;
  font-size: 24px;

  position: absolute;
  top: calc(-100% - 18px);
  width: 300px;
  opacity: 0;
}

這段代碼的含義是：

彈出層使用 grid 布局，repeat(auto-fill, 24px) 指的是在寬度允許的條件下，在一行中盡可能放置最多的列元素，每列的寬度固定為 24px。然后設置列間距為 18px。

設置圓角、背景色、陰影、內間距和字體大小。

定位設置為絕對定位，把它向上移動包含元素高度（也就是 .chooseSticker 的高度）的 100% 并減去 18px，調整到合適的位置。寬度設置為 300px，透明度設置為 0 把它隱藏。

消息輸入框和按鈕的樣式比較簡單，消息輸入框的寬度占滿整列，發送按鈕使用 justify-self: end 把自己進行靠右對齊。這里把代碼一次性貼出來：

.messageInput {
  box-shadow: var(--shadow-medium);
  padding: 0px 12px;
  border-radius: 8px;
  width: 100%;
}
.send {
  height: 100%;
  width: 90%;
  border-radius: 8px;
  justify-self: end;
  color: white;
  background-color: var(--inverse-color);
}

最后再添加一個 .show 樣式，用于在點擊發送表情按鈕時，給表情彈出層添加該樣式以顯示出來：

.show {
  opacity: 1;
}

3. JS 部分

在給聊天界面加上功能之前，先編寫一些基礎的 JS 代碼。在項目根目錄創建一個 index.js 文件，并在 index.html 中引用，注意放到 </body> 關閉標簽的上方，這樣當 HTML DOM 加載完成之后才會執行 js 中的代碼，防止找不到元素：

<body>
   <!-- 其它代碼省略 -->
   <script src="index.js"></script>
 </body>

在 index.js 中，先獲取要操作的 DOM 元素：

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");

其中：

panelEle 是消息面板元素，用于追加新消息。

chooseStickerBtn 是選擇表情按鈕，點擊它會彈出表情選擇框。

stickersEle 就是彈出的表情選擇框。

msgInputEle 是消息輸入框。

sendBtn 為發送按鈕。

然后引入 Lottie 的 js 庫，可以到示例代碼倉庫中下載，也可以在 https://cdnjs.com/libraries/bodymovin 中下載 lottie.min.js，下載完成之后放到項目根目錄，然后在 index.html 中，在引入 index.js 的上方引入它：

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

下載表情動畫資源文件，它們都是 json 格式的文件，下載完成之后直接放到項目根目錄即可：

南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4

炸彈表情：https://lottiefiles.com/3145-bomb

爆炸動畫：https://lottiefiles.com/9990-explosion

接下來看一下各部分功能是怎么實現的。

發送普通消息

發送普通消息時，用戶在輸入框輸入完消息之后，點擊發送，就會把該條消息追加到消息列表中，并清空輸入框中的內容。那么這里先給發送按鈕添加點擊事件：

sendBtn.addEventListener("click", ()=> {
  const msg=msgInputEle.value;
  if (msg) {
    appendMsg(msg);
  }
});

在事件處理函數中：

判斷用戶是否輸入了消息。

如果輸入了就追加到消息列表中。

來看一下 appendMsg() 函數的代碼：

function appendMsg(msg, type) {
  // 創建消息元素
  const msgEle=panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // 設置為“我“發送的樣式
  msgEle.innerHTML=`
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // 滾動到最新消息
  panelEle.scrollTop=panelEle.scrollHeight;
  msgInputEle.value="";
}

函數接收兩個參數，msg 和 type，分別是要追加的消息內容和類型，type 為可選的，不傳則認為是普通文本消息，如果傳遞了 "stickers" 則為表情消息，現在還用不到它。在這個函數中主要做了下面幾件事情：

按照消息的 HTML 結構創建一個新的消息元素 msgEle，并追加到消息列表中。

把消息的樣式設置為我發送的。

內部的元素分別為頭像和文本消息，使用模板字符串的形式賦值給 msgEle 的 innerHTML 屬性中，并在 <p> 中使用 msg 變量的值。

最后把滾動條滾動到最新的消息處，并清空輸入框中的消息。

這樣就可以發送普通的文本消息了。

發送動畫表情

在發送動畫表情之前，需要先加載動畫表情。在 index.js 的最上方先定義表情名稱和表情動畫文件路徑的鍵值對信息：

const stickers={
  bomb: {
    path: "./3145-bomb.json",
  },
  pumpkin: {
    path: "./43215-pumpkins-sticker-4.json",
  },
};

我們會根據 bomb 、 pumkin 這樣的 key 來找到對應的動畫路徑。接著初始化彈出層中的表情以供用戶選擇：

// 初始化表情面板，也可以在表情選擇窗彈出時再初始化
Object.keys(stickers).forEach((key)=> {
  const lottieEle=stickersEle.appendChild(document.createElement("span"));
  // 對每個表情創建 lottie 播放器
  const player=lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: stickers[key].path,
  });
  // 當選擇表情時，發送消息，并設置類型為 sticker 表情消息
  lottieEle.addEventListener("click", ()=> {
    appendMsg(key, "sticker");
  });
  // 當鼠標劃過時，播放動畫預覽
  lottieEle.addEventListener("mouseover", ()=> {
    player.play();
  });
  // 當鼠標劃過時，停止動畫預覽
  lottieEle.addEventListener("mouseleave", ()=> {
    player.stop();
  });
});

這里的代碼分別作了下邊這些操作：

遍歷存儲表情信息的對象。

創建一個 lottie 的容器，使用 span 元素，因為 lottie 動畫的播放器需要掛載到一個具體的 html 元素中。

調用 lottie 的 loadAnimation() 加載動畫，它需要傳遞這樣幾個參數：

container: 播放器要掛載到的容器。

renderer：可以選擇是使用 svg 還是 canvas 渲染動畫。

loop: 是否循環播放，由于此處是在表情選擇彈出層中預覽動畫，所以支持循環播放。

autoplay：是否自動播放，這里設置為了否，后邊讓它在鼠標劃過時再播放動畫。

path：動畫 json 文件路徑，直接從對象中獲取。

loadAnimation() 會返回 lottie 的實例，把它保存在 player 中。

然后后邊則注冊了幾個事件：

當 lottieEle 也就是表情被點擊時，發送表情消息，給 appendMsg() 的 msg 參數設置為表情的 key，type 參數設置為 "sticker"。

當鼠標劃過表情時，開始播放動畫。

當鼠標劃出表情時，停止動畫。

接著給發送表情按鈕添加事件，點擊時，切換表情彈出層的顯示狀態：

chooseStickerBtn.addEventListener("click", ()=> {
  stickersEle.classList.toggle("show");
});

這時點擊發送表情按鈕就可以看到表情選擇彈出層了。現在還不能發送表情，因為還沒在 appendMsg() 函數中處理，現在來修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <p> 元素里添加任何信息：

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

然后在它的下方，調用 playSticker() 函數來播放動畫：

// 處理表情消息，播放相關動畫
if (type==="sticker") {
  playSticker(msg, msgEle);
}

playSticker() 函數接收兩個參數，一個是表情的 key，一個是消息元素。此時的 msg 變量的內容就是在 lottieEle 點擊事件中傳遞過來的表情 key。函數中的代碼如下：

function playSticker(key, msgEle) {
  // 表情消息，創建 lottie 動畫
  const lottieEle=msgEle.querySelector("span");
  lottieEle.style.width="40px";
  lottieEle.style.height="40px";
  lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: stickers[key].path,
  });
}

在這個函數里主要做了下邊幾項操作：

獲取消息中的 span 元素，它將作為 lottie 的動畫容器。

設置表情動畫的寬高為 40px。

使用 lottie 加載動畫，并設置循環播放為 false，自動播放為 true，來讓表情發送時自動播放動畫，且只播放一次。

現在可以發送表情消息了，相關的動畫也會自動播放，接下來看一下怎么實現炸彈的全屏動畫和對消息元素的晃動效果。

發送帶全屏特效的表情

對于這種帶全屏特效的表情可以單獨進行判斷，也可以在保存表情的對象中定義相關的操作，這里為了簡單起見，我們單獨判斷用戶是否發送了炸彈表情，然后施加相應特效。

首先在 appendMsg() 函數里，進行判斷，如果發送的消息是表情消息，且表情為炸彈，則播放全屏動畫并晃動消息：

function appendMsg(msg, type) {
  if (type==="sticker") {
    playSticker(msg, msgEle);
    if (msg==="bomb") {
      // 播放爆炸動畫
      setTimeout(()=> {
        playExplosion(msgEle);
      }, 800);
      // 晃動消息列表
      shakeMessages();
    }
  }
}

這里爆炸全屏動畫延遲了 800 毫秒之后再執行，目的是在炸彈表情播放到合適的時間時，再播放全屏動畫，播放動畫使用了 playExplosion() 函數，并傳遞了消息元素進去。在爆炸全屏動畫結束之后，調用 shakeMessages() 來晃動消息。這里先看一下 playExplosion() 函數的代碼：

function playExplosion(anchor) {
  const explosionAnimeEle=anchor.appendChild(document.createElement("div"));
  explosionAnimeEle.style.position="absolute";
  explosionAnimeEle.style.width="200px";
  explosionAnimeEle.style.height="100px";
  explosionAnimeEle.style.right=0;
  explosionAnimeEle.style.bottom=0;
  const explosionPlayer=lottie.loadAnimation({
    container: explosionAnimeEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "./9990-explosion.json",
  });
  explosionPlayer.setSpeed(0.3);
  // 播放完成后，銷毀爆炸相關的動畫和元素
  explosionPlayer.addEventListener("complete", ()=> {
    explosionPlayer.destroy();
    explosionAnimeEle.remove();
  });
}

playExplosion() 函數接收一個 anchor 錨點，就是說基于哪個位置開始播放全屏動畫，由于示例中的動畫畫幅比較小，所以把它固定在了最新發送的消息的下方，這里爆炸動畫的 anchor 就是消息元素，之后函數做了下邊的這些操作：

添加全屏動畫元素，設置為絕對定位，寬度 200px，高度 100px，放在最新消息元素的右下角。

加載 lottie 動畫，不循環、自動播放。

由于原動畫速度過快，這里調用 lottie 實例的 setSpeed() 方法，把速度設置為 0.3 倍速。

之后給 lottie 實例設置事件監聽："complete"，它會在動畫執行完成時觸發，里邊銷毀了 lottie 實例和全屏動畫元素。

這樣全屏動畫的效果就實現了。接下來看消息晃動的代碼：

function shakeMessages() {
  [...panelEle.children]
    .reverse()
    .slice(0, 5)
    .forEach((messageEle)=> {
      const avatarEle=messageEle.querySelector("img");
      const msgContentEle=messageEle.querySelector("p");
      avatarEle.classList.remove("shake");
      msgContentEle.classList.remove("shake");
      setTimeout(()=> {
        avatarEle.classList.add("shake");
        msgContentEle.classList.add("shake");
      }, 700);
    });
}

這個函數的操作是：

使用 reverse() 和 slice() 對最新的 5 條消息進行晃動，也可以把 5 改大一點，對更多消息進行晃動。

然后在循環中，分別給頭像和消息添加 shake class 執行晃動動畫，這個 class 的內容稍后再介紹。

要注意的是，在添加 shake class執行動畫前，需要先刪除 shake，因為有的消息可能在之前已經晃動過了，例如當連續發了多個炸彈表情時。后邊在添加 shake class 時，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動畫執行到一定程度時再晃動消息。

接下來看一下 shake class 的定義，在 style.css 中添加下方代碼：

.shake {
  animation: shake 0.8s ease-in-out;
}
@keyframes shake {
  from {
    transform: translate3d(0, 0px, 0px);
  }
  10% {
    transform: translate3d(6px, -6px, 0px);
  }
  20% {
    transform: translate3d(-5px, 5px, 0px);
  }
  30% {
    transform: translate3d(4px, -4px, 0px);
  }
  35% {
    transform: translate3d(-3px, 3px, 0px);
  }
  39% {
    transform: translate3d(2px, -2px, 0px);
  }
  41% {
    transform: translate3d(-1px, 1px, 0px);
  }
  42% {
    transform: translate3d(0px, 0px, 0px) rotate(20deg);
  }
  52% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(8deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  67% {
    transform: rotate(1deg);
  }
  70% {
    transform: rotate(0deg);
  }
  to {
    transform: translate3d(0px, 0px, 0px) rotate(0);
  }
}

.shake 中使用了 shake keyframes 定義的動畫，執行時間為 0.8s，動畫執行函數為 ease-in-out。Keyframes 里的代碼比較多，但是都是很簡單的，就是模擬了爆炸時的效果，移動 x 軸和 y 軸的偏移，每次的偏移幅度越來越小，并且越來越快，可以看到百分比的間隔越來越小。在動畫進行到 42% 的時候，加了一些旋轉動畫，這樣就有了落地時的震動效果。由于使用 rotate() 旋轉時的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來實現更真實的效果：

.message p {
  transform-origin: left bottom;
}
.message.mine p {
  transform-origin: right bottom;
}

這里把對方發送的消息的軸心設置在左下角，自己發送的消息則設置在了右下角。

總結

現在，這個模擬微信 8.0 動畫表情的功能就實現了。主要就是下邊幾點：

使用 lottie 庫加載并播放動畫。

確定全屏動畫的位置和播放時機。

消息晃動動畫的 CSS 實現。