我创建了 2 个按钮开始和停止,用于沿特定路径进行粒子模拟。
<button onclick="start()" id="myButton">Start</button>
<button onclick="stop()">Stop</button>
当我单击"开始"时,动画函数将运行,当我停止时,动画将停止,当我单击"开始"时,动画将从停止的同一位置恢复。我的问题是,当我在动画运行时单击开始按钮时,动画循环会重复,因此每次单击开始时粒子的速度都会增加。
动画是当我单击开始时运行的函数。我尝试将属性设置为禁用,但它在第一次单击后完全禁用开始按钮,但我想使用它来恢复我的动画。
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;
}
}
提前感谢...
将动画状态存储在变量中,并在启动动画之前进行检查:
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;
}
}