JavaScript动画教程：requestAnimationFrame平滑实现

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学习网公众号！