摘要

微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。

微信 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="前端工程师用HTML多行代码搞定微信8.0的炸裂特效！C/C++工程师怎么能输" 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="前端工程师用HTML多行代码搞定微信8.0的炸裂特效！C/C++工程师怎么能输" 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

总结

现在，这个模拟微信 8.0 动画表情的功能就实现了。主要就是下边几点：

• 使用 lottie 库加载并播放动画。
• 确定全屏动画的位置和播放时间。
• 消息晃动动画的 CSS 实现。

那么问题来了，作为编程界大佬的C语言能否实现微信对话框爆炸特效呢？这个需要大家一起探索！小编相信C语言的强大，是完全可以做到的，甚至更加简单，期待各位小伙伴一起讨论~

如果你对学习编程有兴趣，也想有一天别人使用你开发的软件或小程序、小特效，没基础也完全不用担心，因为机会来了，点击下方的了解更多链接，开启你的编程之旅~

在这里我们有什么？

1、海量学习资源

2、名师一对一指导

3、同行之间的相互切磋

4、外包项目拿到手软

心动不如行动，赶紧进群免费领取你的专属福利吧~