javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？-js教程-PHP中文网

javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？

夜晨

发布： 2025-12-21 16:06:39

原创

489人浏览过

rAF 比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用 transform/opacity，并可添加 polyfill 兼容旧浏览器。

javascript动画如何实现_怎样用requestanimationframe创建流畅动画？

用 requestAnimationFrame（简称 rAF）实现 JavaScript 动画，核心是让浏览器按自身刷新节奏驱动动画帧，避免 setTimeout 或 setInterval 的时间不可控问题，从而获得更流畅、更省电、更精准的视觉效果。

为什么 rAF 比定时器更适合动画？

rAF 会把回调函数安排在浏览器下一次重绘前执行，通常与屏幕刷新率（如 60Hz 对应 ~16.7ms/帧）同步。这意味着：

动画帧不会被丢弃或堆积，避免卡顿和跳帧
页面不可见时（如切换标签页），rAF 自动暂停，节省 CPU 和电量
无需手动计算帧间隔，浏览器自动优化调度

基础用法：一个最简动画循环

关键点是“递归调用”——在 rAF 回调里再次请求下一帧：

function animate() {
  // 更新状态（比如位置、透明度）
  element.style.transform = `translateX(${x}px)`;
<p>// 请求下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);

登录后复制

注意：不要用 setInterval(animate, 16) 模拟，它无法对齐刷新节奏，且不可暂停。

立即学习“Java免费学习笔记（深入）”；

带时间控制的动画（推荐）

rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp），可用于计算真实经过时间，让动画不受帧率波动影响：

Designify

拖入图片便可自动去除背景✨

查看详情

let startTime = null;
const duration = 2000; // 动画总时长 2s
<p>function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]</p><p>// 使用 progress 计算当前状态（线性、缓动等）
const x = progress * 300;
element.style.transform = <code>translateX(${x}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}</p><p>requestAnimationFrame(animate);

登录后复制

实际开发中的关键细节

停止动画要主动取消：保存 rAF 返回的 ID，用 cancelAnimationFrame(id) 中断循环，否则会持续占用资源。

避免在动画帧中强制重排（layout thrashing）：不要在循环里反复读取 offsetTop、getBoundingClientRect() 等触发回流的属性；可先批量读取，再批量写入。

结合 CSS 变换更高效：优先用 transform 和 opacity，它们能走合成层，不触发布局和绘制，性能最好。

需要兼容老浏览器？ 加一层 polyfill：

const rAF = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) { return setTimeout(callback, 16); };

登录后复制

以上就是javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？的详细内容，更多请关注php中文网其它相关文章！