核心是用requestAnimationFrame同步浏览器渲染节奏驱动轮播动画：推荐通过rAF切换class触发CSS transition，或用rAF手动插值实现自定义缓动；需配合状态锁防重复、清除rAF防内存泄漏，并优先使用transform/opacity避免重排重绘。
网页端用 requestAnimationFrame 制作轮播图，核心是把切换动画交给浏览器的渲染节奏来调度，避免 setTimeout 或 setInterval 造成的掉帧或卡顿。关键不是“一帧一帧手动切图”，而是用它驱动一个平滑的过渡过程（比如位移、透明度变化），让 CSS 动画或 JS 插值与刷新率同步。
用 rAF 驱动 CSS 过渡动画
最推荐的方式：不直接用 JS 改变位置，而是通过 JS 切换 class 触发 CSS transition，再用 requestAnimationFrame 精确控制触发时机，确保动画从下一帧开始。
- 给轮播容器设
transform: translateX()+transition: transform 0.4s ease - 每次切换前，先用
raf(() => { el.classList.add('active') })延迟到下一帧再加类，避免样式未生效就触发过渡 - 配合
getComputedStyle强制重排（可选），确保浏览器已读取当前状态再启动动画
用 rAF 实现 JS 插值动画（适合自定义缓动）
当需要贝塞尔曲线、弹性效果等 CSS 不易实现的动效时，可用 rAF 手动计算每一帧的位置：
- 记录起始位置、目标位置、开始时间、持续时间（如 400ms）
- 在 rAF 回调中，用
performance.now()计算已过去时间占比，套入缓动函数（如t => t * t）得出进度 - 更新
transform: translateX(${easedX}px)，然后继续调用 rAF 直到完成 - 注意：动画结束必须清除 rAF，否则持续占用资源
配合轮播逻辑做节流和状态管理
rAF 本身不解决“快速连点导致动画错乱”的问题，需配合状态锁和防重复触发：
- 设置
isAnimating = true，在 rAF 动画开始时置为 true，完成回调中置为 false - 用户点击下一张时，先检查
if (isAnimating) return - 自动轮播用
setTimeout定时触发切换，但实际动画仍交由 rAF 执行——即定时器只负责“发令”，rAF 负责“执行”
兼容性与性能提醒
requestAnimationFrame 在现代浏览器中支持良好（IE10+），但要注意：
- 不要在 rAF 回调里做重排（如读 offsetLeft 后立刻改 style），会强制同步布局，拖慢帧率
- 优先使用
transform和opacity动画，它们走合成层，不触发布局和绘制 - 移动端需加
will-change: transform提前提示浏览器优化（慎用，仅对频繁动画元素）
