国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從滅霸的無限手套說起

whatsns / 3630人閱讀

摘要:前兩天看到搜索有個(gè)彩蛋,搜索滅霸或者,點(diǎn)擊右邊的無限手套觸發(fā)彩蛋,打個(gè)響指,消滅一半的搜索結(jié)果條目,消失特效類似電影里的。但是百度的這個(gè)頁面樣式類是動態(tài)的,還要把整個(gè)內(nèi)容也輸出,而且很多圖片大概是經(jīng)過了什么處理,沒權(quán)限顯示不了,遂放棄。

本文不是技術(shù)文章,只是單純記錄下

最近婦聯(lián)4在熱映,先劇透兩個(gè)精彩片段。

前兩天看到Google搜索有個(gè)彩蛋,搜索滅霸或者thanos,點(diǎn)擊右邊的無限手套觸發(fā)彩蛋,打個(gè)響指,消滅一半的搜索結(jié)果條目,消失特效類似電影里的。

首先分析下這個(gè)彩蛋主要包括

點(diǎn)擊手套動畫效果

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

接下來是從以下方面著手

html頁面

DOM轉(zhuǎn)canvas

粒子效果

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

html頁面(扒網(wǎng)頁)

首先排除扒Google搜索頁面,因?yàn)榉?wù)器用的是國內(nèi)阿里云訪問不了。

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

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

DOM轉(zhuǎn)canvas

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

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

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

粒子效果比較難的部分是怎么調(diào)整各個(gè)參數(shù)到合適的值還要保證動畫不卡。其實(shí)js計(jì)算過程并不會讓動畫卡頓,主要瓶頸在渲染階段。

渲染部分原來用遍歷粒子直接繪制,但因?yàn)榱W虞^多,動畫看起來有點(diǎn)卡。

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()
  }
}

后來改成每次渲染時(shí),先得到空白畫布的圖像數(shù)據(jù),然后遍歷粒子,給圖像數(shù)據(jù)對應(yīng)的位置加上rgba,最后將圖像數(shù)據(jù)放回畫布。

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那個(gè)頁面是用了多個(gè)canvas,可以參考下面的粒子
https://codepen.io/birjolaxew...

其他

其他就是些細(xì)節(jié)調(diào)整,比如點(diǎn)擊手套的過渡動畫并加上音效,過渡時(shí)間和延遲要慢慢調(diào)到合適的使動畫與音效對應(yīng)。當(dāng)某個(gè)DOM要消失也要加上音效,并且頁面平滑滾動,使其位于屏幕中心,可以直接用scrollIntoView這個(gè)方法。

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

素材都可以從Google彩蛋頁里提取,還有其他一些細(xì)節(jié)就不逐一贅述了。

最后放上本次的demo

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104022.html

相關(guān)文章

  • 從滅霸的無限手套說起

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

    Mertens 評論0 收藏0
  • 漫話:如何給女朋友解釋滅霸的指響并不是真隨機(jī)"消滅"半數(shù)宇宙人口的?

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

    WalkerXu 評論0 收藏0
  • 十分鐘實(shí)現(xiàn)滅霸打響指灰飛煙滅的效果

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

    Wildcard 評論0 收藏0
  • 復(fù)仇者聯(lián)盟誰才是絕對 C 位?Python分析9萬條數(shù)據(jù)告訴你答案

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

    shiweifu 評論0 收藏0
  • 嘗試用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo

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

    kelvinlee 評論0 收藏0

發(fā)表評論

0條評論

whatsns

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<