HTML多行代碼搞定微信8.0的炸裂特效！C/C++怎么能輸

是Cpp呀2021-01-28 16:00

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

近日，前端工程師華峰用300行代碼實現微信表情包炸裂的特效，一起來看看做出來的效果吧：

?

據他描述：項目的核心是使用到了 lottie 動畫庫。

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

發送普通消息——核心

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

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; }

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

本文所有地址：

• 示例地址：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
• 爆炸動畫：https://lottiefiles.com/9990-explosion
• Lottie 官網：https://airbnb.io/lottie

那么問題來了，作為編程界大佬的C語言能否實現微信對話框爆炸特效呢？這個需要大家一起探索！小編相信C語言的強大，是完全可以做到的，甚至更加簡單，期待各位小伙伴一起討論~

如果你對學習編程有興趣，也想有一天別人使用你開發的軟件或小程序、小特效，沒基礎也完全不用擔心，因為機會來了，點擊下方的了解更多鏈接，開啟你的編程之旅~

在這里我們有什么？

1、海量學習資源

2、名師一對一指導

3、同行之間的相互切磋

4、外包項目拿到手軟

心動不如行動，趕緊領取你的專屬福利吧~

今日視頻：一招看破程序員資歷——編譯原理——多肽實現原理

總結

以上是生活随笔為你收集整理的HTML多行代码搞定微信8.0的炸裂特效！C/C++怎么能输的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。