JS动画实现原理_RequestAnimationFrame-js教程-PHP中文网

JS动画实现原理_RequestAnimationFrame

狼影

发布： 2025-11-16 12:48:05

原创

448人浏览过

requestAnimationFrame（rAF）是实现流畅JavaScript动画的核心API，它通过在浏览器重绘前调用回调函数，使动画与屏幕刷新率同步。相比setTimeout或setInterval，rAF能根据设备实际刷新率（如60Hz或120Hz）动态调整执行频率，避免卡顿和掉帧，并在页面不可见时自动暂停，节省资源。其基本用法是定义一个递归调用requestAnimationFrame的动画函数，利用浏览器传入的高精度时间戳（currentTime）计算动画进度，结合performance.now()实现精准控制。使用时需注意仅单次触发，需手动维持动画循环，避免复杂计算影响性能，并通过逻辑条件终止动画。掌握rAF是现代前端高性能动画的基础实践。

js动画实现原理_requestanimationframe

JavaScript动画的核心在于控制元素的样式随时间变化，而实现流畅动画的关键是选择合适的时机更新画面。传统做法使用setTimeout或setInterval驱动动画，但这类方法无法与浏览器的刷新节奏同步，容易造成卡顿或掉帧。现代Web推荐使用requestAnimationFrame（简称rAF）来实现更高效、更平滑的动画效果。

什么是RequestAnimationFrame？

requestAnimationFrame是一个浏览器提供的API，它告诉浏览器你希望执行动画，并请求浏览器在下一次重绘之前调用指定的回调函数。该方法会根据屏幕刷新率自动调节执行频率，通常是每秒60次（即约16.7毫秒/帧），从而保证动画与屏幕刷新同步，避免撕裂和卡顿。

rAF的优势在于：

由浏览器统一调度，节省资源，页面不可见时自动暂停
自动适配设备刷新率（如60Hz、120Hz）
比setTimeout更精准，减少不必要的重绘

rAF的基本用法

使用requestAnimationFrame非常简单。你需要定义一个动画循环函数，在函数内部更新动画状态并再次调用rAF，形成递归调用：

function animate(currentTime) {
  // 更新动画逻辑，例如移动元素位置
  const elapsed = currentTime - startTime;
  element.style.transform = `translateX(${elapsed / 10}px)`;
<p>// 继续请求下一帧
if (elapsed < 2000) { // 动画持续2秒
requestAnimationFrame(animate);
}
}</p><p>// 开始动画
const startTime = performance.now();
requestAnimationFrame(animate);

登录后复制

参数currentTime是由浏览器传入的时间戳，表示当前帧开始的时间，精度高于Date.now()，适合做精确的时间计算。