從滅霸的無限手套說起

Mertens 發布于2019-07-01 12:44 / 3079人閱讀

摘要：前兩天看到搜索有個彩蛋，搜索滅霸或者，點擊右邊的無限手套觸發彩蛋，打個響指，消滅一半的搜索結果條目，消失特效類似電影里的。但是百度的這個頁面樣式類是動態的，還要把整個內容也輸出，而且很多圖片大概是經過了什么處理，沒權限顯示不了，遂放棄。

本文不是技術文章，只是單純記錄下

最近婦聯4在熱映，先劇透兩個精彩片段。

前兩天看到Google搜索有個彩蛋，搜索滅霸或者thanos，點擊右邊的無限手套觸發彩蛋，打個響指，消滅一半的搜索結果條目，消失特效類似電影里的。

首先分析下這個彩蛋主要包括

點擊手套動畫效果

消失的搜索條目的粒子效果

接下來是從以下方面著手

html頁面

DOM轉canvas

粒子效果

其他包括音效、頁面平滑滾動等

html頁面（扒網頁）

首先排除扒Google搜索頁面，因為服務器用的是國內阿里云訪問不了。

然后就打算扒百度的搜索頁，用的是PHP程序，我知道的能夠獲取頁面代碼的有file_get_content和cURL函數，雖然拿到了頁面代碼，但是只要搜索結果那些DOM的話用正則比較麻煩，搜了下找到phpQuery庫，它能像jQuery操作那樣拿到指定DOM，和Node.js的cheerio包類似。但是百度的這個頁面樣式類是動態的，還要把整個style內容也輸出，而且很多圖片大概是經過了什么處理，沒權限顯示不了，遂放棄。

接著扒斗魚的直播列表頁，返回一堆亂碼，實力告退了。最后選擇了相似的企鵝電競直播列表頁，頁面算是搞定了。

DOM轉canvas

前端有html2canvas和dom-to-image兩個庫可以把頁面指定元素轉化為畫布或圖片，html2canvas比較有名些，早期我也是用這個庫做前端截圖功能（https://imusic.github.io/clip/），但是它對CSS3的處理并不好，后來我發現了dom-to-image這個庫，它對CSS3的處理就比較好了，而且體積更小，所以又用這個庫替換了（https://demo.vczhan.com/clip/）。

不過因為要轉化的內容里有跨域的圖片，canvas對此做了限制，我們需要對圖片做代理處理。dom-to-image這個庫并沒有提供相關的代理插件，最后還是用html2canvas這個庫。頁面沒有復雜的元素，并且這個庫近來做了更新，對CSS3支持好了些，作者還提供了兩種語言的代理，分別是Python版本的和Node.js版本的，不過我選擇了其他人寫的PHP版本。前端只要配置相關參數就可以。服務器端則會在文件目錄下新建cache目錄存放圖片并返回給前端渲染到畫布上。（不知能否改成不存儲圖片文件而是改成輸出base64或者blob數據）

html2canvas(node, {
  proxy: "html2canvasproxy.php"
}).then(canvas => {
  // do stuff
})

粒子效果

粒子效果比較難的部分是怎么調整各個參數到合適的值還要保證動畫不卡。其實js計算過程并不會讓動畫卡頓，主要瓶頸在渲染階段。

渲染部分原來用遍歷粒子直接繪制，但因為粒子較多，動畫看起來有點卡。

render() {
  context.clearRect(0, 0, sw, sh)

  let particles = this.particles

  for (let i = 0, particle; particle = particles[i++];) {
    if (particle.state === "dead") continue

    context.save()
    context.translate(particle.x, particle.y)

    context.fillStyle = particle.color
    context.globalAlpha = particle.alpha
    context.beginPath()
    context.fillRect(0, 0, 1, 1)
    context.restore()
  }
}

后來改成每次渲染時，先得到空白畫布的圖像數據，然后遍歷粒子，給圖像數據對應的位置加上rgba，最后將圖像數據放回畫布。

render() {
  // context.clearRect(0, 0, sw, sh)
  let particles = this.particles

  const imageData = context.createImageData(sw, sh)
  const buffer32 = new Uint32Array(imageData.data.buffer)

  for (let i = 0, particle; particle = particles[i++];) {
    if (particle.state === "dead") continue

    const {x, y, color: {r, g, b}, alpha: a} = particle
    const pos = y * sw + x

    buffer32[pos] = r | (g << 8) | (b << 16) | (a << 24)
  }

  context.putImageData(imageData, 0, 0)
}

Google那個頁面是用了多個canvas，可以參考下面的粒子
https://codepen.io/birjolaxew...

其他

其他就是些細節調整，比如點擊手套的過渡動畫并加上音效，過渡時間和延遲要慢慢調到合適的使動畫與音效對應。當某個DOM要消失也要加上音效，并且頁面平滑滾動，使其位于屏幕中心，可以直接用scrollIntoView這個方法。

node.scrollIntoView({behavior: "smooth", block: "center"})

素材都可以從Google彩蛋頁里提取，還有其他一些細節就不逐一贅述了。

最后放上本次的demo

GPU云服務器云服務器滅霸說起說起分布式存儲說起分布式存儲大家可能都會覺得這是一個

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31369.html

從滅霸的無限手套說起

摘要：前兩天看到搜索有個彩蛋，搜索滅霸或者，點擊右邊的無限手套觸發彩蛋，打個響指，消滅一半的搜索結果條目，消失特效類似電影里的。但是百度的這個頁面樣式類是動態的，還要把整個內容也輸出，而且很多圖片大概是經過了什么處理，沒權限顯示不了，遂放棄。本文不是技術文章，只是單純記錄下最近婦聯4在熱映，先劇透兩個精彩片段。showImg(https://segmentfault.com/img/bV...

whatsns 2019-08-23 17:14 評論0 收藏0
漫話：如何給女朋友解釋滅霸的指響并不是真隨機"消滅"半數宇宙人口的？

摘要：軟件實現的是偽隨機數。有限狀態機不能產生真正的隨機數的。復聯中，滅霸打了指響之后，復仇者聯盟中存活和死亡的名單其實并不是隨機的。可見，滅霸的指響抹除過程并不是隨機的。綜上，滅霸的指響抹除過程不符合隨機性不可預測性以及不可復現性。showImg(https://user-gold-cdn.xitu.io/2019/5/7/16a91fc63239db4d);周末，陪女朋友去電影院看了《復仇者聯...

WalkerXu 2019-05-23 17:31 評論0 收藏0
十分鐘實現滅霸打響指灰飛煙滅的效果

摘要：全部文章列表從模塊化到私有倉庫搭建十分鐘實現滅霸打響指灰飛煙滅的效果是時候開發你自己的擴展插件了看過復仇者聯盟的都知道，滅霸作為計劃生育政策的堅定支持者和執行者，一個響指清除了宇宙中二分之一的生命。電影中被清除的生命灰飛煙滅的鏡頭很是酷炫，所以在復聯4上映后，那個不存在的網站google，推出了一個彩蛋，如果在搜索框搜索滅霸，會出現一個手套的按鈕，點擊后會讓網頁搜索結果消失一半。 showI...

Wildcard 2019-05-22 18:00 評論0 收藏0
復仇者聯盟誰才是絕對 C 位？Python分析9萬條數據告訴你答案

摘要：數據庫文件已經超過了了。復聯從開始便是漫威宇宙各路超級英雄的集結，到現在的第部，更是全英雄的匯聚。所以，滅霸出現的次數居然高于了鋼鐵俠。情感分析，又稱為意見挖掘傾向性分析等。 showImg(https://segmentfault.com/img/remote/1460000019095022); 作者 | 羅昭成責編 | 唐小引《復聯 4》國內上映第十天，程序員的江湖里開始流傳這...

shiweifu 2019-07-31 10:23 評論0 收藏0
嘗試用 vue 實現滅霸打響指英雄消失的效果 demo

摘要：寫在前面滅霸打響指的消失效果。算是蹭熱度的一個我通過試圖去查看是如何實現的，也摳了一些音頻圖片資源下來。點擊一下手套，伴隨音效和響指的動畫，會有一半的英雄消失。翻轉時間，英雄又回來的效果是將原來的節點設置為可見的，并加了回復動畫。寫在前面滅霸打響指的消失效果。效果來源于 Google 搜索滅霸或者 thanos。算是蹭熱度的一個 Feature, 我通過 F12 試圖去查看是如何實現的...

kelvinlee 2019-05-23 16:26 評論0 收藏0