Setup()

如何在移动端实现触觉反馈——Vibration API(振动 API)

在给文章找封面图的时候总是会出现バイブ的结果,搞得有点尴尬,明明我搜的是 vibration 呀...

#HTML5 #JavaScript #Vibration API

答案是 Vibration API。

简而言之?

通过 Vibration API 可以调用设备的振动硬件,并以此为用户带来物理反馈。

长久以来 WEB 交互设计师通过视觉设计为用户带来形形色色的视觉反馈,而现如今的互联网产品却似乎早已不满足用琳琅满目的视觉盛宴来俘获用户的内心,它们还渴望用触觉给用户带来更为强烈且直接的触觉反馈。

Vibration API 就诞生在这样的背景下,它可以让我们通过调用设备的振动硬件来实现触觉反馈。

笼统地介绍

Vibration API 通过 window.navigator.vibrate(pattern) 函数调用。接收一个非 0 的 Number 类型的参数来表示硬件振动的毫秒数;或者接收一个 Array 类型的 Number 数组来表示一组振动的脉冲。

于是实现一次单一振动既可以传入一个数字,也可以传入一个长度为 1 的一维数字数组:

// window.navigator.vibrate(number | [number])
window.navigator.vibrate(200);
window.navigator.vibrate([200]);

数组长度超过 1 的时候表示一组脉冲。奇数位表示振动的毫秒数,偶数位表示暂停振动的毫秒数。由于振动会在一个振动周期后自动停止,无需刻意提供最后的暂停毫秒数。所以一般情况下数组的长度应该为奇数:

// window.navigator.vibrate(number[])
// 模拟一下 SOS 的摩斯代码
window.navigator.vibrate([100, 30, 100, 30, 100, 30, 300, 30, 300, 30, 300, 30, 100, 30, 100, 30, 100]);

感受一下:click me to enjoy

当传入的参数为 0、空数组、数组内容全为 0 时,当前的振动均会被取消:

// window.navigator.vibrate(number | [])
window.navigator.vibrate(0);
window.navigator.vibrate([]);
window.navigator.vibrate([0, 0, 0]);

别忘了兼容

就算是现代浏览器已经基本普及的今天,Vibration API 依旧是个比较新的特性。除了在硬件层面就不支持的场景,也还要考虑平台兼容情况,不支持 iframe 内调用、最大振动时长限制有所区别等等等等。调用之前最好还是做一下判断,以及不要打扰到用户的正常使用。

目前兼容情况参照 caniuse