requestAnimationFrame比setTimeout/setInterval更适合动画，因其由浏览器调度、对齐刷新率、页面不可见时暂停、批量执行回调、可精确取消；实现时需读取当前状态再计算、用transform避免重排、暂停恢复要取消ID并记录时间戳、避免与CSS动画冲突。
JavaScript 动画效果不是靠 setTimeout 硬拖帧率，而是该用 requestAnimationFrame —— 它由浏览器调度，更省电、更顺滑、不会被后台标签页降频。
为什么 requestAnimationFrame 比 setInterval 更适合动画
浏览器知道你正在做动画，能自动对齐屏幕刷新周期（通常是 60fps），而 setInterval(fn, 16) 只是“尽力而为”，实际可能掉帧、卡顿，甚至在页面不可见时还在跑，浪费 CPU。
-
requestAnimationFrame在页面不可见时会暂停调用，setInterval不会 - 多个
requestAnimationFrame回调会在同一帧内批量执行，避免布局抖动 - 它返回一个 ID，可用
cancelAnimationFrame(id)精确终止，比clearInterval更可控
用 requestAnimationFrame 实现一个平滑移动的 div
关键不是“动起来”，而是“动得准”：每次更新前读取当前状态，再计算下一帧位置，避免累积误差。
let posX = 0;
const box = document.getElementById('box');
const speed = 2; // 像素/帧
function animate() {
posX += speed;
if (posX > window.innerWidth - box.offsetWidth) {
posX = window.innerWidth - box.offsetWidth;
}
box.style.transform = translateX(${posX}px);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
立即学习“Java免费学习笔记（深入）”；
注意：transform 触发的是合成层，不触发重排（reflow），比直接改 left 或 margin 高效得多。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 – 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
动画中途暂停/恢复怎么处理
不能只靠布尔开关控制是否调用 requestAnimationFrame，否则帧回调还在排队。必须显式取消并重置状态。
- 用
let animationId = null记录当前动画句柄 - 暂停时调用
cancelAnimationFrame(animationId) - 恢复时重新调用
requestAnimationFrame并赋值新 ID - 如果依赖时间（比如 easing 函数），还要记录暂停时刻的
performance.now()时间戳
和 CSS 动画混用时最容易踩的坑
JavaScript 改 style.transform 和 CSS 的 @keyframes 同时作用于一个元素，会相互覆盖，尤其是 CSS 动画结束后的“保持最终状态”行为，常导致 JS 动画突兀跳变。
- 确保 CSS 动画加了
animation-fill-mode: forwards或干脆不用它控制同一属性 - 用
getComputedStyle(el).transform读取真实变换值，别信 JS 里存的变量（CSS 可能已覆盖） - 想交互动画交给 JS、过渡效果交给 CSS，职责分开更稳
真正难的不是让东西动起来，而是动得精确、可中断、不打架、不掉帧——这些细节藏在每一帧的读写顺序和取消逻辑里。