JavaScript动画技巧：_requestAnimationFrame使用详解

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);

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('动画完成')
});