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