您是否必须取消 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某个地方，如果是这样，我想我需要另一个垫片。与上面相反的东西：

// 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仅在用户暂停游戏时将 get 设置为 1。由于用户不会经常暂停游戏，因此您实际上是在浪费时钟周期查看每一帧的变量（即使只有几毫秒）。如果您还必须检查用户是否死亡 ( progress == 2) 或跳转到主菜单 ( progress == 3)，那么您将每帧检查 3 个 if 语句。由于您已经拥有在动画循环之外检查这些条件cancelAnimationFrame的代码，因此在代码运行时调用可以帮助您的动画运行速度稍快一些。