十分钟实现灭霸打响指灰飞烟灭的效果

看过复仇者联盟的都知道，灭霸作为计划生育政策的坚定支持者和执行者，一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫，所以在复联4上映后，那个不存在的网站google，推出了一个彩蛋，如果在搜索框搜索灭霸，会出现一个手套的按钮，点击后会让网页搜索结果消失一半。

恩~这很谷歌。

效果虽然酷炫但其实并不复杂，这里带着大家一起来实现一下，网上也已经有了一些教程(Thanos Snap Effect JavaScript Tutorial)。

这里稍微加点东西，灭霸的响指毕竟是真的打而不是用鼠标点按钮，所以我会加上音量检测，当检测到响指的声音（其实是超过某个音量预值）就触发效果，然后就可以愉快的向朋友装逼了。

准备开始

我们这里只用一个图片元素,HTML结构如下

动画的实现

1、将html转成canvas，为后面处理做准备。这里我们使用html2canvas库，可以将html中的dom节点绘制成canvas，相当于对这个dom节点进行截图，使用很简单，代码如下（网页生成海报图片就可以用这个库来做）。

2、这里我们拿到了包含了图片信息的canvas后，要通过canvas的getImageData来获取到canvas画布上的每个像素的信息。

图像信息被存储在一个Uint8ClampedArray（8位无符号整型固定数组）中。

这个数组中的值为0到255的整数，按图片中像素从左到右从上到下的顺序，每4个数字表示一个像素信息，这4个数字分别表示rgba（r-红色，g-绿，b-蓝色，a-透明度）的四个值。 比如这样一个图片

它的像素信息即为

3、接下来是最关键的一步，创建多个同等长度的数组，填充上透明像素信息(数组中的值全是0即可)，然后将之前拿到的图像像素信息“随机”分布到这些数组中，这些数组就包含了原图像的部分内容,原教程里面用到了一个随机数生成的库chance来控制随机数出现概率，直接使用完全随机数也没有问题。

当canvasCount为3时效果如下：

原始图片canvas

生成的包含原图部分像素的3个canvas



canvasCount越大，生成的canvas越多，分配到每个canvas上面的像素就越少，飘的就越散。

4、接下来就非常简单了，隐藏掉原始图像，为生成的canvas添加飘散动画就可以了，飘散动画主要组成就是高斯模糊，位移，旋转，透明度变化，具体代码这里就不写了，可以在demo源代码中看到，最终效果如下。

响指触发

灰飞烟灭的动画已经完成，接下来是如何触发这段动画，文章开始就说过谷歌搜索上的原始效果是通过点击按钮触发，而我们通过麦克风实时检测输入音量，当打响指时（音量达到一定大小）触发动画。

1、首先要确保你的设备有麦克风等声音输入装置，然后监测并获取设备，如果有麦克风设备，网页上会弹出授权提示。

2、音频处理代码

最后

一切搞定，就这么简单可以拿去装逼了~~

来源于
https://juejin.im/post/5cd2b57ef265da039f0f292c