Question

我正在使用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仅用于手动取消或一些复杂的动画。嗯，这就是我的想法，我还不确定。

Answer 1

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

您想要使用cancelAnimationFrame的主要原因是，如果您不想在停止动画时计算动画周期。如果您有多个可以停止动画的情况，那么检查动画循环中的每个案例实际上比在其他地方将条件设置为true时调用cancelAnimationFrame要低。

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

你必须取消requestAnimationFrame

1 个答案: