当前位置：首页 > JavaScript

js实现晃动

2026-03-14 12:00:51JavaScript

实现元素晃动效果的方法

使用CSS动画结合JavaScript可以轻松实现元素的晃动效果。以下是两种常见的实现方式：

使用CSS关键帧动画

定义晃动动画的关键帧：

@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添加/移除类名触发动画：

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

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

使用JavaScript直接操作样式

通过定时器实现晃动效果：

function shakeElement(element, duration = 500, distance = 5) {
  const startTime = Date.now();
  const originalPosition = element.style.transform || 'translateX(0)';

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

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

    requestAnimationFrame(updateShake);
  }

  updateShake();
}

// 使用示例
const box = document.getElementById('box');
shakeElement(box);

实现3D晃动效果

创建更立体的晃动动画：

@keyframes shake3d {
  0% { transform: translate(0, 0, 0) rotate(0); }
  20% { transform: translate(-5px, 0, -5px) rotate(-5deg); }
  40% { transform: translate(5px, 0, 5px) rotate(5deg); }
  60% { transform: translate(-5px, 0, -5px) rotate(-5deg); }
  80% { transform: translate(5px, 0, 5px) rotate(5deg); }
  100% { transform: translate(0, 0, 0) rotate(0); }
}

实现重力感晃动

模拟物理效果的晃动：

js实现晃动

function physicsShake(element, power = 1) {
  let velocity = 0;
  let position = 0;
  const stiffness = 0.3;
  const damping = 0.8;

  // 初始冲击
  velocity = -10 * power;

  function update() {
    const acceleration = -stiffness * position - damping * velocity;
    velocity += acceleration;
    position += velocity;

    element.style.transform = `translateX(${position}px)`;

    if (Math.abs(position) < 0.1 && Math.abs(velocity) < 0.1) {
      element.style.transform = '';
      return;
    }

    requestAnimationFrame(update);
  }

  update();
}

这些方法可以根据具体需求进行调整，改变晃动幅度、持续时间或添加其他动画效果。CSS方法性能更好，而JavaScript方法提供更精细的控制能力。

标签: js