当前位置：首页 > JavaScript

前端动画js实现

2026-04-07 12:33:14JavaScript

使用 CSS 动画与 JavaScript 控制

CSS 动画通过 @keyframes 定义动画效果，JavaScript 用于动态添加或移除类名以触发动画。例如，实现一个元素的淡入效果：

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

const element = document.getElementById('target');
element.classList.add('fade-in');

使用 `requestAnimationFrame` 实现高性能动画

requestAnimationFrame 是浏览器原生支持的动画 API，适合需要精细控制的复杂动画。以下示例实现一个水平移动的方块：

let position = 0;
function animate() {
  position += 2;
  element.style.transform = `translateX(${position}px)`;
  if (position < 200) {
    requestAnimationFrame(animate);
  }
}
animate();

使用 Web Animation API

现代浏览器支持的 Web Animation API 提供了更简洁的语法：

const element = document.getElementById('target');
element.animate(
  [
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(1.5)', opacity: 0.5 }
  ],
  {
    duration: 1000,
    iterations: Infinity
  }
);

使用 GSAP 等第三方库

GSAP（GreenSock Animation Platform）是专业的动画库，适合复杂场景：

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

实现物理动画效果

通过 JavaScript 模拟物理效果（如弹性运动）：

前端动画js实现

let velocity = 0;
let position = 0;
const stiffness = 0.1;
const damping = 0.9;

function springTo(targetX) {
  const dx = targetX - position;
  velocity += dx * stiffness;
  velocity *= damping;
  position += velocity;
  element.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(() => springTo(targetX));
}
springTo(200);