当前位置：首页 > JavaScript

js怎么实现抖动

2026-01-30 23:53:35JavaScript

实现元素抖动效果的方法

在JavaScript中实现抖动效果（如元素左右或上下晃动）可以通过CSS动画或JavaScript定时修改元素样式来实现。以下是两种常见方法：

使用CSS动画实现抖动

通过定义关键帧动画并应用到元素上，实现平滑的抖动效果：

js怎么实现抖动

/* 定义抖动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 应用动画到元素 */
.shake-element {
  animation: shake 0.5s ease-in-out;
}

JavaScript中触发动画：

js怎么实现抖动

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

// 动画结束后移除类名（可选）
element.addEventListener('animationend', () => {
  element.classList.remove('shake-element');
});

使用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();
}

// 使用示例
const box = document.getElementById('box');
box.addEventListener('click', () => shakeElement(box, 10, 1000));

增强版抖动函数（支持多方向）

扩展抖动函数支持水平和垂直方向：

function shake(element, {
  intensity = 5,
  duration = 500,
  direction = 'horizontal' // 或 'vertical'
}) {
  const start = performance.now();
  const property = direction === 'horizontal' ? 'translateX' : 'translateY';

  function tick(timestamp) {
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / duration, 1);
    const currentIntensity = intensity * (1 - progress);
    const offset = (Math.random() - 0.5) * currentIntensity * 2;

    element.style.transform = `${property}(${offset}px)`;

    if (progress < 1) {
      requestAnimationFrame(tick);
    } else {
      element.style.transform = '';
    }
  }

  requestAnimationFrame(tick);
}