17370845950

JavaScript实现动画的三大可靠方案是：CSS动画驱动（推荐类名切换+animationend监听）、requestAnimationFrame（适合自定义物理逻辑）、Web Animations API（适合运行时动态控制）。

JavaScript 实现动画效果的核心不是“能不能”，而是“该用哪条路”——现代浏览器早已不推荐手动 setInterval + style.left 那套老办法，真正可靠、高性能、可维护的方案其实就三条主线：CSS 动画驱动、requestAnimationFrame 手动控制、以及 Web Animations API（WAAP）原生接口。

CSS 动画 + JavaScript 控制时机和状态

这是最常用也最稳妥的方式。JS 不负责逐帧计算，只负责触发动画、监听结束、切换类名或修改 animation-play-state。

• 用 element.classList.add("animate-slide") 触发预定义的 @keyframes，比 JS 计算样式快得多，且天然支持硬件加速（如对 transform 和 opacity）
• 监听 animationend 事件时注意加浏览器前缀兼容（webkitAnimationEnd），或用 element.addEventListener("animationend", handler, { once: true }) 避免重复绑定
• 避免直接操作 element.style.animation 字符串，容易覆盖其他动画；优先用类名切换，或用 element.getAnimations() 管理

requestAnimationFrame 适合自定义物理逻辑

当你需要弹簧、拖拽缓动、滚动视差、或与用户输入实时同步（比如跟随鼠标移动一个粒子）时，requestAnimationFrame 是唯一选择。

• 它按屏幕刷新率执行（通常是 60fps），比 setTimeout 或 setInterval 更精准、更省电
• 别在回调里做重排（offsetTop、getBoundingClientRect）或重绘（频繁改 style.color）；把读取集中到一帧开头，写入集中到结尾
• 记得用 cancelAnimationFrame 清理，尤其在组件卸载、页面隐藏（visibilitychange）时，否则动画会持续占用资源

let animationId;
function animate() {
  // 更新位置逻辑（例如 easing 函数）
  element.style.transform = `translateX(${x}px)`;
  if (isNotDone) animationId = requestAnimationFrame(animate);
}
animate();

// 卸载时
window.addEventListener("beforeunload", () => cancelAnimationFrame(animationId));

Web Animations API（element.animate()）是未来但需谨慎

element.animate() 提供了 JS 原生控制动画的能力，支持暂停、反向、时间偏移、关键帧动态生成，是 CSS 动画和 raf 的中间解。

• 兼容性已不错（Chrome 36+、Firefox 48+、Safari 16.4+、Edge 79+），但 IE 完全不支持，移动端 iOS Safari 16.4 之前也不行
• 不要把它当 jQuery.animate() 的替代品来写大量简单淡入淡出——性能反而不如纯 CSS；它真正价值在于运行时组合动画、响应式插值、或与 Canvas/Three.js 同步时序
• 返回的 Animation 对象有 onfinish、currentTime、playbackRate 等属性，但注意 currentTime 单位是毫秒，且受播放速率影响

const anim = element.animate(
  [
    { opacity: 0, transform: "scale(0.8)" },
    { opacity: 1, transform: "scale(1)" }
  ],
  { duration: 300, easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" }
);
anim.onfinish = () => console.log("done");

真正难的从来不是“怎么让元素动起来”，而是判断动的必要性、控制动的节奏、以及在动的过程中不阻塞主线程或触发意外重排。选技术前先问：这个动效是否影响用户完成核心任务？能否用 CSS 省事？是否必须由 JS 实时响应？答案清楚了，路就只有一条。