javascript动画如何实现_requestAnimationFrame如何使用？

requestAnimationFrame 是浏览器原生API，用于在下一次重绘前执行动画回调，与屏幕刷新率同步、省电流畅；而 setTimeout 是定时器，接受毫秒参数，易掉帧、堆叠回调且后台不暂停。

requestAnimationFrame 是什么，和 setTimeout 有什么区别？

requestAnimationFrame 是浏览器提供的原生 API，用于在下一次重绘前执行动画回调。它不是定时器，不接受毫秒参数，也不保证固定间隔——而是由浏览器决定何时调用，通常与屏幕刷新率（如 60Hz）同步，因此更省电、更流畅。

相比 setTimeout 或 setInterval，它不会在页面后台或 tab 非激活时持续运行，避免资源浪费；也不会因 js 主线程阻塞而“堆叠”回调（setTimeout 在卡顿时可能集中触发多次）。

常见错误现象：
– 用 setTimeout(..., 16) 模拟 60fps，但实际帧率不稳定，尤其在低端设备或高负载时掉帧严重；
– 动画卡顿、跳帧，或在滚动/交互中明显滞后。

基础用法：如何写一个最简动画循环？

核心是「递归调用」+「时间戳控制」。浏览器传入的 timestamp（domHighResTimeStamp）是自页面加载以来的毫秒数，精度达微秒级，比 date.now() 更可靠。

• 必须手动调用 requestAnimationFrame 再次注册下一次帧，否则只执行一次
• 不要在回调里直接修改 DOM 属性再立刻读取（如 el.style.left = '100px'; console.log(el.offsetLeft)），会强制同步布局，拖慢帧率
• 若需控制动画进度，用时间差（timestamp - startTime）计算，而非帧数计数

let startTime = 0; function animate(timestamp) {   if (!startTime) startTime = timestamp;   const elapsed = timestamp - startTime;   const progress = Math.min(elapsed / 2000, 1); // 2s 动画   el.style.transform = `translateX(${progress * 200}px)`; 
if (progress < 1) { requestAnimationFrame(animate); } } requestAnimationFrame(animate);

cancelAnimationFrame 怎么配合使用？

动画中途停止、组件卸载、响应用户中断（如鼠标移出）时，必须调用 cancelAnimationFrame 清除待执行帧，否则回调仍会继续排队，造成内存泄漏或意外更新。

立即学习“Java免费学习笔记（深入）”；

关键点：
– requestAnimationFrame 返回一个整数 ID，必须保存下来供后续取消
– 多次调用 requestAnimationFrame 会产生多个独立 ID，每个都要单独取消（不能靠「最后一次 ID 覆盖」来管理）
– react/vue 等框架中，在 useEffect 的 cleanup 或 beforeUnmount 钩子中取消

let animationId = 0; function start() {   function step() {     // ...动画逻辑     animationId = requestAnimationFrame(step);   }   animationId = requestAnimationFrame(step); } 
function stop() { if (animationId) { cancelAnimationFrame(animationId); animationId = 0; } }

为什么动画卡顿？几个真实踩坑点

即使用了 requestAnimationFrame，动画仍可能卡顿。根本原因常不在 API 本身，而在操作方式：

• 频繁读写同一元素的几何属性（如 offsetTop + style.left），触发 Layout Thrashing
• 在帧回调中执行大量计算、DOM 查询或未优化的 canvas 绘图
• 用 style.left/top 而非 transform 或 opacity，导致每次重排（reflow）
• 监听了 scroll 或 resize 并直接在里面调用 requestAnimationFrame，但没做节流，导致 ID 泛滥

性能敏感场景建议：只对 transform 和 opacity 做动画；用 getBoundingClientRect() 批量读取；复杂逻辑移到 Web Worker；滚动动画优先用 css scroll-behavior 或 IntersectionObserver 替代手动监听。