彈指間，網頁灰飛煙滅 Google滅霸彩蛋實現

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

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

而今天要說的主題自然和漫威有關，是乙個google的小彩蛋。想必大家已經知道了，在google中搜尋「滅霸」，然後在右側點選的「無限手套」，頁面的一些搜尋項就會隨機性像沙子一樣的消失（後面統稱沙化效果），特別的炫酷。有不知道的可以看下面的**：

首先我製作了乙個模板如下，點選按鈕後，列表隨機沙化（手套的效果是很多的合成，這裡就不處理了）。

模板**如下：

啪嗒！

樣式就不貼了，後面會給出原始碼。

然後我們一步步說明如何實現沙化效果。

首先，我們將每乙個li元素的沙化封裝成乙個函式 disintegrate ，這個函式引數就是要沙化的目標元素，這裡是li元素。

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

接著將元素轉化為32個canvas。

建立32個canvas（當然，個數越多，沙子就越細），把元素的每乙個畫素複製到這32個canvas上面，這個每個canvas上面都會有一部分元素的畫素點，加起來就是整個元素所有的畫素點。（具體的**作用，參考每句**的注釋）

html2canvas(ele).then(dom =>  = 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++) 
// 將canvas所有的資料隨機複製到32個frames上面
for (x = 0; x < width; ++x) }}
});

然後將這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 = `$px`;
container.style.height = `$px`;
// 將所有包含rgba資料的frames繪製到繪圖中，生成32份和原始dom一樣的元素，只是內容不同，最後將這些元素放入container中。
let frames2doms = frames.map((framedata, i) => s`; //過渡效果開始前的delay時間(可自行調整)，使得frames先從下標小的開始運動。
return domcopy;
});

現在我們看到的效果和原始的是一樣的，但是所有的li元素被隱藏了起來，顯示的是由許許多多零散的元素拼湊出來的假象。目前所有的零散元素是聚集在一起的，我們只需要有規律的讓他們動起來，動到一定位置後再讓它們不可見，感覺就像沙化的效果一般。

// 讓所有的canvas動起來
// 原始dom相對定位，container絕對定位
ele.classlist.add('disintegrated');
ele.style.border = '0';
container.offsetleft; // 沒有該句，則無法實現動畫效果
// 為32份不同內容的dom元素新增過渡效果（可自行調整）
frames2doms.map(item => deg)
translate($px, $px)
rotate($deg) 
`;item.style.opacity = 0;
});

點選按鈕之後，每個li元素位置的32個dom旋轉跳躍並閉上眼，哦不是逐漸消失。因為每個dom上都只有一些小點而且在向不同的方向擴散，所以感覺上就像沙化了。

如果元素中有的話，需要使用伺服器的方式載入，不能使用本地瀏覽器直接開啟，否則包含的元素無法沙化。

彈指間，網頁灰飛煙滅 Google滅霸彩蛋實現

效能只在彈指間

Elemites 揮指間檣櫓灰飛煙滅

Google是這樣抓取網頁的？Google幽靈現象

彈指間，網頁灰飛煙滅 Google滅霸彩蛋實現

效能只在彈指間

Elemites 揮指間檣櫓灰飛煙滅

Google是這樣抓取網頁的？Google幽靈現象

相關推薦