HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输「建议收藏」

HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输「建议收藏」HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输是Cpp呀2021-01-2816:00微信8.0更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。近日,前端工程师华峰用300行代码实现微信表情包炸裂的特效,一起来看看做出来的效果吧:据他描述:项目的核心是使用到了lottie动画库。lottie是.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输

profile-avatar

是Cpp呀2021-01-28 16:00

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

近日,前端工程师华峰用300行代码实现微信表情包炸裂的特效,一起来看看做出来的效果吧:

HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输「建议收藏」

 

据他描述:项目的核心是使用到了 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);
  }
});

Jetbrains全家桶1年46,售后保障稳定

在事件处理函数中:

  • 判断用户是否输入了消息。
  • 如果输入了就追加到消息列表中。

来看一下 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 变量的值。
  • 最后把滚动条滚动到最新的消息处,并清空输入框中的消息。

这样就可以发送普通的文本消息了。

HTML多行代码搞定微信8.0的炸裂特效!C/C++怎么能输「建议收藏」

 

发送动画表情

在发送动画表情之前,需要先加载动画表情。在 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、外包项目拿到手软

心动不如行动,赶紧领取你的专属福利吧~

今日视频:一招看破程序员资历——编译原理——多肽实现原理

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/230864.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • AWC / Advanced SystemCare Pro(专业版)V3.7.0+有效注册码

    AWC / Advanced SystemCare Pro(专业版)V3.7.0+有效注册码AdvancedSystemCare一直以来都是以突破系统瓶颈为噱头,号称对系统能够进行其他优化软件所没有的更彻底的优化和清理,具体是否如此,相信你使用过后自然会明了,事实上,它的清理效果绝对能让你大吃一惊(这一点可以先用你认为的最好的清理工具对系统进行一次清理,然后再用它清理一遍就能体现出来了),我曾推荐过其3.3和3.4版的专业版(付费版本),而现在,其最新版已是3.5版了,除支持Windows7外,还新增TurboBoost加速功能,日志视图功能以及先进的卸载程序。    Advanc

    2022年10月20日
  • 问题解决——SolidWorks 已停止工作 (Windows7 + SolidWorks 2010 SP0.0)

    问题解决——SolidWorks 已停止工作 (Windows7 + SolidWorks 2010 SP0.0)

  • CentOS 7 Linux iptables 开放端口映射

    CentOS 7 Linux iptables 开放端口映射/bin/systemctlstop firewalld.servicesystemctldisablefirewalld.serviceyuminstalliptables-servicesPackageiptables-services-1.4.21-17.el7.x86_64alreadyinstalledandlatestversionvi/e…

  • JRTPLIB使用实例

    JRTPLIB使用实例这几天在看关于JRTPLIB方面的东西。在网上看了不少文章,其中有很大部分使用的JRTPLIB版本在3.0以下。在网上下载了一个JRTPLIB-3.7的库,发现里面的函数接口做了一些修改。现奉上一篇基

  • Mybatis工作流程及其原理与解析

    Mybatis简介:MyBatis是一款优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解来配置和映射原生信息,将接口和Java的POJOs(PlainOldJavaObjects,普通的Java对象)映射成数据库中的记录。本文将通过d…

  • 视频监控中NVR录像机NTP校时配置(京准)

    视频监控中NVR录像机NTP校时配置(京准)NTP校时通过设置NTP服务器地址、NTP端口号和校时时间间隔,设备即按照设置每隔一段时间校时一次。NVR3.0界面路径:主菜单—系统配置—网络配置——NTP海康威视iVMS-4200校时、手动校时、定位校时、NTP校时四种方法任你选NVR4.0界面路径:系统管理—网络配置—基本配置—NTP注意:NTP校时,需要设备接入外网或者在局域网中有NTP软件组建NTP服务器。定位校时…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号