js实现动画效果

使用 CSS 和 JavaScript 实现动画效果

在 JavaScript 中实现动画效果通常有多种方式，以下是几种常见的方法及其实现示例。

使用 requestAnimationFrame

requestAnimationFrame 是浏览器提供的 API，适合高性能动画的实现。它会自动优化帧率，并在浏览器重绘前执行回调函数。

function animate() {
  const element = document.getElementById('box');
  let position = 0;

  function step(timestamp) {
    position += 1;
    element.style.transform = `translateX(${position}px)`;

    if (position < 100) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

animate();

使用 CSS @keyframes 结合 JavaScript

通过 CSS 定义动画，再用 JavaScript 动态添加或移除类名来控制动画的播放。

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
}

.box.animate {
  animation: slide 1s forwards;
}

const box = document.querySelector('.box');
box.addEventListener('click', () => {
  box.classList.add('animate');
});

使用 setInterval 或 setTimeout

虽然 setInterval 和 setTimeout 可以实现动画，但由于它们不受浏览器刷新率影响，可能导致性能问题或卡顿。

function animate() {
  const element = document.getElementById('box');
  let position = 0;
  const interval = setInterval(() => {
    position += 1;
    element.style.transform = `translateX(${position}px)`;

    if (position >= 100) {
      clearInterval(interval);
    }
  }, 10);
}

animate();

使用 Web Animations API

Web Animations API 是现代浏览器支持的动画 API，可以直接通过 JavaScript 控制动画。

const element = document.getElementById('box');
element.animate(
  [
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000,
    iterations: 1,
    fill: 'forwards'
  }
);

使用 GSAP 库

GSAP 是一个强大的动画库，支持复杂的动画效果和性能优化。

// 引入 GSAP 后使用
gsap.to('#box', {
  x: 100,
  duration: 1,
  ease: 'power2.out'
});

总结

• 高性能动画：优先使用 requestAnimationFrame 或 Web Animations API。
• 简单动画：CSS @keyframes 结合 JavaScript 动态控制类名。
• 复杂动画：使用 GSAP 等第三方库简化开发。
• 避免使用：setInterval 或 setTimeout 实现动画，可能导致性能问题。