RequestAnimationFrame 浏览器动画 API

requestAnimationFrame 是浏览器提供的动画 API‌，用来让网页动画跟屏幕刷新节奏同步，比定时器更流畅省电 。‌‌‌

工作原理

1. ‌执行时机由浏览器决定‌：你告诉浏览器"要做动画了"，它会在下次屏幕重绘前调用你的回调函数，不用自己计算时间间隔 。
2. ‌跟着屏幕刷新率走‌：如果屏幕每秒刷新 60 次，回调就约每 16.7 毫秒执行一次；如果是 75Hz 屏幕，就变成约 13.3 毫秒一次 。
3. ‌页面隐藏自动暂停‌：当你切换到其他标签页或最小化浏览器时，动画会自动停止，不会白白消耗 CPU 和电量 。‌‌‌

用起来有什么好处

1. ‌动画更流畅不卡顿‌：定时器可能两次回调挤在同一帧，或者跨帧丢帧，这个 API 保证每帧只执行一次，避免画面撕裂 。
2. ‌省电省资源‌：页面不可见时自动暂停，不像 setTimeout/setInterval 会在后台继续跑，浪费 CPU 和 GPU 。
3. ‌不用手动节流‌：高频事件如滚动、窗口大小变化时，它能保证每个刷新间隔内函数只执行一次，不用自己写节流逻辑 。‌‌‌

代码怎么写

1. ‌基本用法‌：传入一个回调函数，它会递归调用自己形成动画循环 。
   • 函数会收到一个时间戳参数，用来计算动画进度。
   • 返回一个请求 ID，可以用来取消动画。
2. ‌启动动画示例‌：
   • requestAnimationFrame(animate) 开始动画。
   • animate 函数里更新画面后再次调用 requestAnimationFrame(animate)
3. ‌停止动画‌：用 cancelAnimationFrame(请求 ID) 取消回调 。‌‌‌
4. ‌兼容性处理‌：现代浏览器都原生支持，老版本 IE 可能需要加前缀如 webkitRequestAnimationFrame，现在基本不用考虑 。‌‌‌