缓动函数requestAnimationFrame 更好的实现浏览器经动画

`requestAnimationFrame` 是一个在浏览器中优化动画性能的关键API，它告诉浏览器你希望执行动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。使用 `requestAnimationFrame` 而不是 `setTimeout` 或 `setInterval` 可以在动画运行时提供更平滑的效果，因为它是由浏览器的渲染引擎驱动的，能更好地与浏览器的绘制周期同步。

下面是一个使用 `requestAnimationFrame` 实现简单动画的基本框架示例：

function step(timestamp) {
    // 这里的timestamp是上一次调用requestAnimationFrame时的时间戳
    // 你可以用它来计算时间差，但在这个简单例子中我们不用它

    // 更新动画状态
    // 例如，我们有一个元素要沿X轴移动
    let elem = document.getElementById('myElement');
    let pos = parseInt(elem.style.left, 10) || 0;
    pos += 1; // 每次调用时，位置增加1px
    elem.style.left = pos + 'px';

    // 如果动画未完成，则继续请求下一帧
    if (pos < 200) { // 假设我们想要元素移动到200px
        requestAnimationFrame(step);
    }
}

// 初始化动画
requestAnimationFrame(step);

在这个例子中，`step` 函数是每一帧将要执行的函数。我们在这个函数中更新动画的状态（这里是移动一个元素的位置），然后检查是否应该继续动画。如果是，就通过 `requestAnimationFrame(step)` 请求下一帧。

注意，`requestAnimationFrame` 的回调函数接受一个时间戳参数，这可以用来计算动画的持续时间或速度等，但在上面的简单示例中我们并没有用到它。

此外，`requestAnimationFrame` 的另一个优点是，如果页面不在标签页中（即用户切换到了其他标签页），它会自动停止调用回调函数，这样可以节省资源，并减少不必要的计算。当页面重新成为可见时，动画会从它停止的地方继续。这是使用 `setTimeout` 或 `setInterval` 无法达到的效果。