Daotin's Blog

一、实现原理
二、实现步骤
三、实验效果
四、注意事项

不知道大家有没有看这段时间最火的一部电影《复仇者联盟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容纳frames
let 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

（完）

This site is open source. Improve this page.