当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动画实现方法详解

JavaScript动画实现方法详解

2026-03-26 15:29:38 0浏览收藏

本文深入解析了JavaScript动画实现的核心原则与最佳实践，强调必须使用requestAnimationFrame而非setTimeout或setInterval，因其能由浏览器智能调度、精准对齐屏幕刷新率、在页面不可见时自动暂停，从而避免卡顿、跳帧和资源浪费；文章不仅提供可中断、可控制的位移动画实战代码，还揭示了性能关键细节——如优先使用transform触发GPU加速、用performance.now()保障时间精度、基于真实耗时而非帧数计算进度，并理性对比CSS动画与JS动画的适用边界：JS动画真正的价值在于动态响应、精确帧控和复杂交互逻辑，而非替代CSS完成简单过渡；想写出丝滑、健壮、可维护的动画？答案不在堆砌技巧，而在理解机制、规避重排、尊重浏览器渲染原理。

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"><code>element.style.transform = `translateX(${current}px)`;

if (progress < 1) {
  element.__animationId = requestAnimationFrame(step);
} else {
  element.__animationId = null;
}</code>

}

element.__animationId = requestAnimationFrame(step); }

// 停止动画 function stopAnimation(element) { if (element.animationId) { cancelAnimationFrame(element.animationId); element.__animationId = null; } }

注意点：