javascript动画如何实现_如何使用requestAnimationFrame创造流畅动画【教程】

requestAnimationFrame 是实现流畅动画的唯一合理选择，因其与屏幕刷新率同步、后台自动暂停、无强制延迟抖动；需用时间戳计算 deltaTime 保证跨设备速度一致，避免混用 css 动画时的跳变。

requestAnimationFrame 是实现流畅 javaScript 动画的唯一合理选择，setTimeout/setInterval 本质无法匹配屏幕刷新节奏，必然掉帧或卡顿。

为什么 requestAnimationFrame 比 setTimeout 更适合动画

浏览器在每次重绘前会主动调用 requestAnimationFrame 回调，它天然与显示器刷新率（通常是 60Hz）同步；而 setTimeout 只能“尽力”按毫秒间隔执行，实际触发时间受 js 主线程阻塞、任务队列延迟等影响，容易累积误差。更关键的是：页面切到后台时，requestAnimationFrame 会被自动暂停，setTimeout 却照常运行，浪费资源甚至导致切回前台时动画突进。

• 不手动控制帧率 —— 浏览器决定何时执行，你只负责“下一帧该干什么”
• 自动节流 —— 隐藏标签页、系统节能模式下自动降频或暂停
• 无强制延迟抖动 —— 不像 setTimeout(fn, 16) 实际可能延后 2–5ms

最简可用的 requestAnimationFrame 动画循环结构

核心是递归调用自身，并在每次回调中更新状态 + 渲染。别漏掉“停止条件”，否则无限执行：

let animationId = null; const animate = () => {   // 更新逻辑：比如 this.x += this.speed   update();   // 渲染逻辑：比如 element.style.transform = `translateX(${this.x}px)`   render();   // 关键：下一次重绘前继续调用   animationId = requestAnimationFrame(animate); }; // 启动 animationId = requestAnimationFrame(animate); // 停止（例如离开页面或动画完成） // cancelAnimationFrame(animationId);

• 必须把 requestAnimationFrame 的返回值存起来，才能后续用 cancelAnimationFrame 中断
• 不要在回调里直接写 requestAnimationFrame(animate) 而不赋值 —— 这会导致无法取消
• 更新（update）和渲染（render）应尽量轻量；重计算放 Web Worker，dom 操作批量做

如何处理不同设备刷新率下的时间一致性

requestAnimationFrame 回调函数会接收一个高精度时间戳（DOMHighResTimeStamp），单位毫秒，从页面加载开始计时。用它计算真实经过时间，可让动画速度不随帧率浮动：

立即学习“Java免费学习笔记（深入）”；

let lastTime = 0; const animate = (currentTime) => {   const deltaTime = currentTime - lastTime;   lastTime = currentTime; 
// 例如：每秒移动 100px，则这一帧应移动 (100  deltaTime / 1000) px this.x += this.speed  deltaTime / 1000;
render(); requestAnimationFrame(animate); };

• 不用 Date.now() —— 它精度低，且不受浏览器节流策略保护
• 避免用固定增量（如 this.x += 2）—— 在 30Hz 屏幕上会慢一半
• 如果动画需严格帧数控制（如 24fps 过场），仍需用时间戳做采样过滤，而非硬等帧

常见踩坑：CSS 动画 vs JS 动画的边界在哪

不是所有动效都该用 requestAnimationFrame 手写。浏览器对 CSS transform/opacity 的动画做了硬件加速和合成层优化，性能远超 JS 操控 style；而 JS 适合做需要动态逻辑判断的动画（比如跟随鼠标、物理模拟、数据驱动形变）。混用时尤其注意：

• CSS 动画正在运行时，JS 直接改 element.style.transform 会强行中断 CSS 动画并覆盖，造成跳变
• 用 getComputedStyle 读取 transform 值再解析 —— 成本高，且返回的是 matrix，非原始值
• 想用 JS 控制但保留 CSS 加速？优先用 transform: translateZ(0) 或 will-change: transform 提前升层，再用 requestAnimationFrame 改 style.transform

真正难的不是写循环，而是判断该不该用它、怎么跟 CSS 协同、以及如何让时间计算不漂移 —— 这些细节没处理好，60fps 的承诺就只是幻觉。