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

wangzy2019發表於2019-05-08

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

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

原始碼地址

準備開始

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

<body>
     <div class="content">
            <div id="image">
                <!-- 圖片為網路地址才可在本地通過直接開啟html除錯 -->
                <img
                    src="https://i.loli.net/2019/05/06/5ccffa469ec52.jpg"
                    width="400"
                />
            </div>
    </div>
</body>
複製程式碼

動畫的實現

  1. 將html轉成canvas，為後面處理做準備。這裡我們使用html2canvas庫，可以將html中的dom節點繪製成canvas，相當於對這個dom節點進行截圖，使用很簡單，程式碼如下（網頁生成海報圖片就可以用這個庫來做）。
const imageBox = document.querySelector('#image')
html2canvas(imageBox, {
    backgroundColor: 'transparent' //背景設定為透明
}).then(canvas=>{
    //處理canvas的程式碼（注意.then這種寫法只有在新版本的html2canvas可用）
});
複製程式碼
  1. 這裡我們拿到了包含了圖片資訊的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]
複製程式碼
  1. 接下來是最關鍵的一步，建立多個同等長度的陣列，填充上透明畫素資訊(陣列中的值全是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原始碼中看到，最終效果如下。

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

響指觸發

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

  1. 首先要確保你的裝置有麥克風等聲音輸入裝置，然後監測並獲取裝置，如果有麥克風裝置，網頁上會彈出授權提示。
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // 獲取使用者的 media 資訊
        navigator.mediaDevices
            .getUserMedia({ audio: true })
            .then(stream => {
                //音訊處理程式碼
            })
            .catch(error => {
                mystatus.innerHTML = '獲取音訊時好像出了點問題。' + error;
            });
} else {
        mystatus.innerHTML = '不支援獲取媒體介面';
}           
複製程式碼
  1. 音訊處理程式碼
// 當輸入音量超過此值時，表示檢測大音量輸入(響指聲)
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(); 
    }
};
複製程式碼

最後

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

文章列表

相關文章