动画js怎么实现

使用CSS动画结合JavaScript

CSS动画通过@keyframes定义动画效果，JavaScript用于触发或控制动画。例如，点击按钮触发元素旋转：

/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-animation {
  animation: spin 2s linear infinite;
}

// JavaScript
document.getElementById('trigger').addEventListener('click', () => {
  document.getElementById('box').classList.add('spin-animation');
});

纯JavaScript实现动画

通过requestAnimationFrame逐帧修改样式，实现平滑动画效果。以下代码让元素水平移动：

function animate(element, duration) {
  const start = performance.now();
  const distance = 200; // 移动距离

  function step(timestamp) {
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.transform = `translateX(${progress * distance}px)`;

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}

animate(document.getElementById('box'), 1000);

使用Web Animations API

现代浏览器原生支持的API，可直接用JavaScript定义关键帧和动画参数：

const element = document.getElementById('box');
element.animate([
  { opacity: 0, transform: 'scale(0.5)' },
  { opacity: 1, transform: 'scale(1.2)' },
  { opacity: 0.8, transform: 'scale(1)' }
], {
  duration: 1000,
  easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  iterations: Infinity
});

使用GSAP等动画库

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

gsap.to(".box", {
  x: 100,
  rotation: 360,
  duration: 2,
  ease: "bounce.out"
});

// 时间轴动画
const tl = gsap.timeline();
tl.to(".box1", { x: 200, duration: 1 })
  .to(".box2", { y: 100, duration: 0.5 }, "-=0.5");

实现交互动画

结合用户交互事件实现响应式动画，如鼠标跟随效果：

document.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth * 100;
  const y = e.clientY / window.innerHeight * 100;
  document.documentElement.style.setProperty('--cursor-x', `${x}%`);
  document.documentElement.style.setProperty('--cursor-y', `${y}%`);
});

:root {
  --cursor-x: 50%;
  --cursor-y: 50%;
}
.follower {
  position: absolute;
  left: var(--cursor-x);
  top: var(--cursor-y);
  transition: transform 0.1s ease-out;
}

性能优化建议

优先使用CSS硬件加速属性如transform和opacity，避免频繁触发重排。使用will-change提示浏览器优化：

.animated-element {
  will-change: transform, opacity;
}

对于复杂场景，考虑使用Web Workers处理计算密集型动画逻辑，主线程仅负责渲染。