成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

十分鐘實現(xiàn)滅霸打響指灰飛煙滅的效果

Wildcard / 2093人閱讀

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

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

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

源代碼地址 準(zhǔn)備開始

我們這里只用一個圖片元素,HTML結(jié)構(gòu)如下

<body>
     <div class="content">
            <div id="image">
                
                <img
                    src="https://i.loli.net/2019/05/06/5ccffa469ec52.jpg"
                    width="400"
                />
            div>
    div>
body>
動畫的實現(xiàn)

    將html轉(zhuǎn)成canvas，為后面處理做準(zhǔn)備。這里我們使用html2canvas庫，可以將html中的dom節(jié)點繪制成canvas，相當(dāng)于對這個dom節(jié)點進(jìn)行截圖，使用很簡單，代碼如下（網(wǎng)頁生成海報圖片就可以用這個庫來做）。

const imageBox = document.querySelector("#image")
html2canvas(imageBox, {
    backgroundColor: "transparent" //背景設(shè)置為透明
}).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位無符號整型固定數(shù)組）中，這個數(shù)組中的值為0到255的整數(shù)，按圖片中像素從左到右從上到下的順序，每4個數(shù)字表示一個像素信息，這4個數(shù)字分別表示rgba（r-紅色，g-綠，b-藍(lán)色，a-透明度）的四個值。 比如這樣一個圖片

它的像素信息即為

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

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

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

當(dāng)canvasCount為3時效果如下：
原始圖片canvas

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



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

響指觸發(fā)

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

    首先要確保你的設(shè)備有麥克風(fēng)等聲音輸入裝置，然后監(jiān)測并獲取設(shè)備，如果有麥克風(fēng)設(shè)備，網(wǎng)頁上會彈出授權(quán)提示。

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

    音頻處理代碼

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

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

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

全部文章列表

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

十分鐘實現(xiàn)滅霸打響指灰飛煙滅的效果

是時候開發(fā)你自己的vscode擴(kuò)展插件了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6807.html

相關(guān)文章

  • 嘗試用 vue 實現(xiàn)滅霸打響指英雄消失的效果 demo

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

    kelvinlee 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評論0 收藏0

  • 從滅霸的無限手套說起

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

    whatsns 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<