javascript如何实现动画效果【教程】-js教程-PHP中文网

必须用 requestAnimationFrame 而不是 setTimeout，因其由浏览器调度、对齐刷新率、页面不可见时自动暂停；setTimeout 受主线程阻塞影响易卡顿跳帧。

javascript如何实现动画效果【教程】

JavaScript 实现动画效果，核心不是靠“写教程”，而是选对机制、避开重排陷阱、控制好时间精度。用 setTimeout 硬拖帧容易掉帧；用 setInterval 更糟——它不感知绘制时机；真正靠谱的是 requestAnimationFrame（简称 rAF）。

为什么必须用 `requestAnimationFrame` 而不是 `setTimeout`

rAF 由浏览器调度，自动对齐屏幕刷新率（通常是 60Hz），且在页面不可见时暂停调用，省资源。而 setTimeout(fn, 16) 只是“尽量每 16ms 调一次”，实际执行受 JS 主线程阻塞、任务队列延迟影响，极易卡顿或跳帧。

常见错误现象：setTimeout 动画在滚动或 CPU 占用高时明显卡顿，甚至累积延迟导致“瞬移”。

使用场景：所有需要平滑视觉过渡的 DOM 动画（如位移、缩放、透明度变化）
性能影响：rAF 触发时若 JS 执行过久，会直接丢帧；务必把计算逻辑精简，避免在 rAF 回调里做 DOM 查询或复杂运算
兼容性：IE10+ 支持；老版本需用 window.msRequestAnimationFrame 或降级为 setTimeout（仅作保底）

如何用 `requestAnimationFrame` 写一个基础位移动画

关键不是“启动”，而是“控制生命周期”——要能暂停、停止、响应速度变化。下面是一个可中断的左移动画示例：

function animateLeft(element, from, to, duration = 300) {
  const start = performance.now();
  const distance = to - from;
<p>function step(timestamp) {
const elapsed = timestamp - start;
const progress = Math.min(elapsed / duration, 1);
const current = from + distance * progress;</p><pre class="brush:php;toolbar:false;">element.style.transform = `translateX(${current}px)`;

if (progress <p>}</p><p>element.__animationId = requestAnimationFrame(step);
}</p><p>// 停止动画
function stopAnimation(element) {
if (element.<strong>animationId) {
cancelAnimationFrame(element.</strong>animationId);
element.__animationId = null;
}
}</p>

注意点：