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

kelvinlee 發布于2019-05-23 16:26 / 2565人閱讀

摘要：寫在前面滅霸打響指的消失效果。算是蹭熱度的一個我通過試圖去查看是如何實現的，也摳了一些音頻圖片資源下來。點擊一下手套，伴隨音效和響指的動畫，會有一半的英雄消失。翻轉時間，英雄又回來的效果是將原來的節點設置為可見的，并加了回復動畫。

寫在前面

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

demo

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

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

可以點擊下面的鏈接體驗一下

demos

細節

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

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

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

使用 html2canvas 庫將每一個英雄所在的 dom 節點渲染為一個 canvas 節點

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

創建一個跟選中的英雄所在的 dom 節點同一個位置、同樣的大小的容器覆蓋原 dom 節點

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

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

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

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

最后

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

云服務器 GPU云服務器 js 消失動畫效果 js實現f11的效果環信語音聊天vue demo vue 集成webrtc實時音視頻demo

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7239.html

十分鐘實現滅霸打響指灰飛煙滅的效果

摘要：全部文章列表從模塊化到私有倉庫搭建十分鐘實現滅霸打響指灰飛煙滅的效果是時候開發你自己的擴展插件了看過復仇者聯盟的都知道，滅霸作為計劃生育政策的堅定支持者和執行者，一個響指清除了宇宙中二分之一的生命。電影中被清除的生命灰飛煙滅的鏡頭很是酷炫，所以在復聯4上映后，那個不存在的網站google，推出了一個彩蛋，如果在搜索框搜索滅霸，會出現一個手套的按鈕，點擊后會讓網頁搜索結果消失一半。 showI...

Wildcard 2019-05-22 18:00 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
從滅霸的無限手套說起

摘要：前兩天看到搜索有個彩蛋，搜索滅霸或者，點擊右邊的無限手套觸發彩蛋，打個響指，消滅一半的搜索結果條目，消失特效類似電影里的。但是百度的這個頁面樣式類是動態的，還要把整個內容也輸出，而且很多圖片大概是經過了什么處理，沒權限顯示不了，遂放棄。本文不是技術文章，只是單純記錄下最近婦聯4在熱映，先劇透兩個精彩片段。showImg(https://segmentfault.com/img/bV...

whatsns 2019-08-23 17:14 評論0 收藏0