使用requestAnimationFrame可实现流畅动画，它基于屏幕刷新率同步调度，避免卡顿；结合transform/opacity减少重排重绘，利用时间戳计算动画进度，控制生命周期防止资源浪费，提升性能。
在JavaScript中实现流畅动画时，requestAnimationFrame（简称rAF）是浏览器提供的专为动画设计的API。相比使用setTimeout或setInterval，它能更好地与浏览器刷新率同步，提升性能和用户体验。但要真正发挥其优势，还需要结合优化策略。
理解requestAnimationFrame的工作机制
rAF告诉浏览器你希望执行动画，并请求浏览器在下一次重绘前调用指定函数更新动画帧。该方法每秒通常执行60次（即60Hz），每次传入一个高精度时间戳作为参数，开发者可利用这个时间差计算动画进度。
基本用法如下：
function animate(currentTime) {
// 计算经过的时间或进度
const elapsed = currentTime - startTime;
// 更新元素位置、透明度等样式
element.style.transform = `translateX(${elapsed * 2}px)`;
// 继续请求下一帧
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);这种方式避免了固定间隔带来的卡顿问题，因为它是根据屏幕刷新节奏来调度的。
立即学习“Java免费学习笔记（深入）”；
避免过度重排与重绘
频繁操作DOM样式可能触发浏览器的重排（reflow）和重绘（repaint），严重影响性能。为了优化：
- 尽量使用transform和opacity属性进行动画，它们由合成器线程处理，不触发重排
- 避免在动画循环中读取布局属性如offsetTop、clientWidth等，这会强制同步重排
- 批量修改样式，先计算最终值再一次性写入
控制动画生命周期与节流
不必要的动画持续运行会浪费资源，尤其在页面不可见或元素已移除时。应主动管理动画状态：
- 当页面失去焦点（如切换标签页）时，可通过监听页面可见性（visibilitychange）暂停非关键动画
- 在组件卸载或动画结束时，停止调用requestAnimationFrame，防止内存泄漏
- 对多个rAF回调进行合并管理，避免过多嵌套调用
示例：通过标志位终止动画
let running = true;
function animate() {
if (!running) return;
// 动画逻辑
requestAnimationFrame(animate);
}
// 停止动画
running = false;
结合时间戳实现平滑过渡
利用rAF传入的时间戳，可以实现基于时间的动画曲线（如ease-in-out），而不是依赖帧数累加。这样即使帧率波动，动画仍保持一致时长和节奏。
- 记录起始时间startTime，在每一帧计算当前进度ratio = (currentTime - startTime) / duration
- 使用缓动函数处理ratio，生成更自然的视觉效果
- 当ratio ≥ 1时结束动画，清理回调
基本上就这些。合理使用requestAnimationFrame配合样式优化与生命周期控制，能让JavaScript动画既流畅又高效。关键是让动画“聪明地运行”，而不是一味追求帧率。
