javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？

rAF 比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用 transform/opacity，并可添加 polyfill 兼容旧浏览器。

用 requestAnimationFrame（简称 rAF）实现 JavaScript 动画，核心是让浏览器按自身刷新节奏驱动动画帧，避免 setTimeout 或 setInterval 的时间不可控问题，从而获得更流畅、更省电、更精准的视觉效果。

为什么 rAF 比定时器更适合动画？

rAF 会把回调函数安排在浏览器下一次重绘前执行，通常与屏幕刷新率（如 60Hz 对应 ~16.7ms/帧）同步。这意味着：

• 动画帧不会被丢弃或堆积，避免卡顿和跳帧
• 页面不可见时（如切换标签页），rAF 自动暂停，节省 CPU 和电量
• 无需手动计算帧间隔，浏览器自动优化调度

基础用法：一个最简动画循环

关键点是“递归调用”——在 rAF 回调里再次请求下一帧：

function animate() {
  // 更新状态（比如位置、透明度）
  element.style.transform = `translateX(${x}px)`;
<p>// 请求下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);

登录后复制

注意：不要用 setInterval(animate, 16) 模拟，它无法对齐刷新节奏，且不可暂停。

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

带时间控制的动画（推荐）

rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp），可用于计算真实经过时间，让动画不受帧率波动影响：

标签： css javascript java 浏览器 回调函数 win 回流 重绘 为什么