JS完成微信炸屎大作战功能

发布时间：2021-11-16 15:21 所属栏目：13 来源：互联网

导读：大家好，我是秋风，近日，微信又发布了新功能（更新到微信8.0.6）。最火热的非炸屎功能莫属了，各种群里纷纷玩起了炸屎的功能。不知道大家是否经历过那样一个时候，小时候（我是说很小的时候，在我还在上小学的时候）过年也尝试过这种恶趣味，没想到微信给它

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

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

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

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

1.丢炸弹

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

2.炸弹爆炸

利用lottie 来实现动画。

3.粑粑被炸开

利用 css 动画实现

4.所有人震动

利用 css 动画实现

总结

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

（编辑：ASP站长网）