javascript动画如何实现_如何使用requestAnimationFrame？-js教程-PHP中文网

javascript动画如何实现_如何使用requestAnimationFrame？

夢幻星辰

发布： 2025-12-16 20:32:58

原创

497人浏览过

requestAnimationFrame（rAF）是专为JavaScript动画设计的API，它在下一次屏幕重绘前执行回调，比setInterval更精准节能；需递归调用自身实现持续动画，并推荐基于时间戳计算位移以保障匀速。

javascript动画如何实现_如何使用requestanimationframe？

JavaScript 动画的核心是让元素在短时间内连续、平滑地更新样式，requestAnimationFrame（简称 rAF）就是为这个目的专门设计的 API —— 它让浏览器决定何时执行动画帧，比 setTimeout 或 setInterval 更精准、更节能、更契合屏幕刷新节奏。

为什么用 requestAnimationFrame 而不是 setInterval？

浏览器通常以约 60fps（每秒 60 帧）刷新画面，即每 ~16.7ms 渲染一帧。rAF 会自动把回调函数安排在**下一次屏幕重绘之前**执行，保证动画与刷新率同步；而 setInterval(fn, 16) 只是“尽力每 16ms 调用一次”，实际可能跳帧、卡顿，还可能在页面不可见时继续运行，浪费资源。

requestAnimationFrame 的基本用法

rAF 接收一个回调函数，返回一个 ID（类似 setTimeout），可用于取消动画：

调用 requestAnimationFrame(callback) 启动动画帧
回调函数中更新元素状态（如位置、透明度）
若需持续动画，在回调里**递归调用自身**（这是关键！）
用 cancelAnimationFrame(id) 中止动画

示例：让一个 div 水平移动 200px

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

const box = document.getElementById('box');
let pos = 0;
let animationId;
<p>function animate() {
pos += 2;
if (pos >= 200) {
box.style.left = '200px';
return; // 动画结束，不继续调用
}
box.style.left = pos + 'px';
animationId = requestAnimationFrame(animate); // 下一帧继续
}</p><p>animationId = requestAnimationFrame(animate);</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/8047">
                            <img src="https://img.php.cn/upload/jscode/000/000/010/170917380392835.jpg" alt="HTML5纸片折成礼盒动画特效">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/8047">HTML5纸片折成礼盒动画特效</a>
                            <p>HTML5纸片折成礼盒动画特效是一款适合圣诞节或任何节日使用的css实现的圣诞节礼物动画效果。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="HTML5纸片折成礼盒动画特效">
                                <span>17</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/8047" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="HTML5纸片折成礼盒动画特效">
                        </a>
                    </div>
                <p>// 暂停/取消示例：
// cancelAnimationFrame(animationId);

登录后复制

结合时间控制实现匀速动画（推荐）

上面例子是“每帧固定位移”，但不同设备帧率可能波动（比如低端机掉到 30fps），导致速度不一致。更健壮的做法是基于**时间差**计算位移：

记录上一帧的时间戳（由 rAF 回调自动传入）
当前帧减去上一帧，得到真实经过的毫秒数
按目标速度（如 100px/s）乘以该时间，得出本次应移动距离

示例（匀速移动 200px，耗时 2 秒）：

const box = document.getElementById('box');
const duration = 2000; // 总时长 ms
const targetX = 200;
let startTime = null;
<p>function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1); // 0~1
const currentX = progress * targetX;</p><p>box.style.transform = <code>translateX(${currentX}px)</code>;</p><p>if (progress < 1) {
requestAnimationFrame(animate);
}
}</p><p>requestAnimationFrame(animate);

登录后复制

实用建议和注意事项

优先使用 transform 和 opacity 动画属性，它们能触发 GPU 加速，性能远好于修改 left/top 或 width/height
避免在动画帧中频繁读取布局属性（如 offsetTop、getBoundingClientRect），会触发强制同步布局（layout thrashing）
rAF 在页面后台标签页中会自动降频或暂停，这是优点；如需后台运行（极少见），得配合 Page Visibility API 判断
现代开发中，复杂动画可考虑 CSS @keyframes + element.animate()，但 rAF 仍是底层控制、物理模拟（如缓动、拖拽、粒子）的首选