DeathGhost

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

这篇文章发布于 2019年08月03日 15:52 星期六 阅读 674 次,评论 0 条

DeathGhost 编辑,归类于javascript »

大多数移动设备支持硬件振动,可通过代码向用户提供物理性反馈;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);
}
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

34

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕