HTML Academy · 课时

使用 requestAnimationFrame 制作动画

Q: 「使用 requestAnimationFrame 制作动画」这节课中我会学到什么？

使用动画帧循环构建流畅的画布动画 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用动画帧循环构建流畅的画布动画

使用 requestAnimationFrame 制作动画 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

为什么使用 requestAnimationFrame

requestAnimationFrame（rAF）会在浏览器下一次重绘前安排回调，使动画与显示器刷新率同步（通常为 60 FPS）。与 setInterval 不同，标签页隐藏时 rAF 会暂停，从而节省 CPU 和电量。

基本动画循环

rAF 循环的做法是：定义一个动画函数来绘制当前帧，然后调用 requestAnimationFrame(animate) 安排下一帧。浏览器会在每次重绘前调用该函数，从而以显示器的帧率创建连续动画。

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

时间戳参数

rAF 会将一个高分辨率时间戳（页面加载后的毫秒数）传递给回调。请使用它计算与帧率无关的运动：delta = timestamp - lastTimestamp。将速度乘以经过的时间，这样无论帧率如何，每秒移动的距离都相同。

与帧率无关的运动

计算自上一帧以来经过的时间，并据此缩放移动距离。以 100 像素/秒移动的对象，每帧移动 100 * (delta / 1000) 个像素。这样可以确保在 30 FPS 和 144 FPS 的显示器上都具有一致的物理效果。

停止动画

rAF 会返回一个句柄。使用 cancelAnimationFrame(handle) 取消它。请将句柄存入变量，在循环内检查运行标志，或在组件清理时取消。元素从 DOM 中移除时，务必取消循环。

画布动画模式

每一帧执行以下操作：(1) 使用 clearRect 清空整个画布；(2) 更新状态变量（位置、角度、时间）；(3) 在新位置绘制所有对象；(4) 调用 requestAnimationFrame 安排下一帧。绝不要跳过 clearRect，否则旧帧会累积成拖尾。

CSS 过渡与 rAF

对于简单的、基于属性的动画（悬停效果、模态框滑入），请使用 CSS 过渡和动画。对于复杂的交互式动画——游戏循环、物理模拟、画布渲染——请使用 rAF，因为这类场景需要精细控制每一帧。

画布双重缓冲

对于复杂场景，请先在离屏画布上绘制，然后通过一次操作使用 drawImage 将其绘制到可见画布上。这样可以避免闪烁，因为用户永远不会看到只绘制了一部分的帧；可见画布会在每一帧中以原子方式更新。

限制到目标 FPS

限制为较低的帧率（例如 30 FPS）：在渲染前检查自上次绘制以来是否已经经过足够的时间。if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }。无论是否绘制，都应安排 rAF，以保持响应能力。

调试动画

浏览器 DevTools 的性能面板会在 JS 火焰图中记录 rAF 回调。请查找超过 16ms 的长回调，它们会导致丢帧。使用 FPS 计量器（渲染 → FPS 计量器）观察交互期间的实时帧率。

Web Animations API 替代方案

如果需要更简单的声明式动画而不想手动计时，可以使用：element.animate(keyframes, options)。WAAPI 会处理时间函数、填充模式和迭代，并将帧计算交给浏览器。对于 WAAPI 无法表达的自定义渲染逻辑，请使用 rAF。

知识检查

为什么在 requestAnimationFrame 循环中应将动画速度乘以经过的时间？

总结

requestAnimationFrame 会使 JavaScript 动画与显示器刷新率同步，并在隐藏的标签页中暂停。时间戳参数通过按经过时间缩放，实现与帧率无关的运动。画布动画循环模式（清空、更新、绘制、安排）与用于清理的 cancelAnimationFrame 相结合，构成了流畅高效的网页动画基础。

常见问题解答

「使用 requestAnimationFrame 制作动画」课时是免费的吗？

是的 — 「使用 requestAnimationFrame 制作动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「使用 requestAnimationFrame 制作动画」这节课中我会学到什么？

使用动画帧循环构建流畅的画布动画你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 requestAnimationFrame 制作动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy