JavaScript动画技巧：_requestAnimationFrame使用详解

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

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);
<pre class="brush:php;toolbar:false"><code>onUpdate(value);

if (progress < 1) {
  requestAnimationFrame(step);
} else if (onComplete) {
  onComplete();
}</code>

} requestAnimationFrame(step); }

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