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

Wildcard 發布于2019-05-22 18:00 / 2040人閱讀

摘要：全部文章列表從模塊化到私有倉庫搭建十分鐘實現滅霸打響指灰飛煙滅的效果是時候開發你自己的擴展插件了

看過復仇者聯盟的都知道，滅霸作為計劃生育政策的堅定支持者和執行者，一個響指清除了宇宙中二分之一的生命。電影中被清除的生命灰飛煙滅的鏡頭很是酷炫，所以在復聯4上映后，那個不存在的網站google，推出了一個彩蛋，如果在搜索框搜索滅霸，會出現一個手套的按鈕，點擊后會讓網頁搜索結果消失一半。

恩~這很谷歌。
效果雖然酷炫但其實并不復雜，這里帶著大家一起來實現一下，網上也已經有了一些教程(Thanos Snap Effect JavaScript Tutorial)，這里稍微加點東西，滅霸的響指畢竟是真的打而不是用鼠標點按鈕，所以我會加上音量檢測，當檢測到響指的聲音（其實是超過某個音量預值）就觸發效果，然后就可以愉快的向朋友裝逼了。

源代碼地址 準備開始

我們這里只用一個圖片元素,HTML結構如下

<body>
     <div class="content">
            <div id="image">
                
                <img
                    src="https://i.loli.net/2019/05/06/5ccffa469ec52.jpg"
                    width="400"
                />
            div>
    div>
body>

動畫的實現

將html轉成canvas，為后面處理做準備。這里我們使用html2canvas庫，可以將html中的dom節點繪制成canvas，相當于對這個dom節點進行截圖，使用很簡單，代碼如下（網頁生成海報圖片就可以用這個庫來做）。

const imageBox = document.querySelector("#image")
html2canvas(imageBox, {
    backgroundColor: "transparent" //背景設置為透明
}).then(canvas=>{
    //處理canvas的代碼（注意.then這種寫法只有在新版本的html2canvas可用）
});

這里我們拿到了包含了圖片信息的canvas后，要通過canvas的getImageData來獲取到canvas畫布上的每個像素的信息。

 //處理canvas的代碼
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(
    0,
    0,
    canvas.width,
    canvas.height
);
const pixelArr = imageData.data; //像素信息

圖像信息被存儲在一個Uint8ClampedArray（8位無符號整型固定數組）中，這個數組中的值為0到255的整數，按圖片中像素從左到右從上到下的順序，每4個數字表示一個像素信息，這4個數字分別表示rgba（r-紅色，g-綠，b-藍色，a-透明度）的四個值。比如這樣一個圖片

它的像素信息即為

[0,0,0,255,255,255,255,255,255,0,0,255,0,255,0,255]

接下來是最關鍵的一步，創建多個同等長度的數組，填充上透明像素信息(數組中的值全是0即可)，然后將之前拿到的圖像像素信息“隨機”分布到這些數組中，這些數組就包含了原圖像的部分內容,原教程里面用到了一個隨機數生成的庫chance來控制隨機數出現概率，直接使用完全隨機數也沒有問題。

//創建一個和圖像信息數組長度相同的數組并填充0（相當于一個和原圖像尺寸相同的透明圖像）
const data = pixelArr.slice(0).fill(0); 
//創建透明圖像數組的個數，不能太小也不能太大。
const canvasCount = 30;
//將透明圖像數組復制多個
const imageDataArray = Array.from({ length: canvasCount }, () =>
    data.slice(0)
);
//將原圖像上的像素信息隨機分配進不同的透明圖象上，位置保持不變
for (let i = 0; i < pixelArr.length; i += 4) {
    const p = Math.floor((i / pixelArr.length) * canvasCount);
    //a為隨機選出要放入像素信息的數組
    const a = imageDataArray[Math.floor(Math.random() * canvasCount];
    //將像素信息放入隨機到的透明圖像數組中覆蓋
    a[i] = pixelArr[i];
    a[i + 1] = pixelArr[i + 1];
    a[i + 2] = pixelArr[i + 2];
    a[i + 3] = pixelArr[i + 3];
}

當canvasCount為3時效果如下：
原始圖片canvas

生成的包含原圖部分像素的3個canvas

canvasCount越大，生成的canvas越多，分配到每個canvas上面的像素就越少，飄的就越散。
4. 接下來就非常簡單了，隱藏掉原始圖像，為生成的canvas添加飄散動畫就可以了，飄散動畫主要組成就是高斯模糊，位移，旋轉，透明度變化，具體代碼這里就不寫了，可以在demo源代碼中看到，最終效果如下。

響指觸發

灰飛煙滅的動畫已經完成，接下來是如何觸發這段動畫，文章開始就說過谷歌搜索上的原始效果是通過點擊按鈕觸發，而我們通過麥克風實時檢測輸入音量，當打響指時（音量達到一定大小）觸發動畫。

首先要確保你的設備有麥克風等聲音輸入裝置，然后監測并獲取設備，如果有麥克風設備，網頁上會彈出授權提示。

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // 獲取用戶的 media 信息
        navigator.mediaDevices
            .getUserMedia({ audio: true })
            .then(stream => {
                //音頻處理代碼
            })
            .catch(error => {
                mystatus.innerHTML = "獲取音頻時好像出了點問題。" + error;
            });
} else {
        mystatus.innerHTML = "不支持獲取媒體接口";
}

音頻處理代碼

// 當輸入音量超過此值時，表示檢測大音量輸入(響指聲)
const TRIGGER_VALUE = 0.9; 
// 將麥克風的聲音輸入這個對象
mediaStreamSource = audioContext.createMediaStreamSource(
    stream
);
// 創建一個音頻分析對象，采樣的緩沖區大小為4096，輸入和輸出都是單聲道
scriptProcessor = audioContext.createScriptProcessor(
    4096,
    1,
    1
);
// 將該分析對象與麥克風音頻進行連接
mediaStreamSource.connect(scriptProcessor);
// 此舉無甚效果，僅僅是因為解決 Chrome 自身的 bug
scriptProcessor.connect(audioContext.destination);

// 開始處理音頻
scriptProcessor.onaudioprocess = function(e) {
    // 獲得緩沖區的輸入音頻，轉換為包含了PCM通道數據的32位浮點數組
    let buffer = e.inputBuffer.getChannelData(0);
    // 獲取緩沖區中最大的音量值
    let maxVal = Math.max.apply(Math, buffer);
    // 顯示音量值
    if (maxVal > TRIGGER_VALUE) {
        //灰飛煙滅動畫
        start(); 
    }
};

最后

一切搞定，就這么簡單可以拿去裝逼了，不過我同事問我，只能監測音量大小嗎，這樣的話不管是咳嗽聲，大喊一聲，啪啪啪聲都可以觸發，能不能真的只檢測響指的聲音。嗯~這是個好問題，大家一起想想吧。

全部文章列表

從模塊化到NPM私有倉庫搭建

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

是時候開發你自己的vscode擴展插件了

GPU云服務器云服務器 js實現f11的效果這種效果怎么實現實現放大鏡效果 java實現濾鏡效果

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

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

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

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

kelvinlee 2019-05-23 16:26 評論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