300 多行css代碼搞定微信 8.0 的炸裂特效

發(fā)布時(shí)間：2021-02-05 16:01:33 作者：CSDN 程序人生

這篇文章主要介紹了300 多行css代碼搞定微信 8.0 的炸裂特效,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

微信 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è)類似的特效。折騰許久之后，做出來(lái)的效果如下：

項(xiàng)目的核心是使用到了 lottie 動(dòng)畫庫(kù)。lottie 是 Airbnb 出品的、全平臺(tái)（Web、Android、IOS、React Native）的動(dòng)畫庫(kù)，它的特點(diǎn)在于能夠直接播放使用 Adobe After Effects 制作的動(dòng)畫。設(shè)計(jì)師在 After Effects 中，利用 Bodymovin 插件把動(dòng)畫導(dǎo)出為 JSON 格式之后，開(kāi)發(fā)者就能夠通過(guò)相應(yīng)平臺(tái)的 SDK 進(jìn)行播放。（項(xiàng)目地址及示例演示見(jiàn)文末）

在做完這個(gè)項(xiàng)目之后我感覺(jué)到自己的前端儲(chǔ)備又豐富了一層，在以后應(yīng)對(duì)復(fù)雜特效時(shí)又有了新的思路，如果你也想進(jìn)一步提升前端開(kāi)發(fā)技能，可以跟著這篇文章實(shí)踐一下。本篇文章除了使用 Lottie 庫(kù)之外，全部都是使用原生 HTML/CSS/JavaScript 實(shí)現(xiàn)的，這樣無(wú)論你是 React、Vue 還是其它工程師，都可以快速掌握。

編寫界面

本來(lái)想跳過(guò) HTML/CSS 部分，但是想到 CSS 可能是大部分人的弱項(xiàng)，所以我決定還是把實(shí)現(xiàn)界面的思路寫一下，想看核心部分的可以直接跳到：二、發(fā)送普通消息部分。

1. HTML 部分

首先看 HTML 部分，從效果圖來(lái)看：

上邊有一個(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 來(lái)區(qū)分發(fā)送方， mine 代表我發(fā)送的， yours 代表對(duì)方發(fā)送的。每條消息里邊使用 <img class="avatar" > 來(lái)展示頭像，使用 <p> 元素來(lái)顯示文本， <p> 元素里邊的 <span> 元素將會(huì)作為 lottie 的容器來(lái)播放表情動(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" /> 是聊天消息輸入框，沒(méi)什么特別的。
<button class="send"> 是發(fā)送按鈕

這個(gè)是 HTML 的基本結(jié)構(gòu)，接下來(lái)看一下 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) ，小陰影，例如輸入框和表情選擇彈出層。

接下來(lái)是一些重置樣式：

* {
  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 布局來(lái)控制標(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)間距用來(lái)增加留白，在視覺(jué)上引起放松，陰影則為了和下邊的聊天面板區(qū)分開(kāi)

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 同樣是為了留出足夠多的空白，來(lái)與其它元素隔開(kāi)一段距離，以避免擁擠感。

2.6 消息

消息分為消息容器、頭像和消息體 3 個(gè)部分。其中消息體和頭像包含在消息容器中，先來(lái)看消息容器的樣式。消息容器使用 flex 布局來(lái)把消息體和頭像放在一行，寬度最大為面板寬度的 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è)元素安排的太過(guò)緊湊，否則十分影響視覺(jué)效果，最直接的影響就是引起視覺(jué)上的擁擠感，造成視覺(jué)疲勞。

消息體同樣的設(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ì)齊。這里把代碼一次性貼出來(lái)：

.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í)，給表情彈出層添加該樣式以顯示出來(lái)：

.show {
  opacity: 1;
}

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 庫(kù)，可以到示例代碼倉(cāng)庫(kù)中下載，也可以在 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

接下來(lái)看一下各部分功能是怎么實(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ù)中：

判斷用戶是否輸入了消息。
如果輸入了就追加到消息列表中。

來(lái)看一下 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 來(lái)找到對(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)劃過(guò)時(shí)，播放動(dòng)畫預(yù)覽
  lottieEle.addEventListener("mouseover", () => {
    player.play();
  });
  // 當(dāng)鼠標(biāo)劃過(guò)時(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)劃過(guò)時(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)劃過(guò)表情時(shí)，開(kāi)始播放動(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)檫€沒(méi)在 appendMsg() 函數(shù)中處理，現(xiàn)在來(lái)修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <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ù)來(lái)播放動(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)擊事件中傳遞過(guò)來(lái)的表情 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，來(lái)讓表情發(fā)送時(shí)自動(dòng)播放動(dòng)畫，且只播放一次。

現(xiàn)在可以發(fā)送表情消息了，相關(guān)的動(dòng)畫也會(huì)自動(dòng)播放，接下來(lái)看一下怎么實(shí)現(xiàn)炸彈的全屏動(dòng)畫和對(duì)消息元素的晃動(dòng)效果。

發(fā)送帶全屏特效的表情

對(duì)于這種帶全屏特效的表情可以單獨(dú)進(jìn)行判斷，也可以在保存表情的對(duì)象中定義相關(guān)的操作，這里為了簡(jiǎ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() 來(lái)晃動(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)，就是說(shuō)基于哪個(gè)位置開(kāi)始播放全屏動(dòng)畫，由于示例中的動(dòng)畫畫幅比較小，所以把它固定在了最新發(fā)送的消息的下方，這里爆炸動(dòng)畫的 anchor 就是消息元素，之后函數(shù)做了下邊的這些操作：

添加全屏動(dòng)畫元素，設(shè)置為絕對(duì)定位，寬度 200px，高度 100px，放在最新消息元素的右下角。
加載 lottie 動(dòng)畫，不循環(huán)、自動(dòng)播放。
由于原動(dòng)畫速度過(guò)快，這里調(diào)用 lottie 實(shí)例的 setSpeed() 方法，把速度設(shè)置為 0.3 倍速。
之后給 lottie 實(shí)例設(shè)置事件監(jiān)聽(tīng)："complete"，它會(huì)在動(dòng)畫執(zhí)行完成時(shí)觸發(fā)，里邊銷毀了 lottie 實(shí)例和全屏動(dòng)畫元素。

這樣全屏動(dòng)畫的效果就實(shí)現(xiàn)了。接下來(lái)看消息晃動(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)過(guò)了，例如當(dāng)連續(xù)發(fā)了多個(gè)炸彈表情時(shí)。后邊在添加 shake class 時(shí)，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動(dòng)畫執(zhí)行到一定程度時(shí)再晃動(dòng)消息。

接下來(lái)看一下 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 軸的偏移，每次的偏移幅度越來(lái)越小，并且越來(lái)越快，可以看到百分比的間隔越來(lái)越小。在動(dòng)畫進(jìn)行到 42% 的時(shí)候，加了一些旋轉(zhuǎn)動(dòng)畫，這樣就有了落地時(shí)的震動(dòng)效果。由于使用 rotate() 旋轉(zhuǎn)時(shí)的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來(lái)實(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 庫(kù)加載并播放動(dòng)畫。
確定全屏動(dòng)畫的位置和播放時(shí)機(jī)。
消息晃動(dòng)動(dòng)畫的 CSS 實(shí)現(xiàn)。

你學(xué)會(huì)了嗎？如果有問(wèn)題或建議可以留個(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)文章，希望大家以后多多支持腳本之家！

Tag：微信 8.0 炸裂特效

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

300 多行css代碼搞定微信 8.0 的炸裂特效

編寫界面

1. HTML 部分

2. CSS 部分

3. JS 部分

發(fā)送普通消息

總結(jié)

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容