已解決430363個問題，去搜搜看，總會有你想問的

一段時間后取消 requestAnimationFrame 循環

首頁猿問一段時間后取消...

一段時間后取消 requestAnimationFrame 循環

JavaScript

蝴蝶刀刀 2023-03-03 10:08:52

我想在超時后取消動畫。這是我的代碼function animate(){ id = requestAnimationFrame(animate); console.log(id); c.clearRect(0,0, window.innerWidth, window.innerHeight); for(let i = 0; i < circleArray.length; i++){ circleArray[i].scatter(); } setTimeout(function(){ id = requestAnimationFrame(animate); cancelAnimationFrame(id); update(); },5000) } function update(){ requestAnimationFrame(update); c.clearRect(0,0, window.innerWidth, window.innerHeight); for(let i = 0; i < circleArray.length; i++){ circleArray[i].update(); } }在這里，我想停止動畫功能的遞歸并啟動更新功能。但是動畫不會停止，并且更新功能會在給定時間后同時運行。

查看完整描述

1 回答

慕桂英546537

TA貢獻1848條經驗獲得超10個贊

只需使用一個變量來引用當前渲染函數并在計時器事件上更改該變量。

例子

var currentFrameRender = animate; // set current render

requestAnimationFrame(currentFrameRender); // request first frame

setTimeout(() => currentFrameRender = update ,5000); // switch render in 5s

setTimeout(() => currentFrameRender = undefined ,10000); // stop animation in 10s

function animate(){

c.clearRect(0, 0, c.canvas.width, c.canvas.height);

for(let i = 0; i < circles.length; i++){

circleArray[i].scatter();

}

// request frame only if currentFrameRender is defined

currentFrameRender && requestAnimationFrame(currentFrameRender);

}

function update(){

c.clearRect(0, 0, c.canvas.width, c.canvas.height);

for(let i = 0; i < circles.length; i++){

circleArray[i].update();

}

// request frame only if currentFrameRender is defined

currentFrameRender && requestAnimationFrame(currentFrameRender);

}

反對回復 2023-03-03

1 回答
0 關注
484 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

一段時間后取消 requestAnimationFrame 循環

一段時間后取消 requestAnimationFrame 循環

1 回答

添加回答