資訊專(zhuān)欄INFORMATION COLUMN
摘要：寫(xiě)在前面滅霸打響指的消失效果。算是蹭熱度的一個(gè)我通過(guò)試圖去查看是如何實(shí)現(xiàn)的，也摳了一些音頻圖片資源下來(lái)。點(diǎn)擊一下手套，伴隨音效和響指的動(dòng)畫(huà)，會(huì)有一半的英雄消失。翻轉(zhuǎn)時(shí)間，英雄又回來(lái)的效果是將原來(lái)的節(jié)點(diǎn)設(shè)置為可見(jiàn)的，并加了回復(fù)動(dòng)畫(huà)。
寫(xiě)在前面滅霸打響指的消失效果。效果來(lái)源于 Google 搜索“滅霸” 或者 “thanos”。算是蹭熱度的一個(gè) Feature, 我通過(guò) F12 試圖去查看是如何實(shí)現(xiàn)的，也摳了一些音頻、圖片資源下來(lái)。后來(lái)在 github 上找到了一個(gè)現(xiàn)有的項(xiàng)目 Thanos_Dust, 所以參考了部分它的代碼。 其實(shí)它的代碼已經(jīng)算比較完善了，在它的基礎(chǔ)上，我用 vue 來(lái)寫(xiě)了一下，加了一些英雄，修復(fù)了一些 bug ，加了一些效果之類(lèi)的。
demo
點(diǎn)擊一下手套，伴隨音效和響指的動(dòng)畫(huà)，會(huì)有一半的英雄消失。
消失之后，再點(diǎn)一下，消失的英雄又會(huì)回來(lái)。
可以點(diǎn)擊下面的鏈接體驗(yàn)一下
demos
細(xì)節(jié)
隨機(jī)選取一半的英雄，是通過(guò)下面的算法進(jìn)行選取的：
arr.sort(function() {
return 0.5 - Math.random();
});
被選中的英雄灰飛煙滅的效果解釋?zhuān)?/p>
使用 html2canvas 庫(kù)將每一個(gè)英雄所在的 dom 節(jié)點(diǎn)渲染為一個(gè) canvas 節(jié)點(diǎn)
通過(guò) generateFrames 方法，將整塊的 canvas 畫(huà)布圖像按像素分割成許多塊
創(chuàng)建一個(gè)跟選中的英雄所在的 dom 節(jié)點(diǎn)同一個(gè)位置、同樣的大小的容器覆蓋原 dom 節(jié)點(diǎn)
把第二步創(chuàng)建的塊繪制到新的畫(huà)布上，并都通過(guò) appendChild 方法添加到第三步創(chuàng)建的父容器中
隨機(jī)設(shè)置每一塊的 rotate 角度和 translate 像素，就能完成灰飛煙滅的效果
將被覆蓋的英雄的 dom 節(jié)點(diǎn)設(shè)置為不可見(jiàn)的，就完成了響指操作。
翻轉(zhuǎn)時(shí)間，英雄又回來(lái)的效果是將原來(lái)的 dom 節(jié)點(diǎn)設(shè)置為可見(jiàn)的，并加了回復(fù)動(dòng)畫(huà)。（ google 的原版恢復(fù)動(dòng)畫(huà)是將 color 設(shè)置為 green ，因?yàn)檫@里沒(méi)什么文字效果并不明顯，就設(shè)置成了 background-color ）
最后整個(gè)過(guò)程其實(shí)跟 vue 沒(méi)什么關(guān)系，無(wú)論用什么前端技術(shù)棧都可以。以前也沒(méi)有接觸過(guò) canvas ，似乎覺(jué)得還有點(diǎn)意思， 后面可能慢慢還會(huì)做一些改動(dòng)，會(huì)繼續(xù)學(xué)習(xí) canvas 。最后附上 github 地址.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/7239.html
摘要：全部文章列表從模塊化到私有倉(cāng)庫(kù)搭建十分鐘實(shí)現(xiàn)滅霸打響指灰飛煙滅的效果是時(shí)候開(kāi)發(fā)你自己的擴(kuò)展插件了看過(guò)復(fù)仇者聯(lián)盟的都知道，滅霸作為計(jì)劃生育政策的堅(jiān)定支持者和執(zhí)行者，一個(gè)響指清除了宇宙中二分之一的生命。電影中被清除的生命灰飛煙滅的鏡頭很是酷炫，所以在復(fù)聯(lián)4上映后，那個(gè)不存在的網(wǎng)站google，推出了一個(gè)彩蛋，如果在搜索框搜索滅霸，會(huì)出現(xiàn)一個(gè)手套的按鈕，點(diǎn)擊后會(huì)讓網(wǎng)頁(yè)搜索結(jié)果消失一半。 showI...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：前兩天看到搜索有個(gè)彩蛋，搜索滅霸或者，點(diǎn)擊右邊的無(wú)限手套觸發(fā)彩蛋，打個(gè)響指，消滅一半的搜索結(jié)果條目，消失特效類(lèi)似電影里的。但是百度的這個(gè)頁(yè)面樣式類(lèi)是動(dòng)態(tài)的，還要把整個(gè)內(nèi)容也輸出，而且很多圖片大概是經(jīng)過(guò)了什么處理，沒(méi)權(quán)限顯示不了，遂放棄。 本文不是技術(shù)文章，只是單純記錄下 最近婦聯(lián)4在熱映，先劇透兩個(gè)精彩片段。showImg(https://segmentfault.com/img/bV...
閱讀 991·2021-09-07 09:58
閱讀 1558·2021-09-07 09:58
閱讀 2941·2021-09-04 16:40
閱讀 2550·2019-08-30 15:55
閱讀 2484·2019-08-30 15:54
閱讀 1414·2019-08-30 15:52
閱讀 483·2019-08-30 10:49
閱讀 2651·2019-08-29 13:21
