js实现动画处理

使用 requestAnimationFrame

requestAnimationFrame 是浏览器提供的专门用于实现动画的 API，性能优于 setTimeout 或 setInterval。该方法会在浏览器下一次重绘之前执行回调函数。

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

CSS 动画与 JavaScript 结合

通过 JavaScript 动态修改元素的 CSS 类或样式，触发 CSS 过渡或动画效果。这种方式性能较好，适合简单的动画效果。

const element = document.getElementById('animated-element');
element.classList.add('animate');

使用 Web Animations API

Web Animations API 提供了更强大的动画控制能力，可以替代 CSS 动画。该 API 允许创建复杂的动画序列并精确控制动画播放。

const element = document.getElementById('animated-element');
element.animate([
  { transform: 'translateX(0px)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  iterations: Infinity
});

使用第三方动画库

对于复杂的动画需求，可以考虑使用专业的 JavaScript 动画库，如 GSAP、Anime.js 或 Velocity.js。这些库提供了丰富的动画功能和更好的性能优化。

// 使用 GSAP 示例
gsap.to("#element", {duration: 1, x: 100, rotation: 360});

性能优化技巧

避免在动画中触发重排或重绘操作，尽量使用 transform 和 opacity 属性实现动画。将动画元素提升为独立的合成层可以减少性能开销。

.animated-element {
  will-change: transform;
  transform: translateZ(0);
}

动画时间控制

使用 easing 函数可以让动画更加自然。常见的 easing 函数包括 ease-in、ease-out 和 ease-in-out，可以通过 cubic-bezier 自定义动画曲线。

element.animate([
  { transform: 'translateX(0px)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  easing: 'cubic-bezier(0.42, 0, 0.58, 1)'
});

动画事件监听

可以监听动画开始、结束或取消事件，实现更复杂的交互逻辑。Web Animations API 和 CSS 动画都支持相关事件。

const animation = element.animate([...], {...});
animation.onfinish = () => {
  console.log('动画完成');
};