微信 8.0 更新的一大特色就是支持動(dòng)畫表情，如果發(fā)送的消息只有一個(gè)內(nèi)置的表情圖標(biāo)，這個(gè)表情會(huì)有一段簡(jiǎn)單的動(dòng)畫，一些特殊的表情還有全屏特效，例如煙花表情有全屏放煙花的特效，炸彈表情有爆炸動(dòng)畫并且消息和頭像也會(huì)隨之震動(dòng)。
本著前端工程師的職業(yè)精神，我就想看看能不能實(shí)現(xiàn)一個(gè)類似的特效。折騰許久之后，做出來的效果如下：
項(xiàng)目的核心是使用到了 lottie 動(dòng)畫庫。lottie 是 Airbnb 出品的、全平臺(tái)（Web、Android、IOS、React Native）的動(dòng)畫庫，它的特點(diǎn)在于能夠直接播放使用 Adobe After Effects 制作的動(dòng)畫。設(shè)計(jì)師在 After Effects 中，利用 Bodymovin 插件把動(dòng)畫導(dǎo)出為 JSON 格式之后，開發(fā)者就能夠通過相應(yīng)平臺(tái)的 SDK 進(jìn)行播放。（項(xiàng)目地址及示例演示見文末）
在做完這個(gè)項(xiàng)目之后我感覺到自己的前端儲(chǔ)備又豐富了一層，在以后應(yīng)對(duì)復(fù)雜特效時(shí)又有了新的思路，如果你也想進(jìn)一步提升前端開發(fā)技能，可以跟著這篇文章實(shí)踐一下。本篇文章除了使用 Lottie 庫之外，全部都是使用原生 HTML/CSS/JavaScript 實(shí)現(xiàn)的，這樣無論你是 React、Vue 還是其它工程師，都可以快速掌握。
編寫界面
本來想跳過 HTML/CSS 部分，但是想到 CSS 可能是大部分人的弱項(xiàng)，所以我決定還是把實(shí)現(xiàn)界面的思路寫一下，想看核心部分的可以直接跳到：二、發(fā)送普通消息部分。
1. HTML 部分
首先看 HTML 部分，從效果圖來看：
- 上邊有一個(gè)標(biāo)題欄，顯示與 XXX 聊天。
- 中間是聊天信息面板，包含著雙方發(fā)送的消息，每條消息由發(fā)送者頭像和消息內(nèi)容組成，我發(fā)送的在右側(cè)，對(duì)方發(fā)送的在左側(cè)。
- 下方是底部信息，有表情選擇按鈕、編輯消息文本框和發(fā)送按鈕。
那么根據(jù)這個(gè)結(jié)構(gòu)編寫的 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="請(qǐng)輸入聊天信息"
/>
<button class="send">發(fā)送</button>
</footer>
</div>
</main>
各個(gè)元素所對(duì)應(yīng)的界面部分為：
<main /> 元素是一個(gè)整體的容器，用于把聊天窗口居中對(duì)齊<div class="chat"> 是聊天應(yīng)用的容器，用于布局標(biāo)題欄、聊天面板和底部發(fā)送框。<div class="titleBar"> 用于顯示標(biāo)題欄。<div class="panel"> 是消息面板，用于布局其中的消息。<div class="message"> 為消息容器，使用不同的 class 來區(qū)分發(fā)送方， mine 代表我發(fā)送的， yours 代表對(duì)方發(fā)送的。每條消息里邊使用 <img class="avatar" > 來展示頭像，使用 <p> 元素來顯示文本， <p> 元素里邊的 <span> 元素將會(huì)作為 lottie 的容器來播放表情動(dòng)畫。<footer> 用于布局底部操作按鈕和消息發(fā)送框。其中：<button class="chooseSticker"> 是表情選擇按鈕，使用一個(gè)笑臉 svg 圖片表示，里邊的 <div class="stickers"> 是表情選擇框彈出層，里邊的表情將在 JS 中動(dòng)態(tài)加載，目的是為了實(shí)現(xiàn)動(dòng)畫預(yù)覽。<input class="messageInput" /> 是聊天消息輸入框，沒什么特別的。<button class="send"> 是發(fā)送按鈕
這個(gè)是 HTML 的基本結(jié)構(gòu)，接下來看一下 CSS 樣式。
2. CSS 部分
在項(xiàng)目根目錄下創(chuàng)建一個(gè) style.css 文件并在 index.html 的<head> 標(biāo)簽中引入：
<link rel="stylesheet" href="style.css" />
2.1 全局樣式
首先定義一些 CSS 變量，CSS 變量是為了方便我們引用同一屬性值的，后邊如果更新樣式時(shí)，可以避免多次修改：
: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%) ，主色調(diào)，例如我發(fā)送的消息的藍(lán)色背景。--inverse-color: hsl(310, 90%, 60%) ，反色調(diào)，或強(qiáng)調(diào)色調(diào)，與主色調(diào)形成鮮明對(duì)比，例如發(fā)送按鈕的背景色。--shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2) ，大陰影，例如標(biāo)題欄、底部欄的陰影。--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;
}
這些樣式對(duì)所有元素都有效，設(shè)置盒子模型為 border-box ，這樣內(nèi)邊距、邊框都算在寬高之內(nèi)，設(shè)置內(nèi)間距和外間距為 0，最后設(shè)置默認(rèn)字體。
2.2 Main 容器
Main 容器用于定位聊天應(yīng)用容器到瀏覽器中間，使用 grid 布局，寬高分別設(shè)置為瀏覽器可視區(qū)域的 100%，并把背景色設(shè)置為黑灰色：
main {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
background-color: hsl(0, 0%, 10%);
}
2.3 聊天應(yīng)用容器
聊天應(yīng)用容器設(shè)置了固定寬高，模擬手機(jī)屏幕，并使用 grid 布局來控制標(biāo)題欄、聊天面板和底部操作欄的位置：
.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 把聊天應(yīng)用分成了 3 行，第一行的標(biāo)題欄和最后一行的標(biāo)底部操作欄的高度分別為內(nèi)容的最大高度，中間的聊天面板則是浮動(dòng)高度。
2.4 標(biāo)題欄
標(biāo)題欄簡(jiǎn)單的設(shè)置了一個(gè)內(nèi)間距、文字居中方式和陰影：
.titleBar {
padding: 24px 0;
text-align: center;
box-shadow: var(--shadow-large);
}
界面優(yōu)化提示：內(nèi)間距用來增加留白，在視覺上引起放松，陰影則為了和下邊的聊天面板區(qū)分開
2.5 聊天面板
聊天面板使用 flex 布局對(duì)其中的消息進(jìn)行排列，并設(shè)置方向?yàn)榘戳信挪?，然后設(shè)置 overflow 為 auto，在消息整體高度超出面板高度時(shí)，出現(xiàn)滾動(dòng)條：
.panel {
display: flex;
flex-direction: column;
padding: 24px 12px;
overflow: auto;
}
界面優(yōu)化提示：這里的 padding 同樣是為了留出足夠多的空白，來與其它元素隔開一段距離，以避免擁擠感。
2.6 消息
消息分為消息容器、頭像和消息體 3 個(gè)部分。其中消息體和頭像包含在消息容器中，先來看消息容器的樣式。消息容器使用 flex 布局來把消息體和頭像放在一行，寬度最大為面板寬度的 80%，并設(shè)置字體和外邊距：
.message {
display: flex;
max-width: 80%;
font-size: 14px;
margin: 8px 0;
position: relative;
}
這里的 position 設(shè)置為 relative 是為了定位后邊的全屏特效動(dòng)畫。
頭像簡(jiǎn)單設(shè)置了寬高、圓角和距離消息體的間距：
.message img {
width: 40px;
height: 40px;
border-radius: 12px;
margin-right: 12px;
}
界面優(yōu)化提示：這里不得不再提一下間距的重要性，一定不要把各個(gè)元素安排的太過緊湊，否則十分影響視覺效果，最直接的影響就是引起視覺上的擁擠感，造成視覺疲勞。
消息體同樣的設(shè)置了間距和圓角，這里的圓角和頭像的保持一致，以增加和諧感。它還設(shè)置了陰影，并使用 flex 布局，把里邊的文字或表情消息居中對(duì)齊：
.message p {
padding: 8px 12px;
border-radius: 12px;
box-shadow: var(--shadow-large);
display: flex;
align-items: center;
}
這些樣式默認(rèn)都是基于對(duì)方的消息的，如果是我發(fā)送的消息需要放到右邊，并作一些調(diào)整。首先對(duì)于我發(fā)送的消息，把 flex-flow 改為 row-reverse 這樣頭像和消息體的位置就互換了，然后使用 align-self 對(duì)齊到面板的右邊：
.message.mine {
flex-flow: row-reverse;
align-self: flex-end;
}
調(diào)整頭像的外邊距，現(xiàn)在應(yīng)該是距離左邊的消息體的邊距了：
.message.mine img {
margin-right: 0;
margin-left: 12px;
}
設(shè)置消息體的背景色為藍(lán)色，文字為白色：
.message.mine p {
background-color: var(--primary-color);
color: white;
}
2.7 底部操作欄
先看底部操作欄容器的整體布局，使用 grid 布局把表情選擇按鈕、消息發(fā)送框和發(fā)送按鈕分成 3 列，其中除消息發(fā)送框?yàn)楦?dòng)寬度外，其它的兩個(gè)按鈕為固定寬度，默認(rèn)居中對(duì)齊，最后設(shè)置陰影和間距：
footer {
display: grid;
grid-template-columns: 48px 1fr 75px;
justify-items: center;
padding: 12px;
box-shadow: var(--shadow-large);
}
表情選擇按鈕把自己進(jìn)行了靠左對(duì)齊，并設(shè)置相對(duì)定位，用于定位表情選擇彈出層，然后設(shè)置按鈕圖標(biāo)的大?。?/p>
.chooseSticker {
justify-self: start;
position: relative;
}
.chooseSticker img {
width: 36px;
height: 36px;
}
表情選擇彈出層的 CSS 代碼比較多但都很簡(jiǎn)單，先看一下代碼：
.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。然后設(shè)置列間距為 18px。
- 設(shè)置圓角、背景色、陰影、內(nèi)間距和字體大小。
- 定位設(shè)置為絕對(duì)定位，把它向上移動(dòng)包含元素高度（也就是 .chooseSticker 的高度）的 100% 并減去 18px，調(diào)整到合適的位置。寬度設(shè)置為 300px，透明度設(shè)置為 0 把它隱藏。
消息輸入框和按鈕的樣式比較簡(jiǎn)單，消息輸入框的寬度占滿整列，發(fā)送按鈕使用 justify-self: end 把自己進(jìn)行靠右對(duì)齊。這里把代碼一次性貼出來：
.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);
}
最后再添加一個(gè) .show 樣式，用于在點(diǎn)擊發(fā)送表情按鈕時(shí)，給表情彈出層添加該樣式以顯示出來：
3. JS 部分
在給聊天界面加上功能之前，先編寫一些基礎(chǔ)的 JS 代碼。在項(xiàng)目根目錄創(chuàng)建一個(gè) index.js 文件，并在 index.html 中引用，注意放到 </body> 關(guān)閉標(biāo)簽的上方，這樣當(dāng) HTML DOM 加載完成之后才會(huì)執(zhí)行 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 是選擇表情按鈕，點(diǎn)擊它會(huì)彈出表情選擇框。stickersEle 就是彈出的表情選擇框。msgInputEle 是消息輸入框。sendBtn 為發(fā)送按鈕。
然后引入 Lottie 的 js 庫，可以到示例代碼倉庫中下載，也可以在 https://cdnjs.com/libraries/bodymovin 中下載 lottie.min.js，下載完成之后放到項(xiàng)目根目錄，然后在 index.html 中，在引入 index.js 的上方引入它：
<script src="lottie.min.js"></script>
下載表情動(dòng)畫資源文件，它們都是 json 格式的文件，下載完成之后直接放到項(xiàng)目根目錄即可：
- 南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
- 炸彈表情：https://lottiefiles.com/3145-bomb
- 爆炸動(dòng)畫：https://lottiefiles.com/9990-explosion
接下來看一下各部分功能是怎么實(shí)現(xiàn)的。
發(fā)送普通消息
發(fā)送普通消息時(shí)，用戶在輸入框輸入完消息之后，點(diǎn)擊發(fā)送，就會(huì)把該條消息追加到消息列表中，并清空輸入框中的內(nèi)容。那么這里先給發(fā)送按鈕添加點(diǎn)擊事件：
sendBtn.addEventListener("click", () => {
const msg = msgInputEle.value;
if (msg) {
appendMsg(msg);
}
});
在事件處理函數(shù)中：
- 判斷用戶是否輸入了消息。
- 如果輸入了就追加到消息列表中。
來看一下 appendMsg() 函數(shù)的代碼：
function appendMsg(msg, type) {
// 創(chuàng)建消息元素
const msgEle = panelEle.appendChild(document.createElement("div"));
msgEle.classList.add("message", "mine"); // 設(shè)置為“我“發(fā)送的樣式
msgEle.innerHTML = `
<img class="avatar" src="./me.png" alt="" />
<p><span>${msg}</span></p>
`;
// 滾動(dòng)到最新消息
panelEle.scrollTop = panelEle.scrollHeight;
msgInputEle.value = "";
}
函數(shù)接收兩個(gè)參數(shù)，msg 和 type，分別是要追加的消息內(nèi)容和類型，type 為可選的，不傳則認(rèn)為是普通文本消息，如果傳遞了 "stickers" 則為表情消息，現(xiàn)在還用不到它。在這個(gè)函數(shù)中主要做了下面幾件事情：
- 按照消息的 HTML 結(jié)構(gòu)創(chuàng)建一個(gè)新的消息元素 msgEle，并追加到消息列表中。
- 把消息的樣式設(shè)置為我發(fā)送的。
- 內(nèi)部的元素分別為頭像和文本消息，使用模板字符串的形式賦值給 msgEle 的 innerHTML 屬性中，并在
<p> 中使用 msg 變量的值。
- 最后把滾動(dòng)條滾動(dòng)到最新的消息處，并清空輸入框中的消息。
這樣就可以發(fā)送普通的文本消息了。
發(fā)送動(dòng)畫表情
在發(fā)送動(dòng)畫表情之前，需要先加載動(dòng)畫表情。在 index.js 的最上方先定義表情名稱和表情動(dòng)畫文件路徑的鍵值對(duì)信息：
const stickers = {
bomb: {
path: "./3145-bomb.json",
},
pumpkin: {
path: "./43215-pumpkins-sticker-4.json",
},
};
我們會(huì)根據(jù) bomb 、 pumkin 這樣的 key 來找到對(duì)應(yīng)的動(dòng)畫路徑。接著初始化彈出層中的表情以供用戶選擇：
// 初始化表情面板，也可以在表情選擇窗彈出時(shí)再初始化
Object.keys(stickers).forEach((key) => {
const lottieEle = stickersEle.appendChild(document.createElement("span"));
// 對(duì)每個(gè)表情創(chuàng)建 lottie 播放器
const player = lottie.loadAnimation({
container: lottieEle,
renderer: "svg",
loop: true,
autoplay: false,
path: stickers[key].path,
});
// 當(dāng)選擇表情時(shí)，發(fā)送消息，并設(shè)置類型為 sticker 表情消息
lottieEle.addEventListener("click", () => {
appendMsg(key, "sticker");
});
// 當(dāng)鼠標(biāo)劃過時(shí)，播放動(dòng)畫預(yù)覽
lottieEle.addEventListener("mouseover", () => {
player.play();
});
// 當(dāng)鼠標(biāo)劃過時(shí)，停止動(dòng)畫預(yù)覽
lottieEle.addEventListener("mouseleave", () => {
player.stop();
});
});
這里的代碼分別作了下邊這些操作：
- 遍歷存儲(chǔ)表情信息的對(duì)象。
- 創(chuàng)建一個(gè) lottie 的容器，使用 span 元素，因?yàn)?lottie 動(dòng)畫的播放器需要掛載到一個(gè)具體的 html 元素中。
- 調(diào)用 lottie 的 loadAnimation() 加載動(dòng)畫，它需要傳遞這樣幾個(gè)參數(shù)：
- container: 播放器要掛載到的容器。
- renderer：可以選擇是使用 svg 還是 canvas 渲染動(dòng)畫。
- loop: 是否循環(huán)播放，由于此處是在表情選擇彈出層中預(yù)覽動(dòng)畫，所以支持循環(huán)播放。
- autoplay：是否自動(dòng)播放，這里設(shè)置為了否，后邊讓它在鼠標(biāo)劃過時(shí)再播放動(dòng)畫。
- path：動(dòng)畫 json 文件路徑，直接從對(duì)象中獲取。
- loadAnimation() 會(huì)返回 lottie 的實(shí)例，把它保存在 player 中。
然后后邊則注冊(cè)了幾個(gè)事件：
- 當(dāng) lottieEle 也就是表情被點(diǎn)擊時(shí)，發(fā)送表情消息，給 appendMsg() 的 msg 參數(shù)設(shè)置為表情的 key，type 參數(shù)設(shè)置為 "sticker"。
- 當(dāng)鼠標(biāo)劃過表情時(shí)，開始播放動(dòng)畫。
- 當(dāng)鼠標(biāo)劃出表情時(shí)，停止動(dòng)畫。
接著給發(fā)送表情按鈕添加事件，點(diǎn)擊時(shí)，切換表情彈出層的顯示狀態(tài)：
chooseStickerBtn.addEventListener("click", () => {
stickersEle.classList.toggle("show");
});
這時(shí)點(diǎn)擊發(fā)送表情按鈕就可以看到表情選擇彈出層了?，F(xiàn)在還不能發(fā)送表情，因?yàn)檫€沒在 appendMsg() 函數(shù)中處理，現(xiàn)在來修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <p> 元素里添加任何信息：
function appendMsg(msg, type) {
// ...
msgEle.innerHTML = `
<img class="avatar" src="./me.png" alt="" />
<p><span>${type === "sticker" ? "" : msg}</span></p>
`;
}
然后在它的下方，調(diào)用 playSticker() 函數(shù)來播放動(dòng)畫：
// 處理表情消息，播放相關(guān)動(dòng)畫
if (type === "sticker") {
playSticker(msg, msgEle);
}
playSticker() 函數(shù)接收兩個(gè)參數(shù)，一個(gè)是表情的 key，一個(gè)是消息元素。此時(shí)的 msg 變量的內(nèi)容就是在 lottieEle 點(diǎn)擊事件中傳遞過來的表情 key。函數(shù)中的代碼如下：
function playSticker(key, msgEle) {
// 表情消息，創(chuàng)建 lottie 動(dòng)畫
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,
});
}
在這個(gè)函數(shù)里主要做了下邊幾項(xiàng)操作：
- 獲取消息中的 span 元素，它將作為 lottie 的動(dòng)畫容器。
- 設(shè)置表情動(dòng)畫的寬高為 40px。
- 使用 lottie 加載動(dòng)畫，并設(shè)置循環(huán)播放為 false，自動(dòng)播放為 true，來讓表情發(fā)送時(shí)自動(dòng)播放動(dòng)畫，且只播放一次。
現(xiàn)在可以發(fā)送表情消息了，相關(guān)的動(dòng)畫也會(huì)自動(dòng)播放，接下來看一下怎么實(shí)現(xiàn)炸彈的全屏動(dòng)畫和對(duì)消息元素的晃動(dòng)效果。
發(fā)送帶全屏特效的表情
對(duì)于這種帶全屏特效的表情可以單獨(dú)進(jìn)行判斷，也可以在保存表情的對(duì)象中定義相關(guān)的操作，這里為了簡(jiǎn)單起見，我們單獨(dú)判斷用戶是否發(fā)送了炸彈表情，然后施加相應(yīng)特效。
首先在 appendMsg() 函數(shù)里，進(jìn)行判斷，如果發(fā)送的消息是表情消息，且表情為炸彈，則播放全屏動(dòng)畫并晃動(dòng)消息：
function appendMsg(msg, type) {
if (type === "sticker") {
playSticker(msg, msgEle);
if (msg === "bomb") {
// 播放爆炸動(dòng)畫
setTimeout(() => {
playExplosion(msgEle);
}, 800);
// 晃動(dòng)消息列表
shakeMessages();
}
}
}
這里爆炸全屏動(dòng)畫延遲了 800 毫秒之后再執(zhí)行，目的是在炸彈表情播放到合適的時(shí)間時(shí)，再播放全屏動(dòng)畫，播放動(dòng)畫使用了 playExplosion() 函數(shù)，并傳遞了消息元素進(jìn)去。在爆炸全屏動(dòng)畫結(jié)束之后，調(diào)用 shakeMessages() 來晃動(dòng)消息。這里先看一下 playExplosion() 函數(shù)的代碼：
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);
// 播放完成后，銷毀爆炸相關(guān)的動(dòng)畫和元素
explosionPlayer.addEventListener("complete", () => {
explosionPlayer.destroy();
explosionAnimeEle.remove();
});
}
playExplosion() 函數(shù)接收一個(gè) anchor 錨點(diǎn)，就是說基于哪個(gè)位置開始播放全屏動(dòng)畫，由于示例中的動(dòng)畫畫幅比較小，所以把它固定在了最新發(fā)送的消息的下方，這里爆炸動(dòng)畫的 anchor 就是消息元素，之后函數(shù)做了下邊的這些操作：
- 添加全屏動(dòng)畫元素，設(shè)置為絕對(duì)定位，寬度 200px，高度 100px，放在最新消息元素的右下角。
- 加載 lottie 動(dòng)畫，不循環(huán)、自動(dòng)播放。
- 由于原動(dòng)畫速度過快，這里調(diào)用 lottie 實(shí)例的 setSpeed() 方法，把速度設(shè)置為 0.3 倍速。
- 之后給 lottie 實(shí)例設(shè)置事件監(jiān)聽："complete"，它會(huì)在動(dòng)畫執(zhí)行完成時(shí)觸發(fā)，里邊銷毀了 lottie 實(shí)例和全屏動(dòng)畫元素。
這樣全屏動(dòng)畫的效果就實(shí)現(xiàn)了。接下來看消息晃動(dòng)的代碼：
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);
});
}
這個(gè)函數(shù)的操作是：
- 使用 reverse() 和 slice() 對(duì)最新的 5 條消息進(jìn)行晃動(dòng)，也可以把 5 改大一點(diǎn)，對(duì)更多消息進(jìn)行晃動(dòng)。
- 然后在循環(huán)中，分別給頭像和消息添加 shake class 執(zhí)行晃動(dòng)動(dòng)畫，這個(gè) class 的內(nèi)容稍后再介紹。
- 要注意的是，在添加 shake class執(zhí)行動(dòng)畫前，需要先刪除 shake，因?yàn)橛械南⒖赡茉谥耙呀?jīng)晃動(dòng)過了，例如當(dāng)連續(xù)發(fā)了多個(gè)炸彈表情時(shí)。后邊在添加 shake class 時(shí)，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動(dòng)畫執(zhí)行到一定程度時(shí)再晃動(dòng)消息。
接下來看一下 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 定義的動(dòng)畫，執(zhí)行時(shí)間為 0.8s，動(dòng)畫執(zhí)行函數(shù)為 ease-in-out。Keyframes 里的代碼比較多，但是都是很簡(jiǎn)單的，就是模擬了爆炸時(shí)的效果，移動(dòng) x 軸和 y 軸的偏移，每次的偏移幅度越來越小，并且越來越快，可以看到百分比的間隔越來越小。在動(dòng)畫進(jìn)行到 42% 的時(shí)候，加了一些旋轉(zhuǎn)動(dòng)畫，這樣就有了落地時(shí)的震動(dòng)效果。由于使用 rotate() 旋轉(zhuǎn)時(shí)的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來實(shí)現(xiàn)更真實(shí)的效果：
.message p {
transform-origin: left bottom;
}
.message.mine p {
transform-origin: right bottom;
}
這里把對(duì)方發(fā)送的消息的軸心設(shè)置在左下角，自己發(fā)送的消息則設(shè)置在了右下角。
總結(jié)
現(xiàn)在，這個(gè)模擬微信 8.0 動(dòng)畫表情的功能就實(shí)現(xiàn)了。主要就是下邊幾點(diǎn)：
- 使用 lottie 庫加載并播放動(dòng)畫。
- 確定全屏動(dòng)畫的位置和播放時(shí)機(jī)。
- 消息晃動(dòng)動(dòng)畫的 CSS 實(shí)現(xiàn)。
你學(xué)會(huì)了嗎？如果有問題或建議可以留個(gè)評(píng)論，喜歡此文章請(qǐng)點(diǎn)個(gè)贊或關(guān)注我，后邊還有更多更精彩的文章，感謝!
作者：峰華，簡(jiǎn)介：前端工程師，以直觀、專業(yè)的方式分享編程知識(shí)。Bilibili UP@峰華前端工程師
本文所有地址：
示例地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples
代碼地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect
lottie: https://cdnjs.com/libraries/bodymovin ，下載 lottie.min.js
南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
炸彈表情：https://lottiefiles.com/3145-bomb
爆炸動(dòng)畫：https://lottiefiles.com/9990-explosion
Lottie 官網(wǎng)：https://airbnb.io/lottie
到此這篇關(guān)于300 多行css代碼搞定微信 8.0 的炸裂特效的文章就介紹到這了,更多相關(guān)微信 8.0 炸裂特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
