当前位置：首页 > JavaScript

js 实现动画

2026-02-01 19:20:56JavaScript

使用 CSS 动画

通过 @keyframes 定义动画，再通过 JavaScript 动态添加或移除 CSS 类来触发动画。

// 定义 CSS 动画（通常在样式表中）
/*
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 1s; }
*/

// JavaScript 触发动画
const element = document.getElementById('target');
element.classList.add('fade-in');

// 动画结束后移除类（可选）
element.addEventListener('animationend', () => {
  element.classList.remove('fade-in');
});

使用 `requestAnimationFrame`

适合需要精细控制的复杂动画，例如游戏或物理效果。

let startTime = null;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;
  const element = document.getElementById('target');
  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

使用 Web Animations API

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

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

使用 GSAP 等第三方库

GreenSock Animation Platform (GSAP) 提供更强大的动画控制。

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

使用 `setInterval` 或 `setTimeout`

简单动画的替代方案，但性能不如 requestAnimationFrame。

js 实现动画

let position = 0;
const interval = setInterval(() => {
  position += 1;
  document.getElementById('target').style.left = `${position}px`;
  if (position >= 100) clearInterval(interval);
}, 16);