JavaScript动画实现方法及requestAnimationFrame教程

本文深入解析了如何使用 requestAnimationFrame（rAF）实现高性能、流畅的 JavaScript 动画，强调其相比 setTimeout/setInterval 的核心优势：与屏幕刷新率精准同步、自动暂停省电、免手动帧率计算；通过递归调用和时间戳控制实现稳定进度动画，并详解了停止动画、避免强制重排、优先使用 transform/opacity 等关键实践技巧，还提供了兼容旧浏览器的 polyfill 方案——帮你写出既丝滑又健壮的现代 Web 动画。

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

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

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

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

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

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

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

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

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

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

let startTime = null;
const duration = 2000; // 动画总时长 2s
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]
// 使用 progress 计算当前状态（线性、缓动等）
const x = progress * 300;
element.style.transform = translateX(${x}px);
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);

实际开发中的关键细节

停止动画要主动取消：保存 rAF 返回的 ID，用 cancelAnimationFrame(id) 中断循环，否则会持续占用资源。

避免在动画帧中强制重排（layout thrashing）：不要在循环里反复读取 offsetTop、getBoundingClientRect() 等触发回流的属性；可先批量读取，再批量写入。

结合 CSS 变换更高效：优先用 transform 和 opacity，它们能走合成层，不触发布局和绘制，性能最好。

需要兼容老浏览器？ 加一层 polyfill：

const rAF = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) { return setTimeout(callback, 16); };

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~