js实现摆动

摆动动画实现方法

使用JavaScript实现摆动效果可以通过CSS动画或JavaScript直接操作元素属性完成。以下是几种常见方法：

使用CSS动画结合JavaScript

定义CSS关键帧动画：

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

通过JavaScript触发动画：

const element = document.getElementById('swing-element');
element.style.animation = 'swing 1s ease-in-out';

使用JavaScript定时器实现

通过requestAnimationFrame实现平滑摆动：

let angle = 0;
let direction = 1;
const speed = 0.1;
const maxAngle = 15;

function swing() {
  angle += speed * direction;
  if (angle > maxAngle || angle < -maxAngle) {
    direction *= -1;
  }
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(swing);
}

swing();

使用物理模拟摆动

实现更真实的物理摆动效果：

const element = document.getElementById('swing-element');
let angle = 0;
let velocity = 0;
const damping = 0.98;
const spring = 0.1;

function physicsSwing() {
  velocity += -angle * spring;
  velocity *= damping;
  angle += velocity;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(physicsSwing);
}

// 初始推动
velocity = 0.5;
physicsSwing();

使用GSAP库实现

GSAP提供更强大的动画控制：

gsap.to("#swing-element", {
  rotation: 15,
  duration: 0.5,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});

每种方法适用于不同场景，CSS动画适合简单效果，JavaScript实现提供更多控制，物理模拟适合真实感要求高的场景，GSAP适合复杂动画需求。