寫(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>

1. 使用 html2canvas 庫(kù)將每一個(gè)英雄所在的 dom 節(jié)點(diǎn)渲染為一個(gè) canvas 節(jié)點(diǎn)
2. 通過(guò) generateFrames 方法，將整塊的 canvas 畫(huà)布圖像按像素分割成許多塊
3. 創(chuàng)建一個(gè)跟選中的英雄所在的 dom 節(jié)點(diǎn)同一個(gè)位置、同樣的大小的容器覆蓋原 dom 節(jié)點(diǎn)
4. 把第二步創(chuàng)建的塊繪制到新的畫(huà)布上，并都通過(guò) appendChild 方法添加到第三步創(chuàng)建的父容器中
5. 隨機(jī)設(shè)置每一塊的 rotate 角度和 translate 像素，就能完成灰飛煙滅的效果
6. 將被覆蓋的英雄的 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 地址.

總結(jié)

以上所述是小編給大家介紹的使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論