Question

我创建了2个按钮，用于沿特定路径进行粒子模拟的开始和停止。

<button onclick="start()" id="myButton">Start</button>
<button onclick="stop()">Stop</button>

当我点击开始动画功能运行时，当我停止时，动画停止，当我点击开始时它再次从它停止的相同位置恢复。我的问题是，当我在动画运行时单击开始按钮时，动画循环会重复，因此每次单击开始时粒子的速度都会增加。

animate是我点击开始时运行的功能。我尝试将属性设置为禁用但在第一次单击后它会完全禁用启动按钮，但我想用它来恢复动画。

function start() {

  requestId = window.requestAnimationFrame(animate);
 //var disable=document.getElementById("myButton").setAttribute("disabled","disabled");
}

function stop() {
  if (requestId){
        clearTimeout(timeInterval);
    window.cancelAnimationFrame(requestId);
        requestId = 0;
  }
}

提前致谢...

Answer 1

将动画状态存储在变量中，并在启动动画之前检查：

var running = false;

function start() {
    if (running) {
        return;
    }
    requestId = window.requestAnimationFrame(animate);
    running = true;
}

function stop() {
    if (requestId) {
        clearTimeout(timeInterval);
        window.cancelAnimationFrame(requestId);
        running = false;
        requestId = 0;
    }
}

双击时，启动按钮可启用和恢复动画，而无需再次重复该功能（javascript）

1 个答案: