弹指间，网页灰飞烟灭——Google灭霸彩蛋实现

时间：2023-05-18 22:36:02 | 来源：网站运营

时间：2023-05-18 22:36:02 来源：网站运营

弹指间，网页灰飞烟灭——Google灭霸彩蛋实现：

这是之前在公众号写的一篇文章，我觉得蛮有意思，这里再回顾下。

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。

以下正文：

阅读本文大概需要 12 分钟。

不知道大家有没有看这段时间最火的一部电影《复仇者联盟4：终局之战》，作为漫威迷的我还没看，为什么呢？因为太贵了，刚上映的那周，一张IMAX厅的票价已经达到了299的天价，作为搬砖民工是舍不得花这么高的钱来看一场电影的，太奢侈了，当然也可能我是个假漫威迷吧，哈哈哈哈逃~

我刚看下现在的票价，IMAX厅是89元，已经接近正常，虽然还是些许偏高，但是已经可以接受了。对于看电影，我并不是那么崇尚看首映，或者非要第一时间看到，但是对于喜欢的电影我一定会找个最佳的位置观看，现在票价合理，最佳观影区充足，正是看电影的好时机。从这方面看，我可能只算是一个漫威爱好者，而绝不是一个狂热者。

而今天要说的主题自然和漫威有关，是一个Google的小彩蛋。想必大家已经知道了，在Google中搜索“灭霸”，然后在右侧点击的“无限手套”，页面的一些搜索项就会随机性像沙子一样的消失（后面统称沙化效果），特别的炫酷。有不知道的可以看下面的视频：

我觉得特别有意思，就参考了一些文章，实现了类似上面的沙化效果。

首先我制作了一个模板如下，点击按钮后，列表随机沙化（手套的效果是很多图片的合成，这里就不处理了）。







模板代码如下：




<div class="box"> <div class="bomb">啪嗒！</div> <ul> <li class="item"> <h3>襟三江而带五湖，控蛮荆而引瓯越。</h3> </li> <li class="item"> <h3>潦水尽而寒潭清，烟光凝而暮山紫。</h3> </li> <li class="item"> <h3>落霞与孤鹜齐飞，秋水共长天一色。</h3> </li> <li class="item"> <img src="./1.jpg" /> </li> </ul></div>样式就不贴了，后面会给出源码。

然后我们一步步说明如何实现沙化效果。

首先，我们将每一个li元素的沙化封装成一个函数 disintegrate ，这个函数参数就是要沙化的目标元素，这里是li元素。

一、实现原理

简单来说就是将页面的元素先转化为canvas，然后提取出所有的像素点分别按照规律排布在32个canvas上面，，再将这些canvas转换为和原始元素大小一样的dom元素堆叠在一起，看起来就和原始元素一样的，然后将原始元素隐藏。最后将这些堆叠在一起的元素散开，就形成“沙化”的效果。

二、实现步骤

首先引入 html2canvas 插件。

由于需要将页面的元素转换成 canvas 图像，所以要用到 html2canvas 插件（插件可自行到官网下载，官网地址：https://html2canvas.hertzen.com/）。




<script src="./html2canvas.js"></script>接着将元素转化为32个canvas。

创建32个canvas（当然，个数越多，沙子就越细），把元素的每一个像素复制到这32个canvas上面，这个每个canvas上面都会有一部分元素的像素点，加起来就是整个元素所有的像素点。（具体的代码作用，参考每句代码的注释）




html2canvas(ele).then(dom => { const { width, height } = dom; // canvas宽高 let ctx = dom.getContext('2d'); // canvas绘图对象 // 返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。 let originalFrame = ctx.getImageData(0, 0, width, height); // 创建一个32个新的、空白的、指定大小的 ImageData 对象。 所有的像素在新对象中都是透明的。 let frames = []; for (let i = 0; i < COUNT; i++) { frames[i] = ctx.createImageData(width, height); } // 将canvas所有的数据随机复制到32个frames上面 for (x = 0; x < width; ++x) { for (y = 0; y < height; ++y) { // frames 的下表索引值。 // 不是一般的（从0到COUNT的）随机值，而是递增的随机数，为了将像素点先集中在前几个frame，然后再往后集中，否则32个frames钟的像素太分散。 var frameIndex = Math.floor((COUNT * (Math.random() + (2 * x) / width)) / 3); // imageData.data:描述一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。 // 数组的个数为 width*height*4，所以除了宽乘高以外还要乘以4 var pixelIndex = 4 * (y * width + x); // 之所以要循环4次是因为上面乘了4，得到的 pixelIndex 在 width*height*4 范围内会有一些空缺，所以要补上这些空缺，保证所有的canvas像素全部复制到32个frames上面 for (offset = 0; offset < 4; offset++) { frames[frameIndex].data[pixelIndex + offset] = originalFrame.data[pixelIndex + offset]; } } }});然后将这32个分布了不同像素点的 ImageData 对象转换成原始li元素大小的dom元素，用一个容器container来容纳，然后将容器覆盖到原始li元素的位置，现在就相当于每个li元素的位置是一个container元素，这个container元素内容是32个dom元素，这32个dom重叠起来的样子和原始li元素是一样的。




// 创建一个div容纳frameslet container = document.createElement('div');container.classList.add('container');container.style.width = `${width}px`;container.style.height = `${height}px`;// 将所有包含RGBA数据的frames绘制到绘图中，生成32份和原始dom一样的元素，只是内容不同，最后将这些元素放入container中。let frames2doms = frames.map((frameData, i) => { let domCopy = dom.cloneNode(true); domCopy.getContext('2d').putImageData(frameData, 0, 0); // 将数据从已有的 ImageData 对象绘制到位图的方法。 domCopy.style.transitionDelay = `${(1.35 * i) / frames.length}s`; //过渡效果开始前的delay时间(可自行调整)，使得frames先从下标小的开始运动。 container.appendChild(domCopy); return domCopy;});现在我们看到的效果和原始的是一样的，但是所有的li元素被隐藏了起来，显示的是由许许多多零散的元素拼凑出来的假象。

目前所有的零散元素是聚集在一起的，我们只需要有规律的让他们动起来，动到一定位置后再让它们不可见，感觉就像沙化的效果一般。




// 让所有的canvas动起来// 原始dom相对定位，container绝对定位ele.classList.add('disintegrated');ele.appendChild(container);ele.style.border = '0';container.offsetLeft; // 没有该句，则无法实现动画效果// 为32份不同内容的dom元素添加过渡效果（可自行调整）frames2doms.map(item => { let random = 2 * Math.PI * (Math.random() - 0.5); item.style.transform = ` rotate(${15 * (Math.random() - 0.5)}deg) translate(${60 * Math.cos(random)}px, ${30 * Math.sin(random)}px) rotate(${-15 * (Math.random() - 0.5)}deg) `; item.style.opacity = 0;});三、实验效果

点击按钮之后，每个li元素位置的32个dom旋转跳跃并闭上眼，哦不是逐渐消失。因为每个dom上都只有一些小点而且在向不同的方向扩散，所以感觉上就像沙化了。







四、注意事项

如果元素中有图片的话，需要使用服务器的方式加载，不能使用本地浏览器直接打开，否则包含图片的元素无法沙化。




参考链接

https://www.weibo.com/1727858283/HrxYFq0fG?type=comment




公众号后台回复“灭霸”获取源码和素材。

---

想看更多精彩内容，关注我获取更多前端技术与个人成长相关内容，我相信有趣的人终会相遇！如果觉得对你有帮助，也欢迎点赞，分享，加收藏！