JS 如何用 requestAnimationFrame 优化动画？

Question

仓乃文 · Accepted Answer

setInterval/setTimeout 做动画无法与浏览器刷新率同步，容易丢帧或卡顿。requestAnimationFrame 在每次重绘前执行回调，自动匹配屏幕刷新率，动画更流畅。

requestAnimationFrame 动画：
```javascript
function animate(element, target, duration = 1000) {
  const start = element.offsetLeft;
  const distance = target - start;
  const startTime = performance.now();

function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);  // easeOutCubic 缓动

element.style.transform = `translateX(${start + distance * eased}px)`;

if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

requestAnimationFrame(step);
}
```

节流替代方案：
```javascript
// 用 rAF 替代 scroll 事件的节流
let ticking = false;
window.addEventListener("scroll", () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updateLayout();
      ticking = false;
    });
    ticking = true;
  }
});
```

补充说明：
- rAF 回调在每次重绘前执行，通常是 60fps（16.67ms 一次）
- 页面不可见时 rAF 自动暂停，节省 CPU 和电池
- performance.now() 提供高精度时间戳，比 Date.now() 更适合动画计算
- 取消动画用 cancelAnimationFrame(id)，类似 clearTimeout