大家好,我是秋风,近日,微信又发布了新功能(更新到微信8.0.6)。最火热的非"炸屎"功能莫属了,各种群里纷纷玩起了炸屎的功能。

不知道大家是否经历过那样一个时候,小时候(我是说很小的时候,在我还在上小学的时候)过年也尝试过这种恶趣味,没想到微信给它做成了一个线上版本。这个功能发明,连创造产品的本人也进行了调侃。但是能做一个功能让全民玩的开心,也不枉产品的出现的意义了。

之前在微信8.0 更新的时候,我也写过一篇《教你实现微信8.0『炸裂』的礼花表情特效》。之前一篇文章中我是用 canvas 来实现的,上次在文章末有人评论,可以通过 lottie 来实现相似的功能,其实我对这个还是挺感兴趣的,但是一直没有尝试,这一次我就想通过新的方式 lottie 来实现一下这功能。

效果体验:

https://example.qiufeng.blue/wechat-feces/3-2-feces.html

Github地址:

https://github.com/hua1995116/node-demo/tree/master/wechat-feces

步骤拆解

任何一个物体都是由更微小的物体构成,因此我们想要实现以上功能,自然也得一步一步地来。我大致将以上功能拆解成了以下四个步骤。里面的每一个都不会太难,可以说前端小白也能轻松实现。

1.丢炸弹

这一步,我们可以用二次函数的知识,来写一个轨迹路径(类似 y = $x^2$ ),然后通过tween.js来做补间动画。

2.炸弹爆炸

利用lottie 来实现动画。

3.粑粑被炸开

利用 css 动画实现

4.所有人震动

利用 css 动画实现

总结

以上我们大致想说的思路,也许你看思路就对其中一些的实现已经轻车熟路,那你可以跳过一部分。有了上面的思路后,那我们就真刀真枪开始实践啦。

具体实现

1.丢炸弹

我们通过仔细观察其实可以看到,炸弹的运动轨迹其实就是一个抛物线。我们想要实现这个功能,很容易地就可以联想到二次函数。

首先我们先来看看二次函数的定义。

一般地,把形如y=ax²+bx+c(a≠0)(a、b、c是常数)的函数叫做二次函数。

从图像上来表达就是这样的。

很显然这和我们想要的轨迹非常的相似。

因为正常的笛卡尔坐标系都是以竖直向上为 y 正轴,横向向右为 x 正轴。而对于 dom 定位而言,左上方为 (0,0)横向向右为 x 正轴,竖直向下为 y 正轴。只不过将坐标系沿着 x 轴进行了一个翻转。

因此我们只要确定一个二次函数,我们就能得到轨迹。由于二次函数的通项有3个未知数,因此,我们只需要知道3个点就能确定一个二次函数。我们先假定我们的二次函数是这样的。

我们的3个点分别为 (0,H),(H,0),(3H, 3H) 我们通过代入通项可以得出以下公式:

然后解出

得到:

因此,我们只需要得到这个炸弹最高点距离"屎"的高度,就能画出整个轨迹。

现在假设我们的炸弹是一个 10px * 10px 的小方块,设置起始点为(300,300)终点为 (0,100) H=100,此时我们得到的二次函数为:

我们就能得到以下轨迹动画:

而渲染每一帧动画,我们则用了著名的补间动画库Tween.js 补间(动画)是一个概念,允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间,补间引擎将负责计算从起始点到结束点的值。

var coords = { x: 300 };  // 起始点 为 x = 300
var tween = new TWEEN.Tween(coords)
.to({ x: 0 }, 1000) // 终点为 x = 0, 并且这个动作将在1秒内完成
.easing(TWEEN.Easing.Linear.None) // 匀速

通过以上定义,我们就可以在 onUpdate 中,拿到每次变化的x值,然后通过上面二次函数得到 y,然后对小方块进行更新。

tween.onUpdate(function() {
var x = coords.x;
var y = 1/120 * x * x - 11/6 * x + 100;
box.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)');
})

此时我们完成的效果还是缺了点东西,就像画画一样,我们只给他画了骨骼,我们需要给它包装上色,接下来我们只需要做以下两件事,然后就能看到效果啦~

1.将方块换成炸弹然,炸弹的形状很简单,我们可以通过 ps 将它从图层中抠出来。

2.修改它运动时候的角度。

本节完整代码:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html

2.炸弹爆炸

然后再谈谈炸弹爆炸的效果,上面也说了,想换成lottie 来写动画,那么lottie 是什么呢?

Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web、ios、android和react native。在web侧,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制到我们页面中。

然后我去 https://lottiefiles.com/ 找了一个json爆炸的特效文件。

而它的写法非常简单,只需要引入 lottie ,然后调用 bodymovin.loadAnimation 方法。

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
const animation = window.bodymovin.loadAnimation({
container: document.querySelector('.bodymovin'), // 要包含该动画的dom元素
renderer: 'svg', // 渲染方式,svg、canvas、html(轻量版仅svg渲染)
loop: true, // 是否循环播放
autoplay: true, // 是否自动播放
path: './bomb.json', // 动画json文件路径
});
</script>

因此我们只需要在抛物线完成后再立即调用爆炸特效,而tween.js 也给我提供了事件方法onComplete。我们只需要在onComplete回调中,让爆炸动画开始。

tween.onComplete(function () {
// 写爆炸动画
})

本节完整代码: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html

3.粑粑被炸开

3.1形状

同理炸弹用 PS 抠图把 "粑粑" 抠出一个透明的图层,就想这样。(稍微有点毛刺没关系,实际的粑粑也没这么大, 所以不太容易看到毛刺,也可以通过微调给他修复)

.feces {
position: absolute;
background-image: url(./feces.png);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 80px;
transform-origin: center;
}
// 创建一个粑粑元素
function createfeces(scale = 1) {
const fece = document.createElement('div');
fece.className = 'feces';
// 由于粑粑有大有小,有方向,因此预留了值。
const symbol = Math.random() > 0.5 ? 1 : -1;
fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
return fece;
}

3.2位置

我们可以看到粑粑是从炸裂的地方飞出来的,飞出来主要是7个粑粑,其中中间的最大,其他的随着离中心粑粑越远而越小,排列的方式是类似于一个圆,但是又不是那么规律。

因此我们可以先通过最简单的方式来实现,就是以一个圆形环绕。一个圆是 360 °,我们只需要给它平均分成6等分就好。我们环绕的一共是6个粑粑,因此,每个之间是60°。

由于我们上面的炸弹是大致是一个 300 * 300的区域,因此我将中心的坐标定为(150,150),然后随机生成一个 70 ~ 230 的x点,就能算出 y 值,在确定第一个点后,根据每个点之间的角度是 60°,就能计算出其余的5个点。

由于用中心点为 (150,150) 为圆心计算比较麻烦,因此我将中心点移到了(0, 0)进行计算,最后再将所有计算出来的点都往 x 轴,y 轴平移 150。

// 计算要生成的多个粑粑的位置
// 传入的参数num为要生成的粑粑的数量
function randomPosition(num) {
const radius = 80; // 圆半径
const randomX = Math.random() * radius // 任取0到半径中的任意一个x
const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // 确定一个第一象限在圆上的点
const radian = Math.atan(y / randomX); // 这个点的弧度值 const step = Math.PI * 2 / num; // 每坨屎间距的弧度值 return new Array(num).fill(0).map((item, index) => {
const r = (index * step + radian)
// 将弧度为0 - 2 * PI
const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
return {
x: radius * Math.sin(tr),
y: radius * Math.cos(tr),
}
}) }

然后我们按照这个思路进行绘制,绘制出 6 个粑粑,再向x轴和y轴分别平移150。

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // 此处你也定义多于6个

貌似有点那味了,但是所有的都一样大,因此我们需要处理一下,根据距离中心远近来缩放大小,大致写了一个,因为圆的半径为80,每增加 80,就把粑粑的大小变成原来的 2/3。

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // 由于此时已经平移 150 ,因此需要计算距离中心点的距离
const r = Math.pow(2/3, dis / length); // 要缩放的比例

然而真实场景中,我们摆放位置会更加随机,因此我给每个粑粑的位置增加了一个随机值,并且中心粑粑会更加偏向于左上角,也更加了一定的随机值。

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {
const r = (index * step + radian)
const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
return {
// 增加随机值
x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
}
})
}

3.3角度

最后们只需要点缀一下每个粑粑的角度就可以啦。

function createfeces(scale) {
const fece = document.createElement('div');
fece.className = 'feces';
const symbol = Math.random() > 0.5 ? 1 : -1; // 生成 -20 ~ 20 之间的随机角度
fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
fece.style.opacity = '0';
return fece;
}

3.4动画

由于这里和丢炸弹类似,我就不详细展开讲了。需要提一下的是,由于粑粑是先从炸弹位置出来,再缓缓下来,这里我们需要利用两次 Tween 补间动画。

// 一开始的出现时候的动画,从爆炸口冲出来
function initFece(end) {
...
const start = { x: 0, y: 100, z: 0 }; // 爆炸口
const tween = new TWEEN.Tween(start)
.to({ ...end, z: 1 }, 100)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(function () {
fece.style.setProperty('top', `${start.y}px`);
fece.style.setProperty('left', `${start.x}px`);
fece.style.setProperty('opacity', `${start.z}`);
})
.onComplete(function () {
initDown(start, fece).start(); // 冲出完成,进行下落透明动画
})
return tween;
}
// 下落同时变透明动画
function initDown(start, fece) {
const s = {
y: start.y,
o: 1,
};
const e = { y: start.y + 80, o: 0 };
const tween = new TWEEN.Tween(s)
.to(e, 2000 + 500 * Math.random())
.easing(TWEEN.Easing.Quadratic.In)
.onUpdate(function () {
fece.style.setProperty('top', `${s.y}px`);
fece.style.setProperty('opacity', `${s.o}`);
})
.onComplete(function () {
})
return tween;
}

最后效果

本节完整代码:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html

3.5总结

由于这一节比较长,总结一下知识

  • 先利用 1 = x² + y² 圆轨迹的特性,建立初步位置
  • 再通过加入随机值,使得整个分布稍微不那么规则一些
  • 给粑粑添加随机角度
  • 让中心粑粑更趋向于爆炸口
  • 添加链式动画出现和下落

4.所有人震动

这个功能只需要用简单 css 动画就能完成这里就不再详细讲啦,有兴趣的小伙伴可以实现一下放到评论里~

结尾

本次纯属于一个对这个效果好奇的探索,不是100%还原动画。本人也不是专门写动画的,上述库也是第一次使用,写的可能不那么专业(有任何问题欢迎评论区指出错误)。但是希望能给大家提供一个好玩的思路,在做动画的时候可以利用 lottietween 两个库,以及将复杂问题简单化,把不规律的东西变成规律的东西,把复杂的东西变成简单的,最后再一步步地去深化。同时感谢楠溪对本文的校对。

结语

** ️关注+点赞+收藏+评论+转发️ **,原创不易,鼓励笔者创作更好的文章

关注公众号秋风的笔记,一个专注于前端面试、工程化、开源的前端公众号

10分钟用JS实现微信 "炸屎"大作战的更多相关文章

  1. 10分钟详解Spring全家桶7大知识点

    Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...

  2. js为什么是单线程的?10分钟了解js引擎的执行机制

    深入理解JS引擎的执行机制 1.JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setT ...

  3. 10分钟理解JS引擎的执行机制

    首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 (1) JS为什么是单线 ...

  4. 转:10分钟了解JS堆、栈以及事件循环的概念

    https://juejin.im/post/5b1deac06fb9a01e643e2a95?utm_medium=fe&utm_source=weixinqun 前言 其实一开始对栈.堆的 ...

  5. 10分钟学会js处理json常用方法

    一.json定义 JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "&q ...

  6. 10分钟了解js的宏任务和微任务

    熟悉宏任务和微任务以及js(nodejs)事件循环机制,在写业务代码还是自己写库,或者看源码都是那么重要 看了部分文档,自己总结和实践了一下 js中同步任务.宏任务和微任务介绍 同步任务: 普通任务 ...

  7. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...

  8. 10分钟教你用Python打造微信天气预报机器人

    01 前言 最近武汉的天气越来越恶劣了.动不动就下雨,所以,拥有一款好的天气预报工具,对于我们大学生来说,还真是挺重要的了.好了,自己动手,丰衣足食,我们来用Python打造一个天气预报的微信机器人吧 ...

  9. 10分钟教你用Python玩转微信之好友性别比例统计分析

    01 前言+效果展示 想必,微信对于大家来说,是再熟悉不过的了.那么,大家想不想探索一下微信上的各种奥秘呢?今天,我们一起来简单分析一下微信上的好友性别比例吧~废话不多说,开始干活. 结果如下: 02 ...

  10. 10分钟教你用Python玩转微信之抓取好友个性签名制作词云

    01 前言+展示 各位小伙伴我又来啦.今天带大家玩点好玩的东西,用Python抓取我们的微信好友个性签名,然后制作词云.怎样,有趣吧~好了,下面开始干活.我知道你们还是想先看看效果的. 后台登录: 词 ...

随机推荐

  1. 初学DDD-领域驱动设计

    这几天刚开始学习DDD,看了几篇大神的文章,现在只是知道了几个名词,还没有详细的学习.结合自己的工作经历,说说自己的看法,请各位大神多多指点. 最开始用的比较多的是以数据库表建立模型驱动开发.后来发现 ...

  2. JQUERY获取当前页面的URL信息

    以前在做网站的时候,经常会遇到当前页的分类高亮显示,以便让用户了解当前处于哪个页面.之前一直是在每个不 同页面写方法.工程量大,也不便于修改.一直在想有什么简便的方法实现.后来在网上查到可以用获取当前 ...

  3. 编译php时的一个脚本

    ./configure --prefix=/usr/local/php \ --with-curl \ --with-freetype-dir \ --with-gd \ --with-gettext ...

  4. [网络]远程访问局域网svn服务器[转]

    转至:http://8474832.blog.51cto.com/8464832/1555449 打开路由器访问界面 选择转发规则->端口映射-新建 在弹出的界面中填写相应的端口号了内网ip 填 ...

  5. 查看Linux连接数

    netstat  -ant | grep ESTABLISHED  | wc -l

  6. PHP获取字符串编码与转码

    (⊙o⊙)-编辑器保存的是utf8的文档取出来的字符串是gbk编码?问题很多,字符串转换为utf8的话在浏览器输出乱码 $e=mb_detect_encoding($d,array('GB2312', ...

  7. Oracle知识梳理(一)理论篇:基本概念和术语整理

    理论篇:基本概念和术语整理 一.关系数据库           关系数据库是目前应用最为广泛的数据库系统,它采用关系数据模型作为数据的组织方式,关系数据模型由关系的数据结构,关系的操作集合和关系的完整 ...

  8. Linux根据名字搜索

    find / -name mysql

  9. SSH框架的搭建和测试(Spring + Struts2 + Hibernate)

    SSH框架实现了视图.控制器.和模型的彻底分离,同时还实现了业务逻辑层与持久层的分离. Spring实现了MVC中的 Controller的功能,Struts实现Web视图的功能,Hibernate则 ...

  10. @Scope 注解

    @Scope(value=ConfigurableBeanFactory.SCOPE_PROTOTYPE)这个是说在每次注入的时候回自动创建一个新的bean实例 @Scope(value=Config ...