JavaScript Vibration震动API

Vibration API用于控制移动端设备的震动器,它可以设置一个震动序列以完成不同时间间隔的震动频率。

一、应用场景

震动API主要应用于移动端游戏等交互类页面,例如设计类游戏可以在击中目标后调用震动器来增强用户体验。
它还可以用来做报错类的提醒,例如用户对一个表单的必填项没有进行填写,在校验失败后,可以调用震动API来提示用户进行填写。
具体使用场景需要考虑清楚,以免滥用反而影响用户体验。

二、兼容性

目前在caniuse上看到的兼容性情况是有问题的,有些浏览器虽然兼容,但基本上除了移动设备外,其他的上网设备都没有震动器,所以桌面版的浏览器虽然支持此API,但并不能使用(使用没有效果但不报错),故只应该应用于移动项目中。
目前在以下APP(Android系统)的最新版本中测试均有效:
360极速浏览器
UC浏览器
手机QQ内置浏览器(未测试QQ浏览器,但应该会支持)
微信
微博
三星手机默认浏览器(Android 5.1.1版本)

三、用法

navigator.vibrate可以控制震动器震动
它接收一个参数,表示震动序列,例如:
navigator.vibrate(1000)表示震动1000毫秒
navigator.vibrate(1000, 500, 1000)表示震动1000毫秒后,暂停500毫秒,然后再震动1000毫秒
当在一个震动的过程中,希望取消震动,则可以调用此方法,第一个参数为null或[]、[0]等:
navigator.vibrate(0)
navigator.vibrate(null)
navigator.vibrate([])
navigator.vibrate([0])
navigator.vibrate([0, 0, 0, ……])//全都是0,没什么意义

四、演示
请使用手机打开,支持微信,建议WIFI环境下打开,需要消耗600k左右的流量。
https://www.lyz810.com/demo/vibration/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!