js实现震动

实现震动效果的方法

在JavaScript中，可以通过多种方式实现震动效果，包括设备震动API、CSS动画以及JavaScript动画。以下是几种常见的方法：

使用Device Vibration API

现代浏览器支持Device Vibration API，允许通过JavaScript控制设备的震动功能。该API主要用于移动设备。

// 触发震动
navigator.vibrate(200); // 震动200毫秒

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

使用CSS动画

通过CSS的transform和animation属性可以模拟震动效果。

.vibrate {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

// 添加震动类
document.getElementById('element').classList.add('vibrate');

// 移除震动类
document.getElementById('element').classList.remove('vibrate');

使用JavaScript定时器

通过setInterval和setTimeout可以动态修改元素的位置或样式来模拟震动。

function vibrate(element, duration, intensity) {
  let startTime = Date.now();
  let interval = setInterval(() => {
    let elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      clearInterval(interval);
      element.style.transform = 'translateX(0)';
      return;
    }
    let offset = Math.random() * intensity * 2 - intensity;
    element.style.transform = `translateX(${offset}px)`;
  }, 50);
}

// 调用震动函数
vibrate(document.getElementById('element'), 1000, 5);

注意事项

• Device Vibration API需要用户授权，且仅在支持震动的设备上有效。
• CSS动画和JavaScript定时器适用于所有设备，但效果可能因设备性能而异。
• 震动效果不宜过度使用，以免影响用户体验。

以上方法可以根据具体需求选择适合的方式实现震动效果。