通过 Web API Vibration 触发移动端物理振动

浏览器供应商提供给我们的许多新API。其中一个简单的API是移动端触发振动的接口 Vibration API。这样前端开发人员就可以使用JavaScript触发设备在给定的持续时间内以及特定场景下振动。

使用场景适合于游戏（爆炸情景）、媒体（开启/结束）或警示性情景下触发，让用户在感官上得到一定程度的体验效果。

振动具有不同得长度，由单个整数组成，描述振动的毫秒数，或者描述振动和暂停模式的整数数组。

方法

Navigator.vibrate()

示例

window.navigator.vibrate(200);
window.navigator.vibrate([200]);

上述示例均使设备振动200 毫秒。

window.navigator.vibrate([200, 100, 200]);

这会使设备振动200 ms，然后暂停100 ms，然后再次振动设备200 ms。

取消振动

如果需要设置暂停，则可：

Navigator.vibrate(0)

设置0即可。

另外需要注意的是，上述振动在每个振动周期结束时自动停止，因此不必提供暂停。

持续振动

我们可以通过setInterval和clearInterval动作创建持久振动：

let vibrateInterval;
// 开始
function startVibrate(duration) {
    navigator.vibrate(duration);
}
// 停止
function stopVibrate() {
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}
// 持续
function startPersistentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

Demo

将下面代码复制到HTML中，在移动端打开页面，点击按钮（移动端Web e.g. QQ，微信或手机浏览器中）体验效果。

<button onclick="vibrateOnce()">振动一次</button>
<button onclick="multipleTimes()">振动一个周期</button>
<button onclick="startPersistentVibrate()">持续振动</button>
<button onclick="stopVibrate()">停止</button>

let vibrateInterval;
// 振动一次200ms
function vibrateOnce() {
  navigator.vibrate(200);
}
// 振动一个周期
function multipleTimes() {
  navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]);
}
// 停止振动
function stopVibrate() {
    if(vibrateInterval) {
      clearInterval(vibrateInterval)
    };
    navigator.vibrate(0);
}
// 持续循环振动以500ms
function startPersistentVibrate() {
  vibrateInterval = setInterval(() => {
    navigator.vibrate(500);
  }, 1000);
}