彈指間，網(wǎng)頁灰飛煙滅——Google滅霸彩蛋實現(xiàn)

時間：2023-05-18 22:36:02 | 來源：網(wǎng)站運營

時間：2023-05-18 22:36:02 來源：網(wǎng)站運營

彈指間，網(wǎng)頁灰飛煙滅——Google滅霸彩蛋實現(xiàn)：

這是之前在公眾號寫的一篇文章，我覺得蠻有意思，這里再回顧下。

大家好，我是前端隊長Daotin，想要獲取更多前端精彩內(nèi)容，關(guān)注我，解鎖前端成長新姿勢。

以下正文：

閱讀本文大概需要 12 分鐘。

不知道大家有沒有看這段時間最火的一部電影《復(fù)仇者聯(lián)盟4：終局之戰(zhàn)》，作為漫威迷的我還沒看，為什么呢？因為太貴了，剛上映的那周，一張IMAX廳的票價已經(jīng)達到了299的天價，作為搬磚民工是舍不得花這么高的錢來看一場電影的，太奢侈了，當然也可能我是個假漫威迷吧，哈哈哈哈逃~

我剛看下現(xiàn)在的票價，IMAX廳是89元，已經(jīng)接近正常，雖然還是些許偏高，但是已經(jīng)可以接受了。對于看電影，我并不是那么崇尚看首映，或者非要第一時間看到，但是對于喜歡的電影我一定會找個最佳的位置觀看，現(xiàn)在票價合理，最佳觀影區(qū)充足，正是看電影的好時機。從這方面看，我可能只算是一個漫威愛好者，而絕不是一個狂熱者。

而今天要說的主題自然和漫威有關(guān)，是一個Google的小彩蛋。想必大家已經(jīng)知道了，在Google中搜索“滅霸”，然后在右側(cè)點擊的“無限手套”，頁面的一些搜索項就會隨機性像沙子一樣的消失（后面統(tǒng)稱沙化效果），特別的炫酷。有不知道的可以看下面的視頻：

我覺得特別有意思，就參考了一些文章，實現(xiàn)了類似上面的沙化效果。

首先我制作了一個模板如下，點擊按鈕后，列表隨機沙化（手套的效果是很多圖片的合成，這里就不處理了）。







模板代碼如下：




<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>樣式就不貼了，后面會給出源碼。

然后我們一步步說明如何實現(xiàn)沙化效果。

首先，我們將每一個li元素的沙化封裝成一個函數(shù) disintegrate ，這個函數(shù)參數(shù)就是要沙化的目標元素，這里是li元素。

一、實現(xiàn)原理

簡單來說就是將頁面的元素先轉(zhuǎn)化為canvas，然后提取出所有的像素點分別按照規(guī)律排布在32個canvas上面，，再將這些canvas轉(zhuǎn)換為和原始元素大小一樣的dom元素堆疊在一起，看起來就和原始元素一樣的，然后將原始元素隱藏。最后將這些堆疊在一起的元素散開，就形成“沙化”的效果。

二、實現(xiàn)步驟

首先引入 html2canvas 插件。

由于需要將頁面的元素轉(zhuǎn)換成 canvas 圖像，所以要用到 html2canvas 插件（插件可自行到官網(wǎng)下載，官網(wǎng)地址：https://html2canvas.hertzen.com/）。




<script src="./html2canvas.js"></script>接著將元素轉(zhuǎn)化為32個canvas。

創(chuàng)建32個canvas（當然，個數(shù)越多，沙子就越細），把元素的每一個像素復(fù)制到這32個canvas上面，這個每個canvas上面都會有一部分元素的像素點，加起來就是整個元素所有的像素點。（具體的代碼作用，參考每句代碼的注釋）




html2canvas(ele).then(dom => { const { width, height } = dom; // canvas寬高 let ctx = dom.getContext('2d'); // canvas繪圖對象 // 返回一個ImageData對象，用來描述canvas區(qū)域隱含的像素數(shù)據(jù)，這個區(qū)域通過矩形表示，起始點為(sx, sy)、寬為sw、高為sh。 let originalFrame = ctx.getImageData(0, 0, width, height); // 創(chuàng)建一個32個新的、空白的、指定大小的 ImageData 對象。 所有的像素在新對象中都是透明的。 let frames = []; for (let i = 0; i < COUNT; i++) { frames[i] = ctx.createImageData(width, height); } // 將canvas所有的數(shù)據(jù)隨機復(fù)制到32個frames上面 for (x = 0; x < width; ++x) { for (y = 0; y < height; ++y) { // frames 的下表索引值。 // 不是一般的（從0到COUNT的）隨機值，而是遞增的隨機數(shù)，為了將像素點先集中在前幾個frame，然后再往后集中，否則32個frames鐘的像素太分散。 var frameIndex = Math.floor((COUNT * (Math.random() + (2 * x) / width)) / 3); // imageData.data:描述一個一維數(shù)組，包含以 RGBA 順序的數(shù)據(jù)，數(shù)據(jù)使用 0 至 255（包含）的整數(shù)表示。 // 數(shù)組的個數(shù)為 width*height*4，所以除了寬乘高以外還要乘以4 var pixelIndex = 4 * (y * width + x); // 之所以要循環(huán)4次是因為上面乘了4，得到的 pixelIndex 在 width*height*4 范圍內(nèi)會有一些空缺，所以要補上這些空缺，保證所有的canvas像素全部復(fù)制到32個frames上面 for (offset = 0; offset < 4; offset++) { frames[frameIndex].data[pixelIndex + offset] = originalFrame.data[pixelIndex + offset]; } } }});然后將這32個分布了不同像素點的 ImageData 對象轉(zhuǎn)換成原始li元素大小的dom元素，用一個容器container來容納，然后將容器覆蓋到原始li元素的位置，現(xiàn)在就相當于每個li元素的位置是一個container元素，這個container元素內(nèi)容是32個dom元素，這32個dom重疊起來的樣子和原始li元素是一樣的。




// 創(chuàng)建一個div容納frameslet container = document.createElement('div');container.classList.add('container');container.style.width = `${width}px`;container.style.height = `${height}px`;// 將所有包含RGBA數(shù)據(jù)的frames繪制到繪圖中，生成32份和原始dom一樣的元素，只是內(nèi)容不同，最后將這些元素放入container中。let frames2doms = frames.map((frameData, i) => { let domCopy = dom.cloneNode(true); domCopy.getContext('2d').putImageData(frameData, 0, 0); // 將數(shù)據(jù)從已有的 ImageData 對象繪制到位圖的方法。 domCopy.style.transitionDelay = `${(1.35 * i) / frames.length}s`; //過渡效果開始前的delay時間(可自行調(diào)整)，使得frames先從下標小的開始運動。 container.appendChild(domCopy); return domCopy;});現(xiàn)在我們看到的效果和原始的是一樣的，但是所有的li元素被隱藏了起來，顯示的是由許許多多零散的元素拼湊出來的假象。

目前所有的零散元素是聚集在一起的，我們只需要有規(guī)律的讓他們動起來，動到一定位置后再讓它們不可見，感覺就像沙化的效果一般。




// 讓所有的canvas動起來// 原始dom相對定位，container絕對定位ele.classList.add('disintegrated');ele.appendChild(container);ele.style.border = '0';container.offsetLeft; // 沒有該句，則無法實現(xiàn)動畫效果// 為32份不同內(nèi)容的dom元素添加過渡效果（可自行調(diào)整）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旋轉(zhuǎn)跳躍并閉上眼，哦不是逐漸消失。因為每個dom上都只有一些小點而且在向不同的方向擴散，所以感覺上就像沙化了。







四、注意事項

如果元素中有圖片的話，需要使用服務(wù)器的方式加載，不能使用本地瀏覽器直接打開，否則包含圖片的元素無法沙化。




參考鏈接

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




公眾號后臺回復(fù)“滅霸”獲取源碼和素材。

---

想看更多精彩內(nèi)容，關(guān)注我獲取更多前端技術(shù)與個人成長相關(guān)內(nèi)容，我相信有趣的人終會相遇！如果覺得對你有幫助，也歡迎點贊，分享，加收藏！