javascript - 画布请求动画帧暂停

Question

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

代码：

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

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

Start();

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

Answer 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();