如何停止requestAnimationFrame递归/循环？

Question

我正在使用带有WebGL渲染器的Three.js来创建一个在play点击链接时全屏显示的游戏.对于动画,我用requestAnimationFrame.

我这样发起:

self.animate = function()
{
    self.camera.lookAt(self.scene.position);

    self.renderer.render(self.scene, self.camera);

    if (self.willAnimate)
        window.requestAnimationFrame(self.animate, self.renderer.domElement);
}

self.startAnimating = function()
{
    self.willAnimate = true;
    self.animate();
}

self.stopAnimating = function()
{
    self.willAnimate = false;
}

当我想,我称之为startAnimating方法,是的,它确实按预期工作.但是,当我调用该stopAnimating函数时,事情就会破裂!没有报告错误,但......

设置基本上是这样的:

• play页面上有一个链接
• 用户点击链接后,渲染器domElement应全屏显示,并且确实如此
• startAnimating调用该方法,渲染器开始渲染内容
• 单击转义后,我会注册一个fullscreenchange事件并执行该stopAnimating方法
• 该页面会尝试退出全屏,但整个文档完全空白

我很确定我的其他代码是好的,而且我以某种方式requestAnimationFrame以错误的方式停止.我的解释可能很糟糕,所以我将代码上传到我的网站,你可以在这里看到它:http://banehq.com/Placeholdername/main.html.

这是我不试图调用动画方法的版本,以及完整的屏幕内外工作:http://banehq.com/Correct/Placeholdername/main.html.

一旦play第一次点击,游戏就会初始化并start执行它的方法.一旦全屏退出,stop就会执行游戏的方法.每隔一次play点击一次,游戏只执行它的start方法,因为不需要再次初始化它.

以下是它的外观:

var playLinkHasBeenClicked = function()
{
    if (!started)
    {
        started = true;

        game = new Game(container); //"container" is an empty div
    }

    game.start();
}

以下是这些start和stop方法的样子:

self.start = function()
{
    self.container.appendChild(game.renderer.domElement); //Add the renderer's domElement to an empty div
    THREEx.FullScreen.request(self.container);  //Request fullscreen on the div
    self.renderer.setSize(screen.width, screen.height); //Adjust screensize

    self.startAnimating();
}

self.stop = function()
{
    self.container.removeChild(game.renderer.domElement); //Remove the renderer from the div
    self.renderer.setSize(0, 0); //I guess this isn't needed, but welp

    self.stopAnimating();
}

这和工作版本之间的唯一区别是,startAnimating和stopAnimating方法调用中start和stop方法被注释掉.

Answer 1

启动/停止的一种方法是这样的

var requestId;

function loop(time) {
    requestId = undefined;

    ...
    // do stuff
    ...

    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

工作范例:

const timeElem = document.querySelector("#time");
var requestId;

function loop(time) {
    requestId = undefined;
    
    doStuff(time)
    start();
}

function start() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

function doStuff(time) {
  timeElem.textContent = (time * 0.001).toFixed(2);
}
  

document.querySelector("#start").addEventListener('click', function() {
  start();
});

document.querySelector("#stop").addEventListener('click', function() {
  stop();
});

<button id="start">start</button>
<button id="stop">stop</button>
<div id="time"></div>

Answer 2

停止就像不再调用requestAnimationFrame一样简单,重新启动就是再次调用它.EX)

        var pause = false;
        function loop(){
                //... your stuff;
                if(pause) return;
                window.requestionAnimationFrame(loop);
        }
       loop(); //to start it off
       pause = true; //to stop it
       loop(); //to restart it

Answer 3

var myAnim //your requestId
function anim()
       {
       //bla bla bla
       //it's important to update the requestId each time you're calling reuestAnimationFrame
       myAnim=requestAnimationFrame(anim)
       }

让我们开始吧

myAnim=requestAnimationFrame(anim)

让我们阻止它

//the cancelation uses the last requestId
cancelAnimationFrame(myAnim)

参考

Answer 4

因此，在做了更多测试之后，我发现确实是我的其他代码造成了问题，而不是动画停止（毕竟这是一个简单的递归）。问题在于从页面动态添加和删除渲染器的 domElement。在我停止这样做之后，因为确实没有理由这样做，并且在初始化发生时将其包含在内，一切都开始正常工作。