rAF 比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用 transform/opacity，并可添加 polyfill 兼容旧浏览器。
用 requestAnimationFrame（简称 rAF）实现 JavaScript 动画，核心是让浏览器按自身刷新节奏驱动动画帧，避免 setTimeout 或 setInterval 的时间不可控问题，从而获得更流畅、更省电、更精准的视觉效果。
为什么 rAF 比定时器更适合动画？
rAF 会把回调函数安排在浏览器下一次重绘前执行，通常与屏幕刷新率（如 60Hz 对应 ~16.7ms/帧）同步。这意味着：
动画帧不会被丢弃或堆积，避免卡顿和跳帧页面不可见时（如切换标签页），rAF 自动暂停，节省 CPU 和电量无需手动计算帧间隔，浏览器自动优化调度
基础用法：一个最简动画循环
关键点是“递归调用”——在 rAF 回调里再次请求下一帧：
function animate() { // 更新状态（比如位置、透明度） element.style.transform = `translateX(${x}px)`;// 请求下一帧requestAnimationFrame(animate);}
// 启动动画requestAnimationFrame(animate);
注意：不要用 setInterval(animate, 16) 模拟，它无法对齐刷新节奏，且不可暂停。
立即学习“Java免费学习笔记（深入）”；
带时间控制的动画（推荐）
rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp），可用于计算真实经过时间，让动画不受帧率波动影响：
let startTime = null;const duration = 2000; // 动画总时长 2sfunction animate(timestamp) {if (!startTime) startTime = timestamp;const elapsed = timestamp - startTime;const progress = Math.min(elapsed / duration, 1); // 归一化进度 [0, 1]
// 使用 progress 计算当前状态（线性、缓动等）const x = progress * 300;element.style.transform =
translateX(${x}px);if (progress < 1) {requestAnimationFrame(animate);}}
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创建流畅动画？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544724.html
微信扫一扫 
支付宝扫一扫 
