最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要介紹使用vue如何實現(xiàn)滅霸打響指英雄消失的效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家以成都網(wǎng)站建設、網(wǎng)頁設計、品牌設計、軟件運維、seo優(yōu)化排名、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為成都航空箱等眾行業(yè)中小客戶提供優(yōu)質的互聯(lián)網(wǎng)建站和軟件開發(fā)服務。

寫在前面

滅霸打響指的消失效果。效果來源于 Google 搜索“滅霸” 或者 “thanos”。算是蹭熱度的一個 Feature, 我通過 F12 試圖去查看是如何實現(xiàn)的，也摳了一些音頻、圖片資源下來。后來在 github 上找到了一個現(xiàn)有的項目 Thanos_Dust, 所以參考了部分它的代碼。 其實它的代碼已經(jīng)算比較完善了，在它的基礎上，我用 vue 來寫了一下，加了一些英雄，修復了一些 bug ，加了一些效果之類的。

demo

• 點擊一下手套，伴隨音效和響指的動畫，會有一半的英雄消失。

• 消失之后，再點一下，消失的英雄又會回來。

細節(jié)

隨機選取一半的英雄，是通過下面的算法進行選取的：

arr.sort(function() {
 return 0.5 - Math.random();
});

被選中的英雄灰飛煙滅的效果解釋：

1. 使用 html2canvas 庫將每一個英雄所在的 dom 節(jié)點渲染為一個 canvas 節(jié)點

2. 通過 generateFrames 方法，將整塊的 canvas 畫布圖像按像素分割成許多塊

3. 創(chuàng)建一個跟選中的英雄所在的 dom 節(jié)點同一個位置、同樣的大小的容器覆蓋原 dom 節(jié)點

4. 把第二步創(chuàng)建的塊繪制到新的畫布上，并都通過 appendChild 方法添加到第三步創(chuàng)建的父容器中

5. 隨機設置每一塊的 rotate 角度和 translate 像素，就能完成灰飛煙滅的效果

6. 將被覆蓋的英雄的 dom 節(jié)點設置為不可見的，就完成了響指操作。

翻轉時間，英雄又回來的效果是將原來的 dom 節(jié)點設置為可見的，并加了回復動畫。（ google 的原版恢復動畫是將 color 設置為 green ，因為這里沒什么文字效果并不明顯，就設置成了 background-color ）

以上是“使用vue如何實現(xiàn)滅霸打響指英雄消失的效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：使用vue如何實現(xiàn)滅霸打響指英雄消失的效果-創(chuàng)新互聯(lián)
標題鏈接：http://fisionsoft.com.cn/article/dgeohg.html