javascript动画如何实现_如何使用requestAnimationFrame

requestAnimationFrame是浏览器专为动画设计的API，比setTimeout/setInterval更精准省电，按屏幕刷新率自动调度；需用布尔变量控制启停，推荐基于时间戳计算位移实现匀速动画。

JavaScript 动画的核心在于**平滑、高效地更新画面**，而 requestAnimationFrame（简称 rAF）正是浏览器专门为动画设计的 API。它比 setTimeout 或 setInterval 更精准、更省电、更契合浏览器刷新机制（通常 60fps），是现代 Web 动画的首选方式。

requestAnimationFrame 的基本用法

rAF 接收一个回调函数，该函数会在**浏览器下一次重绘前**被调用。它会自动根据屏幕刷新率调整执行节奏（如 60Hz 屏幕约每 16.7ms 一次），无需手动计算时间间隔。

简单示例：让一个 p 水平移动

let box = document.getElementById('box');
let left = 0;
<p>function animate() {
left += 2;
box.style.left = left + 'px';</p><p>// 继续下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);</p>

如何控制动画启停与暂停

rAF 本身不提供暂停/取消功能，需配合变量和逻辑控制：

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

标签： javascript java 浏览器 回调函数 重绘