如何停止或暂停这个程序?
How to stop or pause this program?
我尝试使用 clearTimeout,但失败了,谁能告诉我如何停止或暂停此动画?下面是我的 javascript 代码:
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = 'green';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function myFunction() {
var m = document.getElementById("myRange").value;
document.getElementById("demo").innerHTML = m;
}
function animate(myRectangle, canvas, context, startTime) {
var time = (new Date()).getTime() - startTime;
var m = document.getElementById("myRange").value;
myRectangle.y = 380 - m * Math.cos(time * Math.PI / 2000);
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var myRectangle = {
x: 150,
y: 150,
width: 50,
height: 50,
borderWidth: 4
};
drawRectangle(myRectangle, context);
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 0);
设置时尝试保存 Timeout
的 ID:
var timeoutId = window.setTimeout(...);
然后,要停止动画,应该像使用id清除超时一样简单:
function stopAnimation(timeoutId) {
window.clearTimeout(timeoutId);
}
我会说最简单的是将超时存储在一个变量中,您可以稍后清除,例如
var myTimeout = 0;
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
myTimeout = window.setTimeout(callback, 1000 / 60);
};
})();
...
function stopAnimation () {
if (myTimeout) {
clearTimeout(myTimeout);
}
}
您的回调应该停止调用 requestAnimationFrame
var stop = false;
function stopAnimation() {
stop = true;
}
function animate(myRectangle, canvas, context, startTime) {
// ...
if (stop) {
stop = false;
}
else {
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
}
我尝试使用 clearTimeout,但失败了,谁能告诉我如何停止或暂停此动画?下面是我的 javascript 代码:
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = 'green';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function myFunction() {
var m = document.getElementById("myRange").value;
document.getElementById("demo").innerHTML = m;
}
function animate(myRectangle, canvas, context, startTime) {
var time = (new Date()).getTime() - startTime;
var m = document.getElementById("myRange").value;
myRectangle.y = 380 - m * Math.cos(time * Math.PI / 2000);
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var myRectangle = {
x: 150,
y: 150,
width: 50,
height: 50,
borderWidth: 4
};
drawRectangle(myRectangle, context);
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 0);
设置时尝试保存 Timeout
的 ID:
var timeoutId = window.setTimeout(...);
然后,要停止动画,应该像使用id清除超时一样简单:
function stopAnimation(timeoutId) {
window.clearTimeout(timeoutId);
}
我会说最简单的是将超时存储在一个变量中,您可以稍后清除,例如
var myTimeout = 0;
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
myTimeout = window.setTimeout(callback, 1000 / 60);
};
})();
...
function stopAnimation () {
if (myTimeout) {
clearTimeout(myTimeout);
}
}
您的回调应该停止调用 requestAnimationFrame
var stop = false;
function stopAnimation() {
stop = true;
}
function animate(myRectangle, canvas, context, startTime) {
// ...
if (stop) {
stop = false;
}
else {
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
}