在JS中实现动画的核心逻辑是通过不断修改元素的样式属性，让元素在每一帧呈现不同的状态，从而在视觉上形成连续的动态效果，而帧控制就是决定每一帧何时执行、执行频率如何的关键机制。
常见的JS动画帧控制方法
1. setTimeout实现帧控制
setTimeout是最早被用于实现JS动画的帧控制方法，它的原理是设置一个延迟时间，时间到达后执行回调函数，在回调函数中再次调用setTimeout来形成循环，从而实现逐帧更新。
这种方式的问题在于setTimeout的时间精度并不稳定，它的延迟时间只是最小延迟，实际执行时间会受到JS事件队列、主线程繁忙程度的影响，容易出现帧率不稳定的情况，进而导致动画卡顿。下面是一个简单的移动动画示例：
// 获取需要动画的元素
const box = document.getElementById('box');
// 初始位置
let position = 0;
// 动画帧更新函数
function updatePosition() {
position += 2;
// 修改元素left属性实现移动
box.style.left = position + 'px';
// 当位置小于400px时继续下一帧
if (position < 400) {
setTimeout(updatePosition, 16); // 约等于60帧的间隔
}
}
// 启动动画
updatePosition();
2. setInterval实现帧控制
setInterval和setTimeout类似，它会按照固定的时间间隔重复执行回调函数，不需要手动在回调中再次调用自身来形成循环。但setInterval同样存在时间精度问题，而且如果上一帧的回调函数还没有执行完，下一帧的回调就会被加入到队列中，导致多帧回调堆积，动画表现异常。
以下是使用setInterval实现的相同移动动画：
const box = document.getElementById('box');
let position = 0;
// 设置间隔16ms执行一次
const timer = setInterval(() => {
position += 2;
box.style.left = position + 'px';
// 位置到达400px时清除定时器
if (position >= 400) {
clearInterval(timer);
}
}, 16);
3. requestAnimationFrame实现帧控制
requestAnimationFrame是浏览器专门为动画提供的帧控制API，它的执行时机和浏览器的刷新频率保持一致，通常在屏幕刷新前执行回调函数，默认情况下帧率和屏幕刷新率一致，一般是60帧每秒，不需要开发者手动设置间隔时间。
它的最大优势是性能更好，当页面处于后台或者最小化时，浏览器会自动暂停requestAnimationFrame的回调执行，减少不必要的性能消耗，而且它的时间精度更高，动画流畅度远优于前两种方法。下面是使用requestAnimationFrame实现的移动动画：
const box = document.getElementById('box');
let position = 0;
// 动画帧更新函数
function animate() {
position += 2;
box.style.left = position + 'px';
if (position < 400) {
// 请求下一帧执行animate函数
requestAnimationFrame(animate);
}
}
// 启动动画
requestAnimationFrame(animate);
三种帧控制方法的对比
我们可以通过下表直观看到三种方法的差异：
| 方法 | 时间精度 | 后台执行 | 性能表现 | 适用场景 |
|---|---|---|---|---|
| setTimeout | 低，受事件队列影响 | 会继续执行 | 一般 | 简单低要求动画，兼容性要求高（支持旧浏览器） |
| setInterval | 低，可能回调堆积 | 会继续执行 | 一般 | 简单定时任务，不推荐用于复杂动画 |
| requestAnimationFrame | 高，和屏幕刷新同步 | 自动暂停 | 优秀 | 所有前端动画场景，尤其是高性能要求的动画 |
帧控制中的时间校准
使用requestAnimationFrame时，我们可以通过回调函数的参数获取当前的时间戳，用来做时间校准，避免因为帧率波动导致的动画速度不一致。比如下面的示例，让元素在2秒内匀速移动400px：
const box = document.getElementById('box');
// 动画总时长2秒，总移动距离400px
const duration = 2000;
const totalDistance = 400;
// 记录动画开始时间
let startTime = null;
function animate(timestamp) {
if (!startTime) {
startTime = timestamp;
}
// 计算已经过去的时间
const elapsed = timestamp - startTime;
// 计算当前进度，最大为1
const progress = Math.min(elapsed / duration, 1);
// 根据进度计算当前位置
const currentPosition = progress * totalDistance;
box.style.left = currentPosition + 'px';
// 进度没到1就继续下一帧
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
在实际开发中，只要不是需要兼容非常旧的浏览器，都推荐使用requestAnimationFrame作为JS动画的帧控制方法，它能最大程度保证动画的流畅性和性能表现。
JavaScriptrequestAnimationFramesetTimeout动画帧控制修改时间：2026-06-19 13:09:37