首页 > 文章 > 前端

JavaScript动画教程：requestAnimationFrame平滑实现

时间：2026-02-04 19:14:51 184浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript动画制作教程：requestAnimationFrame实现平滑效果》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

requestAnimationFrame 比 setTimeout 更适合动画，因其自动对齐屏幕刷新率（如60Hz），避免丢帧卡顿；setTimeout 时机不可控，易累积误差、触发重排抖动，后台或高负载时掉帧明显；且 requestAnimationFrame 在标签页不可见时自动暂停，节省资源。

javascript动画如何制作_如何使用requestAnimationFrame实现平滑动画【教程】

requestAnimationFrame 为什么比 setTimeout 更适合动画

因为 requestAnimationFrame 会自动对齐屏幕刷新率（通常是 60Hz），避免丢帧和卡顿；而 setTimeout 的执行时机不可控，容易累积误差、触发重排抖动，尤其在页面后台或 CPU 压力大时掉帧明显。

浏览器还可能在标签页不可见时暂停 requestAnimationFrame，节省资源——这是默认优化，不用手动处理。

它不接受毫秒参数，只传一个时间戳（DOMHighResTimeStamp），单位是毫秒但精度可达微秒级
必须在每次回调里主动调用下一次 requestAnimationFrame，否则动画只执行一帧
不要在回调里做大量计算或 DOM 写操作，否则拖慢渲染帧率

最简可用的 requestAnimationFrame 动画循环

下面这段代码让一个

水平匀速移动到 400px：

let start = null;
const box = document.getElementById('box');
const duration = 2000; // 动画总时长 2s
<p>function animate(timestamp) {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / duration, 1);
box.style.transform = <code>translateX(${progress * 400}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);</p>

注意：timestamp 是高精度时间戳，不是 Date.now()；progress 用 Math.min 防止超调；动画结束时不继续调用 requestAnimationFrame，避免无谓循环。

如何实现 easing 缓动效果

直接线性运动生硬。要加缓动，只需把 progress 输入进一个缓动函数，输出调整后的进度值。比如 ease-in-out：

function easeInOutCubic(t) {
  return t <p>然后替换原逻辑中的 <code>progress</code>：</p><pre class="brush:php;toolbar:false;">const eased = easeInOutCubic(progress);
box.style.transform = `translateX(${eased * 400}px)`;

别手写复杂缓动公式，用现成库如 ts-easing 或直接抄 easings.net 的 JS 版本
CSS transition 也支持 cubic-bezier()，但 JS 控制更适合需要动态中断、变速或联动的场景
缓动函数输入范围必须是 [0, 1]，输出也应保持在 [0, 1]，否则动画会反向或超限

动画中途暂停、取消和重新开始的正确姿势

requestAnimationFrame 本身没有暂停机制，靠控制是否继续调用实现。关键是要保存当前状态（位置、起始时间、是否暂停）：

用一个 let animationId = null 存储当前帧 ID，调用 cancelAnimationFrame(animationId) 中断
暂停时记录 lastTimestamp 和当前 progress，恢复时用新 timestamp 减去已耗时，算出剩余时间
不要在暂停后立刻再调 requestAnimationFrame，等用户点击“继续”才启动
如果动画依赖外部数据（比如鼠标位置），确保回调里读取的是最新值，而不是闭包里冻结的老值

真正难的不是启停逻辑，而是状态同步：DOM 位置、JS 进度变量、动画时间轴三者必须始终一致，稍有错位就会跳变。这点很容易被忽略。

本篇关于《JavaScript动画教程：requestAnimationFrame平滑实现》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

前往漫画官网入口并下载 ➜