javascript - 您是否必须取消requestAnimationFrame

我正在使用Paul Irish的以下代码段：

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

我也看到了polyfill，但是我尚未在所有浏览器中测试过此填充程序，因此我不确定是否需要polyfill。也许我不会，节省文件大小。

我想知道我是否真的需要在某个地方调用cancelAnimationFrame，如果可以，我想我需要另一个垫片。类似于上面的内容：

// 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仅用于手动取消或某些复杂的动画。好吧，这只是我的想法，我不确定。

最佳答案

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

您想使用cancelAnimationFrame的主要原因是，如果您不想进行动画循环计算何时应该停止动画。如果您有多个情况可以停止动画，则将条件设置为true时，检查动画循环中的每个情况实际上比调用cancelAnimationFrame效果差。

例如，假设您想在progress == 1时停止动画，但在用户暂停游戏时progress只能设置为1。由于用户不会经常暂停游戏，因此实际上您是在浪费时钟周期来查看每帧变量（即使只有几毫秒）。如果还必须检查用户是否死亡（progress == 2）或跳至主菜单（progress == 3），那么您将检查3 if语句每帧。由于您已经具有在动画循环之外检查这些条件的代码，因此在代码运行时调用cancelAnimationFrame可以帮助动画更快地运行。