摘要:前兩天看到搜索有個(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_content和cURL函數(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
摘要:前兩天看到搜索有個(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...
摘要:軟件實(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)...
摘要:全部文章列表從模塊化到私有倉庫搭建十分鐘實(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...
摘要:數(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)上映第十天,程序員的江湖里開始流傳這...
摘要:寫在前面滅霸打響指的消失效果。算是蹭熱度的一個(gè)我通過試圖去查看是如何實(shí)現(xiàn)的,也摳了一些音頻圖片資源下來。點(diǎn)擊一下手套,伴隨音效和響指的動畫,會有一半的英雄消失。翻轉(zhuǎn)時(shí)間,英雄又回來的效果是將原來的節(jié)點(diǎn)設(shè)置為可見的,并加了回復(fù)動畫。 寫在前面 滅霸打響指的消失效果。效果來源于 Google 搜索滅霸 或者 thanos。算是蹭熱度的一個(gè) Feature, 我通過 F12 試圖去查看是如何實(shí)現(xiàn)的...
閱讀 4291·2021-09-24 09:47
閱讀 1183·2021-09-03 10:33
閱讀 2062·2019-08-30 11:13
閱讀 1028·2019-08-30 10:49
閱讀 1752·2019-08-29 16:13
閱讀 2045·2019-08-29 11:28
閱讀 3088·2019-08-26 13:31
閱讀 3631·2019-08-23 17:14