如何利用JavaScript创建动画效果【教程】

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);

注意：transform 触发的是合成层，不触发重排（reflow），比直接改 left 或 margin 高效得多。

动画中途暂停/恢复怎么处理

不能只靠布尔开关控制是否调用 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，职责分开更稳

真正难的不是让东西动起来，而是动得精确、可中断、不打架、不掉帧——这些细节藏在每一帧的读写顺序和取消逻辑里。