H5移動端實現手機震動效果
阿新 • • 發佈:2018-12-13
判斷相容
瀏覽器對振動API的支援情況,一個好的習慣就是在使用之前要檢查一下當前你的應用環境、瀏覽器是否支援振動API。下面就是檢測的方法:
setTimeout(()=>{
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if(navigator.vibrate) {
console.log("支援裝置震動!");
}
},1000)
在window.navigator
vibrate
。
振動API基礎應用
這個navigator.vibrate
函式可以接受一個數字引數,也可以接受一個數字陣列,當使用陣列引數時,奇數位的數值是震動秒數,偶數位為等待秒數。
// 振動1秒
navigator.vibrate(1000);
// 振動多次
// 引數分別是震動3秒,等待2秒,然後振動1秒
navigator.vibrate([3000, 2000, 1000]);
如果想停止震動,你只需要向navigator.vibrate
方法裡傳入0
,或一個空陣列:
// 停止振動 navigator.vibrate(0); navigator.vibrate([]);
對navigator.vibrate
方法的呼叫並不會引起手機迴圈振動;當引數是一個數字時,振動之後發生一次,然後就停止下來。當引數是陣列時,震動會按數組裡的值震動,然後就停止振動。
持續震動
我們可以簡單的使用setInterval
和 clearInterval
方法產生讓手機持續震動的效果:
var vibrateInterval; // 開始震動 function startVibrate(duration) { navigator.vibrate(duration); } // 停止震動 function stopVibrate() { // 清除間隔和停止持續振動 if(vibrateInterval) clearInterval(vibrateInterval); navigator.vibrate(0); } //在給定的持續時間和間隔時開始持續的振動 //假定一個數字值 function startPeristentVibrate(duration, interval) { vibrateInterval = setInterval(function() { startVibrate(duration); }, interval); }
上面的這段程式碼只是針對振動引數是一個數字的情況,如果引數是陣列,你還需要計算一下它的總共持續時間,然後根據它的特徵來進行迴圈。
>>>文章來源,本人做了一些完善.