HTML5 中怎么使用 requestAnimationFrame 替代定时器实现流畅的画布动画-H5教程-PHP中文网

用 requestanimationframe 替代 settimeout/setinterval 可实现与屏幕刷新率同步的高性能 canvas 动画，避免丢帧、卡顿和资源浪费；它由浏览器统一调度，支持自动降频或暂停，且需结合时间差（deltatime）实现匀速运动。

html5 中怎么使用 requestanimationframe 替代定时器实现流畅的画布动画

用 requestAnimationFrame（简称 rAF）替代 setTimeout 或 setInterval 是实现高性能 Canvas 动画的关键。它让浏览器决定最佳绘制时机，与屏幕刷新率同步（通常是 60fps），避免丢帧、卡顿和过度渲染。

为什么 rAF 比定时器更合适

rAF 不是“每 16ms 调一次”，而是由浏览器统一调度：在下一帧准备就绪时才执行回调；如果标签页不可见、动画暂停或系统负载高，它会自动降频甚至暂停，节省 CPU 和电量。而 setInterval(16) 强行触发，可能造成绘制堆积、掉帧，甚至在后台持续运行浪费资源。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

基础用法：一个标准的动画循环

核心是递归调用 rAF，并在每次回调中更新状态、清空画布、重绘：

let animationId;
<p>function animate() {
// 1. 更新逻辑（位置、角度、速度等）
ball.x += ball.vx;
ball.y += ball.vy;</p><p>// 2. 清空画布（按需：全清 / 局部擦除 / 覆盖重绘）
ctx.clearRect(0, 0, canvas.width, canvas.height);</p><p>// 3. 绘制当前帧
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
ctx.fill();</p><p>// 4. 请求下一帧（必须放在最后！）
animationId = requestAnimationFrame(animate);
}</p><p>// 启动动画
animationId = requestAnimationFrame(animate);</p><p>// 停止动画（例如页面隐藏、用户暂停时）
// cancelAnimationFrame(animationId);</p>

处理时间差，实现匀速运动

rAF 的实际间隔不恒定（可能 14ms 或 17ms）。若直接用固定增量（如 x += 2），设备性能差异会导致快慢不一。应基于时间差计算位移：

在首次调用时记录 startTime 或上一帧时间戳
每次回调接收浏览器传入的 timestamp（DOMHighResTimeStamp，单位毫秒）
用当前时间减去上次时间，得到 deltaTime（毫秒），再换算为秒参与物理计算

let lastTime = 0;
const speed = 100; // 像素/秒
<p>function animate(timestamp) {
if (!lastTime) lastTime = timestamp;
const deltaTime = (timestamp - lastTime) / 1000; // 转为秒
lastTime = timestamp;</p><p>// 位移 = 速度 × 时间（单位一致！）
ball.x += speed * deltaTime;</p><p>ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
ctx.fill();</p><p>requestAnimationFrame(animate); // 无需存 ID，除非要停止
}
requestAnimationFrame(animate);</p>