JS实现微信"炸屎"大作战功能

这篇文章主要介绍了JS实现微信 "炸屎"大作战,本文通过实例代码图文展示给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

大家好，我是秋风，近日，微信又发布了新功能（更新到微信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.修改它运动时候的角度。