你不知道的前端API - Vibration API：让你的网页“震动”起来

李游Leo

于 2024-11-12 11:43:30 发布

阅读量863

点赞数 10

分类专栏：前端冷知识前端文章标签：前端

本文链接：https://blog.csdn.net/liyou041/article/details/143707750

版权

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

前端冷知识

9 篇文章

订阅专栏

最近分享一些前端比较冷门的API，并且配合案例，如果觉得不错，可以关注收藏一波哈。今天咱们分享的主角就是这个：Vibration API

比如我们在前端开发中，常常希望用户可以获得即时的反馈，比如按钮点击、加载完成或消息提醒等。Vibration API 让我们可以在这些交互时，通过设备的振动来传递反馈信息。当用户收到通知或完成操作时，手机能短暂震动一下，是不是更还挺有感觉的，比较有高级感？

今天我们就来聊聊如何使用 Vibration API，让你的网页“震动”起来！准备好代码，一步步来看看怎么实现。

Vibration API 是什么？

Vibration API 是一个非常简单但非常有用的 API，允许我们通过代码控制设备的振动功能。它只支持一些带振动功能的设备，比如大部分智能手机和平板。简单来说，这个 API 通过调用navigator.vibrate()方法来触发设备振动，适合在一些互动环节中为用户提供反馈。

检查浏览器支持情况

在正式用之前，我们可以先检查一下当前设备是否支持 Vibration API。直接通过navigator.vibrate属性来判断：


if ("vibrate" in navigator) {
    console.log("设备支持振动！");
} else {
    console.log("抱歉，当前设备不支持振动功能。");
}

如果控制台显示“设备支持振动！”，那么接下来你就可以自由使用 Vibration API 了。

不过注意哈，这个东西，电脑肯定是不支持的。还有就是 iOS 设备目前在 Web 中并不支持 Vibration API，所以在 iOS 上使用不会有任何效果。安卓倒是可以。

让设备震动：基本用法

想让设备振动？直接调用 navigator.vibrate() 方法就行了，传入一个毫秒数（ms）参数来控制震动时间，比如让设备震动 500 毫秒：

navigator.vibrate(500);  // 震动 500 毫秒

就是这么简单！当用户触发某个事件时，我们可以调用这个方法，手机会随之震动一下。比如，在一个按钮点击时触发：

<button onclick="navigator.vibrate(300)">点我试试震动</button>

每次点击按钮，设备会振动 300 毫秒。

控制震动的模式：创建振动序列

Vibration API 还允许创建一个“震动模式”，也就是说可以设定一段时间序列让设备震动—停顿—震动，这样就能创造出一些复杂的振动模式。实现方法也很简单，只需要在 vibrate 中传入一个数组。例如：

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

这段代码会让设备按照以下模式震动：

震动 200 毫秒
停顿 100 毫秒
再震动 200 毫秒
再停顿 100 毫秒
最后震动 500 毫秒

这个模式适合在通知时提示用户，或者在用户执行某种连续操作时提供持续反馈。

实现通知振动效果

假设我们想要模拟一个简易的消息通知效果，每当有新消息到来时震动一下，吸引用户注意。我们可以这样实现：

function notifyVibration() {

    if ("vibrate" in navigator) {
        navigator.vibrate([100, 50, 100]); // 快速振动两下，像是消息提醒
        console.log("消息通知：设备振动提示");
    } else {
        console.log("当前设备不支持振动功能。");
    }
}


// 模拟新消息事件
document.querySelector("#notify-btn").addEventListener("click", notifyVibration);

在这个例子中，我们定义了 notifyVibration 函数，每当用户点击页面上的“消息通知”按钮时，设备会快速震动两下来模拟提醒效果。这个代码很实用，特别适合那些需要轻提醒的场景。

停止振动

有时候我们可能需要停止振动，比如用户忽然退出了页面或取消了操作。这时只需要调用 navigator.vibrate(0) 或者传入 []，设备的震动就会立即停止：

navigator.vibrate(0); // 停止所有震动

实现案例：按住按钮时持续振动

假设我们想实现一个长按按钮后设备持续振动的效果，当用户松手后，震动停止。这种效果可以用 mousedown 和 mouseup 事件来实现：

<button id="long-vibrate-btn">长按我来震动</button>

<script>
const button = document.getElementById("long-vibrate-btn");

button.addEventListener("mousedown", () => {
    navigator.vibrate([300, 200, 300, 200, 300]); // 长按时持续振动
});

button.addEventListener("mouseup", () => {
    navigator.vibrate(0); // 松手后停止振动
});
</script>

这个案例中，当用户按下按钮时，设备会以间隔 300 毫秒的方式持续振动。松手后，通过 navigator.vibrate(0) 立即停止震动。这种效果非常适合需要用户长按触发的交互，比如在游戏中按住按钮“充能”等情况。