画布requestAnimationFrame暂停 [英] Canvas requestAnimationFrame pause

问题描述

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

How to pause canvas animation made with requestAnimationFrame ? I start animation like this:

代码：

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

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

Start();

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

Now I want to add pause option after keydown. Is there any simple way to do it?

推荐答案

你可以做的是创建一个存储动画状态的变量：暂停或取消暂停。每次单击按钮时更改该状态。这样的事情应该有效：

What you could do is create a variable that stores the state of your animation: paused or unpaused. Change that state every time you click a button. Something like this should work:

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

这篇关于画布requestAnimationFrame暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！