javascript通过Vibration API实现手机振动反馈提高用户体验

发表于 | 更新于: | 分类于 |
字数统计: 657 | 阅读时长 ≈ 2

javascript通过Vibration API实现手机振动反馈提高用户体验

目前大多数的移动设备均具备硬件能力支持振动，让软件代码通过使设备摇晃来向用户提供物理反馈。Vibration API 为 Web应用程序提供访问此硬件的能力。如果设备不支持，则不会产生任何效果。

振动描述

振动被抽象成【开-关】脉冲的模式，且可以具有变化的长度。参数可以是单个整数，表示持续振动的毫秒数 (ms)；或可由多个整数组成的数组，达到振动和暂停循环的效果。只要单一 window.navigator.vibrate() 函式即可控制振动。

单次振动

你可指定单一数值，或用只有一个数值成员的数组，让设备振动 1 次：

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

以上两个例子都可以使设备振动 200 ms.

多次振动

一个数组的值描述了装置振动与不振动的交替时间段。数组中的每个值都转换为整数，然后交替解释为设备应该振动的毫秒数和不振动的毫秒数。例如:

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

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

您可以根据需要设定多个振动/暂停对，数组的值可以是偶数或奇数个； 值得注意的是，由于振动在每个振动周期结束时自动停止，因此您不必提供最后一个值去暂停，换句话说，数组长度只需要设置奇数个。

停止振动

当调用 window.navigator.vibrate() 的参数为「0」、空白数组，或数组全为「0」时，即可取消目前进行中的振动。

持续振动

一些基于setInterval和clearInterval操作将允许您创建持续的振动：

var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
    navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
    // Clear interval and stop persistent vibrating
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

当然上面的代码片段没有考虑到振动参数为数组情况; 基于阵列的持久性振动将需要计算数组项的和，并基于该数量创建周期（可能具有额外的延迟）。

生成振动节奏

可以通过vibe.js tool这个工具来生成你需要的振动频率，然后复制它到你的代码里。

lib

我写了一个小lib，方便使用vibrate.js

demo: DEMO

译自： MDN Vibration API

0%