在数字时代，流畅的动画体验已成为网页设计不可或缺的一部分。你是否曾遇到过这样的问题：页面上的动画卡顿、跳跃，甚至在操作时都显得迟缓？这并非代码本身的问题，而是你尚未掌握实现完美动画的秘诀。今天，我们将深入探讨requestAnimationFrame这一动画背后的“幕后英雄”，带你领略其魔力，让你的页面动画从卡顿走向丝滑。

动画为何总是不流畅？

当你手动编写动画时，若仅依赖setTimeout或setInterval，动画效果往往时好时坏，出现掉帧、卡顿等现象。原因在于这些定时器与浏览器的刷新频率不同步，导致每一帧的执行时间不稳定。而requestAnimationFrame正是为解决这一问题而生，它能确保动画的每一帧与屏幕的刷新频率保持同步，从而带来流畅、自然的动画效果。

requestAnimationFrame是什么？

requestAnimationFrame是浏览器提供的一个API，用于在浏览器的下一个重绘之前执行动画回调函数。与传统的setTimeout和setInterval不同，它与屏幕的刷新周期紧密同步，确保每秒有60帧的画面更新，显著提升动画的流畅性。

工作原理：

每次调用requestAnimationFrame(callback)，浏览器会在下一次重绘前调用该回调。浏览器会自动计算每帧的执行时间，确保动画帧率的稳定性。当页面不可见时，动画会自动暂停，节省资源。

动画实现：从基础到复杂

1. 让盒子动起来：简单的平移动画

const box = document.getElementById('box');
let startTime: number | null = null;

function moveBox(timestamp: number) {
    if (!startTime) startTime = timestamp;
    const progress = (timestamp - startTime) / 1000; // 1秒内完成
    box!.style.transform = `translateX(${Math.min(progress * 300, 300)}px)`;
    if (progress < 3) {
        requestAnimationFrame(moveBox);
    }
}
requestAnimationFrame(moveBox);

解释：通过时间戳计算元素的运动进度，确保动画每秒有约60帧的更新，让动画既流畅又稳定。

2. 让运动更真实：缓动动画

function easeOutQuad(t: number): number {
    return t * (2 - t); // 快到慢的缓动效果
}

function easingMove(timestamp: number) {
    if (!startTime) startTime = timestamp;
    const progress = Math.min(easeOutQuad((timestamp - startTime) / 1000), 1);
    box!.style.transform = `translateX(${progress * 300}px)`;
    if (progress < 1) {
        requestAnimationFrame(easingMove);
    }
}
requestAnimationFrame(easingMove);

解释：easeOutQuad让动画从快到慢的平滑过渡，这种效果在现实世界中更常见，如物体停止时的惯性。

3. 协同运动：多元素动画

const ball = document.getElementById('ball');
let startTime: number | null = null;

function parabolaMove(timestamp: number) {
    if (!startTime) startTime = timestamp;
    const t = (timestamp - startTime) / 1000;
    const x = t * 200; // 水平匀速移动
    const y = 100 - (t * t * 200); // 垂直方向抛物线运动
    ball!.style.transform = `translate(${x}px, ${y}px)`;
    if (t < 2) {
        requestAnimationFrame(parabolaMove);
    }
}
requestAnimationFrame(parabolaMove);

解释：通过数学公式计算小球的抛物线轨迹，模拟更复杂的物理运动效果，适用于游戏或动画场景。

深度优化：让动画更流畅、更省资源

1. 利用GPU加速

通过transform和opacity等CSS属性可以让浏览器利用GPU渲染，从而实现更流畅的动画。

2. 避免阻塞主线程

确保动画计算尽量简单，复杂的数学计算可以预先缓存。

3. 资源管理

动画结束后，务必清理动画的回调函数，避免不必要的资源浪费。

总结：控制动画的每一帧

requestAnimationFrame不仅仅是一个API，它是Web动画开发的灵魂。它解决了传统动画方法的帧率不稳定、资源浪费等问题，能让你的动画如丝般顺滑。如果你还在使用setInterval来做动画，或许是时候尝试一下这个强大的工具了——让动画飞起来，向流畅的Web动画世界迈进！