javascript - 一段时间后取消 requestAnimationFrame 循环
问题描述
我想在超时后取消动画。这是我的代码
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();
}
}
在这里,我想停止 animate 函数的递归并启动更新函数。但动画不会停止,更新功能在给定时间后同时运行。
解决方案
只需使用一个变量来引用当前的渲染函数并在计时器事件上更改该变量。
例子
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);
}
推荐阅读
- logging - gcloud logging read 命令不返回任何内容
- django - (Django) 一个 UpdateView 多种形式
- python - 在 Python 中将复杂值分配给 Int 数组
- sugarcrm - 每个项目单独安装?套件CRM、糖CRM
- python - Openstack自发mysql连接错误2006,“MySQL服务器已经消失
- python-3.x - 在纸浆中设置具有四个维度的目标函数
- ios - 在 Storekit 的应用程序启动时添加事务队列观察器的最佳实践
- php - Laravel 5 - Text to Encrypted Password
- css - CSS 选择器,但不是在存在另一个类时
- java - 意外字符“60” - 尝试登录 RTC java api 时出错