教你实现微信8.0『炸裂』的表情特效

写在开头

最近微信更新了8.0，其中之一最好玩的莫过于表情包的更新了，大家都在群里纷纷玩起了表情包大战。

“我自己是一名从事了6年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。

作为一个前端程序员，这就勾起了我的好奇心，虽然我从来没有实现过这样的动画，但是我还是忍不住想要去实现，最终我花了2天时间去看一些库的源码到我自己实现一个类似的效果，在这里我总结一下，并且手把手地教大家怎么学习实现。而🎉有一个自己的名字，叫做五彩纸屑，英文名字叫 confetti。

聊天室+五彩纸屑特效 在线地址: https://www.qiufengh.com/#/

聊天室Github地址: https://github.com/hua1995116/webchat

五彩纸屑Github地址: https://github.com/hua1995116/node-demo/tree/master/confetti

 

特效预览，时间原因我只实现了平行四边形的彩色小块，其他形状的原理也是类似。

还可以设置方向

 

 

前期研究

在写这个特效前，我几乎不会用canvas，虽然说现在也不太会用，很多 API 也不太清楚，因此这篇教程也是基于零基础 canvas 写的，大家不用担心这个教程难度太高而被劝退。我会通过零基础 canvas 的基础上来一步步实现的。不过学习这个特效之前需要一点点高中数学的知识，如果你还记得 sin 和 cos 函数，那么以下的内容对于你来说都会非常简单，不会也没关系~

我个人比较喜欢探索研究，对有意思的玩意儿就会去研究，因此我也是站在巨人的基础上，去 codepen 查了好多个类似的实现进行研究。

 

最终将目标定位在了 canvas-confetti ，为什么是这个库呢？因为他的效果对于我们来说非常可以了，而且它是一个开源库，并且拥有了 1.3K star（感觉改天可以分析分析大佬实现库的原理了~），维护频率也非常高。

核心实现

切片场景

首先拿到这个库的时候，我有点开心，因为这个库只有一个单文件。