当前位置：首页 > JavaScript

js实现摇摆

2026-03-14 06:38:10JavaScript

实现摇摆动画的 JavaScript 方法

使用 CSS 动画结合 JavaScript 触发

通过定义 CSS 关键帧动画实现摇摆效果，JavaScript 用于动态添加或移除动画类。CSS 部分定义 @keyframes，例如：

@keyframes swing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.swing-animation {
  animation: swing 1s ease-in-out;
}

JavaScript 通过事件触发动画：

element.addEventListener('click', () => {
  element.classList.add('swing-animation');
  setTimeout(() => element.classList.remove('swing-animation'), 1000);
});

纯 JavaScript 实现（使用 requestAnimationFrame）

js实现摇摆

通过逐帧修改元素的 transform 属性实现更灵活的控制：

function swing(element, amplitude = 15, duration = 1000) {
  const startTime = performance.now();
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const angle = amplitude * Math.sin(progress * Math.PI * 2) * (1 - progress);
    element.style.transform = `rotate(${angle}deg)`;
    if (progress < 1) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

使用 GSAP 库实现高级效果

js实现摇摆

引入 GSAP 库可简化复杂动画序列：

gsap.to(element, {
  rotation: 15,
  duration: 0.2,
  repeat: 3,
  yoyo: true,
  ease: "sine.inOut"
});

物理模拟摇摆（阻尼效果）

模拟真实物理摆动，包含速度衰减：

let angle = 0, velocity = 0, damping = 0.9;
function physicsSwing() {
  velocity += (-angle * 0.1 - velocity * 0.1);
  angle += velocity;
  element.style.transform = `rotate(${angle}deg)`;
  if (Math.abs(angle) > 0.01 || Math.abs(velocity) > 0.01) {
    requestAnimationFrame(physicsSwing);
  }
}
// 触发初始速度
velocity = 5;
physicsSwing();

标签: js