requestAnimationFrame是浏览器专为动画设计的API，比setTimeout/setInterval更精准省电，按屏幕刷新率自动调度；需用布尔变量控制启停，推荐基于时间戳计算位移实现匀速动画。
JavaScript 动画的核心在于**平滑、高效地更新画面**，而 requestAnimationFrame（简称 rAF）正是浏览器专门为动画设计的 API。它比 setTimeout 或 setInterval 更精准、更省电、更契合浏览器刷新机制（通常 60fps），是现代 Web 动画的首选方式。
requestAnimationFrame 的基本用法
rAF 接收一个回调函数，该函数会在**浏览器下一次重绘前**被调用。它会自动根据屏幕刷新率调整执行节奏（如 60Hz 屏幕约每 16.7ms 一次），无需手动计算时间间隔。
简单示例：让一个 div 水平移动
let box = document.getElementById('box');let left = 0;function animate() {left += 2;box.style.left = left + 'px';
// 继续下一帧requestAnimationFrame(animate);}
// 启动动画requestAnimationFrame(animate);
如何控制动画启停与暂停
rAF 本身不提供暂停/取消功能，需配合变量和逻辑控制：
立即学习“Java免费学习笔记（深入）”；
用布尔值（如 isRunning）标记是否继续执行停止时不再调用 requestAnimationFrame，自然中断循环不需要“清除 ID”，rAF 没有类似 clearTimeout 的配套方法
let isRunning = true;let left = 0;function animate() {if (!isRunning) return; // 提前退出
left += 2;box.style.left = left + 'px';
requestAnimationFrame(animate);}
// 开始requestAnimationFrame(animate);
// 停止isRunning = false;
实现基于时间的匀速动画（推荐）
上面例子中直接加固定值会导致速度受帧率影响（如卡顿时变慢）。更健壮的做法是**根据时间差计算位移**：
rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp）
let lastTime = 0;const speed = 100; // px/sfunction animate(time) {if (!lastTime) lastTime = time;const deltaTime = (time - lastTime) / 1000; // 秒为单位lastTime = time;
left += speed * deltaTime;box.style.left = left + 'px';
requestAnimationFrame(animate);}
requestAnimationFrame(animate);
结合 CSS transform 提升性能
直接修改 left/top 会触发 Layout 和 Paint，开销大。推荐用 transform: translateX()，它只触发合成（Composite），由 GPU 加速：
把 box.style.left = ... 换成 box.style.transform = 'translateX(' + left + 'px)'确保元素有 will-change: transform 或启用硬件加速（如 transform: translateZ(0)）可进一步优化
基本上就这些。rAF 不复杂但容易忽略时间控制和渲染优化，掌握这几点就能写出流畅、可维护的 JS 动画。
以上就是javascript动画如何实现_如何使用requestAnimationFrame的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541834.html
微信扫一扫 
支付宝扫一扫 
