取消动画三分

Question

我想正确停止一个三分。

这是我拥有的代码：

var anim;
function animate() {
    anim = requestAnimationFrame(animate);
    checkRotation();
    renderer.render(scene, camera);
    setTimeout(cancel, 10000);
}
function cancel() {
    cancelAnimationFrame(anim);
    finalCoords();
}
animate();

被这样放置，动画checkRotation()确实停止了，但是函数finalCoords()一直在循环，好像被困在某种递归中一样。

我也尝试过：

var anim;
function animate(anima) {
    anima = requestAnimationFrame(animate);
    checkRotation();
    renderer.render(scene, camera);
}
function cancel(anima) {
    cancelAnimationFrame(anima);
    finalCoords();
}
animate(anim);
setTimeout(cancel(anim), 10000);

现在循环停止，但功能finalCoords()不返回正确的结果，动画不停。

我做错了什么？我该如何修复？

谢谢！

Answer 1

1）第一个示例中的问题是，在每个动画框架中，您安装了另一个新超时。因此，例如，如果您每秒有60帧，即10,000秒，则将设置6亿个新超时。

2）问题是第二个示例，即您只是在超时功能中未传输，而是一旦调用。另外，您与存储动画框架标识符的变量的名称相混淆。

3）第二个示例的改进版本：

var stopAnimate = false;
function animate(time) {
    if (!stopAnimate) {
        checkRotation(time);
        requestAnimationFrame(animate);
    } else {
       finalCoords('final');
    }
}
animate();
setTimeout( function() {
  stopAnimate = true;
}, 1000);

[https://jsfiddle.net/02d37pxs/]