js实现动画

使用 CSS 动画与 JavaScript 控制

通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧（@keyframes），JavaScript 通过 classList 控制动画状态。

/* CSS 定义 */
.animate {
  animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// JavaScript 触发
const element = document.getElementById('target');
element.classList.add('animate');

使用 requestAnimationFrame

手动控制每一帧的渲染，适合复杂动画逻辑。通过递归调用实现连续动画。

function animate(element, duration) {
  const start = performance.now();
  function update(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.transform = `translateX(${progress * 200}px)`;
    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }
  requestAnimationFrame(update);
}
animate(document.getElementById('box'), 1000);

使用 Web Animations API

原生支持的动画 API，可直接操作动画属性和时间。

const element = document.getElementById('target');
element.animate(
  [
    { opacity: 0, transform: 'translateY(-20px)' },
    { opacity: 1, transform: 'translateY(0)' }
  ],
  {
    duration: 1000,
    easing: 'ease-out'
  }
);

使用第三方库（如 GSAP）

GSAP 提供更强大的时间轴控制和复杂动画序列。

gsap.to("#target", {
  x: 100,
  duration: 1,
  rotation: 360,
  ease: "bounce.out"
});

性能优化建议

避免频繁触发重排和重绘。使用 transform 和 opacity 属性（硬件加速），减少动画元素的数量，必要时使用 will-change 提示浏览器。

.target {
  will-change: transform, opacity;
}