javascript - 你必须取消requestAnimationFrame吗

Question

我正在使用 Paul Irish 的以下片段:

// requestAnimationFrame shim & fallback
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

我也看到了一个 polyfill，但我还没有在所有浏览器中测试这个 shim，所以我不确定我是否需要 polyfill。也许我不会，节省文件大小。

我想知道我是否真的需要在某处调用 cancelAnimationFrame，如果是这样，我猜我需要另一个 shim。类似于上面的反转:

// cancelAnimationFrame shim & fallback
window.cancelAnimFrame = (function () {
    return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (callback) {
        window.clearTimeout(callback);
    };
})();

基本上，我尝试console.log requestAnimationFrame 中运行的函数，我可以看到日志记录何时停止，所以我猜动画帧不再被使用...

我的函数 step() 是这样结束的:

if (progress == 1) return;

requestAnimFrame(step);

我真的很关心这个，我仍在学习整体动画。为我创建动画是很痛苦的，尤其是使用缓动方程。直接回答就可以了，如果需要取消，请举例说明如何取消？现在我认为 cancelAnimationFrame 仅用于手动取消或一些复杂的动画。嗯，这只是我的想法，我还不确定。

Answer 1

cancelAnimationFrame 用于从动画函数外部停止动画。在您的 step() 示例中，您将从动画函数内部停止动画。两者都是可行的，但内部止损可能更常见。

您想要使用cancelAnimationFrame 的主要原因是您不想让动画周期计算您应该停止动画的时间。如果您有多个可以停止动画的情况，检查动画循环内的每个情况实际上比在其他地方将条件设置为真时调用 cancelAnimationFrame 性能要差。

举个例子，假设您想像示例中那样在 progress == 1 时停止动画，但是 progress 仅在用户时设置为 1暂停游戏。由于用户不会经常暂停游戏，您实际上是在浪费时钟周期来查看每一帧的变量(即使只有几毫秒)。如果您还必须检查用户是否死亡(progress == 2)，或是否跳转到主菜单(progress == 3)，那么您将检查 3 if语句每一帧。由于您已经拥有在动画循环之外检查这些条件的代码，因此在代码运行时调用 cancelAnimationFrame 有助于您的动画运行速度稍微加快。