动画原理 requestAnimationFrame
requestAnimationFrame（rAF）是浏览器原生的动画接口：把回调排到下一次重绘前执行，与显示器刷新率同步（通常 60fps）。它比 setInterval 更准、更省电，是写 JS 动画的现代标准。
rAF 的优势：页面切到后台时自动暂停（setInterval 会继续空转耗电）；刷新率变化时自动适配（120Hz 屏自动 120fps）。几乎所有动画库（GSAP、Framer Motion）底层都是 rAF。
- rAF 在每次重绘前调用，天然对齐刷新率
- 后台标签页自动暂停，不耗电
- 用时间差（timestamp）计算位移，与帧率解耦
HTML
<style> #ball { width: 40px; height: 40px; border-radius: 50%; background: #4a9eff; position: relative; margin-top: 30px; } </style> <button id="go" style="padding:8px 20px">用 rAF 滚动小球</button> <div id="ball"></div> <script> document.getElementById('go').addEventListener('click', function () { var ball = document.getElementById('ball'), start = null; function step(ts) { if (!start) start = ts; var t = (ts - start) / 1000; // 经过的时间（秒） var x = Math.min(t * 180, 300); // 时间驱动位移，与帧率无关 ball.style.transform = 'translateX(' + x + 'px)'; if (x < 300) requestAnimationFrame(step); } requestAnimationFrame(step); }); </script>
本节要点动画用 rAF 而非 setInterval；位移用时间戳计算，天然抗帧率波动。
