当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动画技巧：_requestAnimationFrame使用详解

JavaScript动画技巧：_requestAnimationFrame使用详解

2026-02-08 08:16:01 0浏览收藏

requestAnimationFrame 的基本用法

rAF 接收一个回调函数作为参数，浏览器会在下一次重绘前执行该函数。它返回一个整数 ID，可用于取消动画（配合 cancelAnimationFrame）。

关键点：

回调函数会自动传入一个时间戳（DOMHighResTimeStamp），表示当前帧开始的时间（毫秒级，精确到微秒）
它不是自动循环的——想实现持续动画，需在回调内部再次调用 requestAnimationFrame
页面处于后台标签页时，rAF 会自动降频或暂停，节省资源

写一个简单的位移动画

比如让一个

从左到右匀速移动 400px：

const box = document.getElementById('box');
let startTime = null;
const duration = 2000; // 动画总时长 2s
const startX = 0;
const endX = 400;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 防止超限
const x = startX + (endX - startX) * progress;
box.style.transform = translateX(${x}px);
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);

封装可复用的动画函数

为避免每次手写时间计算，可以封装一个简易的 animate 工具函数：

支持：起始值、目标值、缓动函数、完成回调

function animate({ from, to, duration = 300, easing = t => t, onUpdate, onComplete }) {
  const start = performance.now();
  function step(current) {
    const elapsed = current - start;
    const progress = Math.min(elapsed / duration, 1);
    const value = from + (to - from) * easing(progress);
onUpdate(value);

if (progress < 1) {
  requestAnimationFrame(step);
} else if (onComplete) {
  onComplete();
}
}
requestAnimationFrame(step);
}
// 使用示例：给 opacity 做淡入
animate({
from: 0,
to: 1,
duration: 800,
easing: t => t * t, // 缓入
onUpdate: val => box.style.opacity = val,
onComplete: () => console.log('动画完成')
});