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

幻影之瞳 2025-12-12 00:00:00 次阅读

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 本身不提供暂停/取消功能，需配合变量和逻辑控制：

用布尔值（如 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/s
function 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 动画。