javascript如何实现动画_有哪些基本方法【教程】

最推荐用 requestAnimationFrame 实现 JS 动画，因其与屏幕刷新同步、可被浏览器优化；setTimeout/setInterval 仅适合降级或低频轮询；CSS 动画适用于声明式简单动效，JS 动画适用于动态参数控制和精确交互。

JavaScript 实现动画没有“唯一正确方法”，关键看你要控制的精度、兼容性要求和是否需要与 CSS 协同。现代开发中，requestAnimationFrame 是最推荐的底层机制，而 setTimeout 和 setInterval 仅适合简单轮询或降级兜底。

为什么不用 setTimeout 或 setInterval 做主控？

它们不和屏幕刷新同步，容易掉帧、卡顿，且无法被浏览器优化（比如标签页失焦时仍执行）。虽然写起来简单：

let pos = 0;
const move = () => {
  pos += 2;
  element.style.left = pos + 'px';
  setTimeout(move, 16); // 试图模拟 60fps
};

但实际帧率不稳定，还可能累积延迟。仅建议用于：低频状态轮询、兼容极老环境（IE8 及以下）、或作为 requestAnimationFrame 的 fallback。

requestAnimationFrame 怎么写才可靠？

它把回调交给浏览器统一调度，在下一次重绘前执行，天然对齐刷新率。但要注意三点：

• 必须手动递归调用——它只触发一次，不是自动循环
• 需保存返回的 id，以便用 cancelAnimationFrame(id) 中止，否则内存泄漏
• 动画逻辑里别做重排（如读取 offsetTop）再立即重绘，会强制同步布局，拖慢帧率

基础结构示例：

let animationId;
const animate = () => {
  // 更新状态（位置、透明度等）
  element.style.transform = `translateX(${x}px)`;
  // 继续下一帧
  animationId = requestAnimationFrame(animate);
};
// 启动
animationId = requestAnimationFrame(animate);
// 停止时调用
cancelAnimationFrame(animationId);

CSS 动画和 JS 动画怎么选？

不是非此即彼，而是分工：

• 用 CSS：transition 处理简单状态切换（hover、class 切换）；@keyframes + animation 做预设路径、循环动画。优势是硬件加速、声明式、省 JS 负担
• 用 JS：requestAnimationFrame 控制动态参数（如鼠标跟随、物理模拟、滚动视差），或需要精确暂停/跳转/反向的场景
• 混合用法常见：JS 触发 CSS 类名变更，再监听 animationend 事件收尾；或用 element.animate()（Web Animations API）——它本质是 JS 接口，但底层走 CSS 渲染管线

例如启动一个 CSS 动画并监听结束：

element.classList.add('fade-in');
element.addEventListener('animationend', () => {
  element.classList.remove('fade-in');
}, { once: true });

element.animate() 值得现在用吗？

支持度已足够好（Chrome 36+、Firefox 48+、Safari 13.1+、Edge 79+），但注意两个现实约束：

• IE 完全不支持，若需兼容，得用 polyfill（如 web-animations-js），但体积不小
• 调试不如 CSS 直观，动画曲线、关键帧需 JS 对象描述，出错时错误信息较模糊（比如 InvalidStateError 常因 target 元素已移除）
• 性能上和纯 CSS 动画一致，但 JS 控制力更强：可随时 pause()、reverse()、读取 currentTime

简单示例：

const anim = element.animate(
  [
    { opacity: 0, transform: 'scale(0.8)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  { duration: 300, easing: 'ease-out' }
);
// 后续可操作
anim.pause();
anim.currentTime = 150; // 跳到中间

真正难的不是写出动画，而是判断该不该用 JS 控制——多数 UI 动效用 CSS 就够了；只有当动画逻辑依赖运行时数据（比如 canvas 坐标、传感器输入、异步加载状态）时，requestAnimationFrame 才不可替代。别为了“炫技”把简单事情复杂化。