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 回调函数会接收一个高精度时间戳（DOMHigh

ResTimeStamp），单位毫秒，从页面加载开始计时。用它计算真实经过时间，可让动画速度不随帧率浮动：

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 的承诺就只是幻觉。

# css # javascript # java # js # 浏览器 # 回调函数 # 显示器 # 硬件加速 # 重绘 # 为什么 # date # 递归 # 循环 # 线程 # 主线程

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】