当前位置：首页 > JavaScript

js怎么实现抖动

2026-03-01 14:57:22JavaScript

实现元素抖动效果的方法

在JavaScript中实现抖动效果（如按钮、弹窗等元素的晃动）可以通过CSS动画或JavaScript动态修改样式实现。以下是两种常用方法：

使用CSS动画实现抖动

通过定义关键帧动画（@keyframes）实现可复用的抖动效果，再通过JavaScript触发动画。

js怎么实现抖动

CSS部分：

.shake {
  animation: shake 0.5s linear;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

JavaScript部分：

js怎么实现抖动

const element = document.getElementById('target');
element.classList.add('shake');

// 动画结束后移除类名，避免重复触发问题
element.addEventListener('animationend', () => {
  element.classList.remove('shake');
});

使用JavaScript动态抖动

通过定时器逐帧修改元素位置，适合需要更灵活控制的场景。

function shakeElement(element, intensity = 5, duration = 500) {
  const startTime = Date.now();
  const originalPosition = element.getBoundingClientRect().left;

  function updateShake() {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      element.style.transform = 'translateX(0)';
      return;
    }

    const progress = elapsed / duration;
    const currentIntensity = intensity * (1 - progress);
    const offset = Math.random() * currentIntensity * 2 - currentIntensity;
    element.style.transform = `translateX(${offset}px)`;
    requestAnimationFrame(updateShake);
  }

  updateShake();
}

// 使用示例
shakeElement(document.getElementById('target'));

增强交互性

结合事件触发抖动效果，例如点击按钮时：

document.getElementById('btn').addEventListener('click', () => {
  const feedbackBtn = document.getElementById('btn');
  feedbackBtn.classList.add('shake');

  feedbackBtn.addEventListener('animationend', () => {
    feedbackBtn.classList.remove('shake');
  });
});