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

这篇文章由 DeathGhost 编辑,发布于

归类于 Javascript » 👋分享到微博 当前评论 0 条。

大多数移动设备支持硬件振动,可通过代码向用户提供物理性反馈;Vibration API 则允许前端开发人员通过JavaScript触发设备在给定的时间内振动。

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

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

Web 移动端振动 Vibration API Navigator.vibrate()
Web 移动端振动 Vibration API Navigator.vibrate()

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

方法

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即可。

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

持续振动

我们可以通过setIntervalclearInterval动作创建持久振动:

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);
}

Web API Vibration vibrate 振动 物理振动 移动端振动 JavaScript触发振动 振动API 持久振动 震动警报

上一篇:

下一篇: