当前位置：首页 > JavaScript

js实现晃动

2026-04-06 05:58:42JavaScript

实现晃动效果的方法

晃动效果可以通过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添加/移除类名触发动画：

element.classList.add('shake-element');
setTimeout(() => element.classList.remove('shake-element'), 500);

JavaScript动态实现

通过定时器连续修改元素位置：

js实现晃动

function shake(element, duration = 500, distance = 5) {
  const startTime = Date.now();
  const animate = () => {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      element.style.transform = 'translateX(0)';
      return;
    }

    const progress = elapsed / duration;
    const oscillation = Math.sin(progress * Math.PI * 10) * distance * (1 - progress);
    element.style.transform = `translateX(${oscillation}px)`;
    requestAnimationFrame(animate);
  };
  animate();
}

使用GSAP库实现

通过专业动画库实现更流畅的效果：

gsap.to(element, {
  x: () => Math.random() * 10 - 5,
  duration: 0.1,
  repeat: 5,
  yoyo: true,
  onComplete: () => gsap.set(element, { x: 0 })
});

物理引擎实现

使用带有衰减的物理模拟：

function physicsShake(element) {
  let velocity = 15;
  let position = 0;
  const damping = 0.8;

  const update = () => {
    position += velocity;
    velocity *= -damping;
    element.style.transform = `translateX(${position}px)`;

    if (Math.abs(velocity) > 0.1) {
      requestAnimationFrame(update);
    } else {
      element.style.transform = 'translateX(0)';
    }
  };
  update();
}