嘗試用 vue 實現滅霸打響指英雄消失的效果 demo

寫在前面

滅霸打響指的消失效果。效果來源於 Google 搜尋“滅霸” 或者 “thanos”。算是蹭熱度的一個 Feature, 我通過 F12 試圖去檢視是如何實現的，也摳了一些音訊、圖片資源下來。後來在 github 上找到了一個現有的專案 Thanos_Dust, 所以參考了部分它的程式碼。 其實它的程式碼已經算比較完善了，在它的基礎上，我用 vue 來寫了一下，加了一些英雄，修復了一些 bug ，加了一些效果之類的。

demo

• 點選一下手套，伴隨音效和響指的動畫，會有一半的英雄消失。
• 消失之後，再點一下，消失的英雄又會回來。

可以點選下面的連結體驗一下

demos

細節

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

  arr.sort(function() {
    return 0.5 - Math.random();
  });
  複製程式碼

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

  1. 使用 html2canvas 庫將每一個英雄所在的 dom 節點渲染為一個 canvas 節點
  2. 通過 generateFrames 方法，將整塊的 canvas 畫布影像按畫素分割成許多塊
  3. 建立一個跟選中的英雄所在的 dom 節點同一個位置、同樣的大小的容器覆蓋原 dom 節點
  4. 把第二步建立的塊繪製到新的畫布上，並都通過 appendChild 方法新增到第三步建立的父容器中
  5. 隨機設定每一塊的 rotate 角度和 translate 畫素，就能完成灰飛煙滅的效果
  6. 將被覆蓋的英雄的 dom 節點設定為不可見的，就完成了響指操作。

• 翻轉時間，英雄又回來的效果是將原來的 dom 節點設定為可見的，並加了回覆動畫。（ google 的原版恢復動畫是將 color 設定為 green ，因為這裡沒什麼文字效果並不明顯，就設定成了 background-color ）

最後

整個過程其實跟 vue 沒什麼關係，無論用什麼前端技術棧都可以。以前也沒有接觸過 canvas ，似乎覺得還有點意思， 後面可能慢慢還會做一些改動，會繼續學習 canvas 。最後附上 github 地址.