js怎么实现抖动

JavaScript 实现抖动效果

抖动效果（Shake Effect）通常用于吸引用户注意力或提示错误操作。以下是几种实现方法：

使用 CSS 动画

通过 CSS 定义抖动动画，再用 JavaScript 触发：

.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

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

function shakeElement(element) {
  element.classList.add('shake');
  setTimeout(() => element.classList.remove('shake'), 500);
}

纯 JavaScript 实现

通过定时器动态修改元素位置：

function shake(element, intensity = 5, duration = 500) {
  const startTime = Date.now();
  const interval = setInterval(() => {
    const elapsed = Date.now() - startTime;
    const progress = elapsed / duration;

    if (progress >= 1) {
      clearInterval(interval);
      element.style.transform = '';
      return;
    }

    const shakeX = intensity * Math.sin(progress * 20) * (1 - progress);
    element.style.transform = `translateX(${shakeX}px)`;
  }, 16);
}

使用第三方库

使用 jQuery 实现抖动效果：

$.fn.shake = function() {
  this.css('position','relative');
  for(let x = 1; x <= 3; x++) {
    this.animate({left: -5}, 50)
      .animate({left: 0}, 50)
      .animate({left: 5}, 50)
      .animate({left: 0}, 50);
  }
};

应用场景示例

表单验证失败时抖动输入框：

document.querySelector('form').addEventListener('submit', (e) => {
  const input = document.querySelector('#username');
  if (!input.value) {
    shake(input);
    e.preventDefault();
  }
});

性能优化建议

使用 transform 而非 left/top 进行动画，因为 transform 不会触发重排。对于频繁触发的抖动效果，建议使用 CSS 硬件加速：

.shake {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

以上方法可根据具体需求选择，CSS 动画实现最简单，纯 JavaScript 方案最灵活，第三方库适合已有 jQuery 的项目。