想用JS实现一个动画中有时间间隔的创建对象，怎么弄？

kyoysy135 2023-07-21 17:09:57

在一个动画循环中，需要用requestAnimationFrame。

在这个动画循环中，其中某一个对象的创建效果需要按照X时间间隔进行创建。怎么弄？

类似下面这种，效果是不对的。因为requestAnimationFrame每秒钟60次循环，只有在第一次运行的时候，会延迟10秒钟，后面就会每秒持续新建60个对象，不是我要的效果。

function yy2(){
    //间隔10秒钟，更新创建1个xxx对象
    let xid3=setTimeout(()=>{
        let xxx=new XXX();
    },"10000");
    let xid4=requestAnimationFrame(yy2);
};

我需要动画正常能动（因为动画可能需要控制其他函数运行），只是这个对象创建按照一定的间隔时间创建。

动画还需要用requestAnimationFrame，不要用setInterval。

求大神指点。

...全文

253 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

IT小猫咪 2023-07-22

打赏
举报

如果你想在动画循环中按照一定的时间间隔创建对象，你可以借助 requestAnimationFrame 和 setTimeout 方法来实现。

首先，在动画循环中调用 requestAnimationFrame 方法，并在其中调用自身，以实现持续的循环。然后，使用 setTimeout 方法来定时创建新对象，并在对象创建之后再次调用 setTimeout 方法，以实现按照一定时间间隔创建对象的效果。

以下是示例代码：


function animate() {
  // 在动画循环中调用 requestAnimationFrame 方法
  requestAnimationFrame(animate);

  // 在此处添加其他动画逻辑

  // 使用 setTimeout 方法按照一定时间间隔创建对象
  let delay = 10000; // 10 秒钟的时间间隔
  let lastTime = performance.now();
  let currentTime = lastTime;

  function createObject() {
    let xxx = new XXX();
    lastTime = performance.now();
    setTimeout(createObject, delay);
  }

  if (currentTime - lastTime >= delay) {
    createObject();
  }
}

// 启动动画循环
animate();

这样就可以实现在动画循环中按照一定时间间隔创建对象的效果了。请注意，在 createObject 方法中，使用 setTimeout 方法来定时创建新对象，并在对象创建之后再次调用 setTimeout 方法。同时，在动画循环中，检查上一次创建对象的时间和当前时间的差值，如果超过指定的时间间隔，则调用 createObject 方法来创建新对象。

kyoysy135 2023-07-24

@IT小猫咪感谢大神指点，给我提供了思路。在实际测试钟，发现上述代码的赋值略有出入，这里再贴一下，如果有其他人看到，可以做个参考。关于currentTime和lastTime的赋值问题。我做了略微调整：在JS的主体中，声明了lastTime和currentTime两个全局变量。初始时，让两者相等。在动画函数中，运行的时候，只要将performance.now()的值赋给currentTime就行。在间隔创建对象或具体的间隔动作时，将lastTime刷新掉。这样，currentTime-lastTime才会有差值，才会生效。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>间隔动画测试</title> </head> <body> <h1>间隔测试</h1> <p id="test"></p> </body> <script> let test=document.getElementById("test"); let lastTime = performance.now(); let currentTime = lastTime; anmiate(); function animate(){ let anid=requestAnimationFrame(animate); currentTime=performance.now(); if(currentTime-lastTime>=5000){ freshTime(); }; }; //按一个间隔时间，刷新时间显示 function freshTime(){ let newTime=Date(); test.textContent=newTime; lastTime=performance.now(); let xid=setTimeout(freshTime, 5000); }; </script> </html>