当前位置：首页 > JavaScript

js实现动画效果

2026-02-28 18:42:43JavaScript

使用 CSS 和 JavaScript 实现基础动画

通过修改元素的 CSS 属性（如 transform 或 opacity）实现平滑动画效果。这种方式性能较好，适合简单动画场景。

const element = document.getElementById('animatedElement');
element.style.transition = 'transform 0.5s ease, opacity 0.3s linear';
element.style.transform = 'translateX(100px)';
element.style.opacity = '0.5';

使用 requestAnimationFrame 实现高性能动画

对于需要精细控制的复杂动画，使用 requestAnimationFrame 可以确保与浏览器刷新率同步，避免卡顿。

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

  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

使用 Web Animations API

现代浏览器支持的 Web Animations API 提供了更强大的动画控制能力，支持关键帧和时间轴控制。

js实现动画效果

const element = document.getElementById('waapiElement');
element.animate([
  { transform: 'translateX(0)', opacity: 1 },
  { transform: 'translateX(300px)', opacity: 0.5 }
], {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate'
});

结合 CSS 变量实现动态动画

通过 JavaScript 动态更新 CSS 变量，可以实现灵活的参数化动画效果。

.animated-box {
  --move-distance: 100px;
  transition: transform 0.4s;
  transform: translateX(var(--move-distance));
}

document.documentElement.style.setProperty('--move-distance', '200px');

使用 GSAP 等专业动画库

对于复杂动画场景，GSAP 等专业库提供更丰富的功能和更好的兼容性。

js实现动画效果

gsap.to(".gsap-element", {
  x: 200,
  duration: 1,
  rotation: 360,
  ease: "bounce.out"
});

性能优化注意事项

避免在动画中触发重排（reflow）的属性，如 width/height。优先使用 transform 和 opacity 这类合成层属性。使用 will-change 提示浏览器进行优化：

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

处理动画结束事件

通过事件监听实现动画结束后的回调处理：

const animatedElement = document.getElementById('eventElement');
animatedElement.addEventListener('transitionend', () => {
  console.log('CSS 动画完成');
});

const waapiAnimation = element.animate(...);
waapiAnimation.onfinish = () => {
  console.log('Web Animations API 动画完成');
};