画布请求动画帧暂停答案

【问题标题】：Canvas requestAnimationFrame pause画布请求动画帧暂停
【发布时间】：2013-05-09 09:04:47
【问题描述】：

如何暂停使用 requestAnimationFrame 制作的画布动画？我这样开始动画：

代码：

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

function Start() {
    Update();
    requestAnimFrame(Start);
}

Start();

现在我想在按键后添加暂停选项。有什么简单的方法吗？

【问题讨论】：

Ivan Chub 解决方案有效，但浏览器将继续调用 requestAnimationFrame 回调。为了避免这种行为，请改用cancelAnimationFrame。考虑查看in this article 发布的 requestAnimationFrame 健壮的 polyfill。
不应该在Update() 中调用requestAnimationFrame 吗？否则，您调用的函数除了调用另一个函数之外什么都不做。
Update() 函数有什么作用？这个问题在这里没有得到真正的回答。我们应该知道的那个函数有什么特别之处吗？

标签： javascript html canvas

【解决方案1】：

您可以创建一个变量来存储动画的状态：已暂停或未暂停。每次单击按钮时都会更改该状态。这样的事情应该可以工作：

var isPaused = false;

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

function Start() {
    if (isPaused) {
        Update();
    }

    requestAnimFrame(Start);
}

window.onkeydown = function() {
    isPaused = !isPaused; // flips the pause state
};

Start();

【讨论】：