如何以不同的速度同时运行动画javascript

Question

此代码现在可以完成这项工作。动画全部在函数调用中。

功能动画（）{

requestAnimationFrame(animate); 

for (var i = 0; i < objects.length; i++) { 
     var object = objects[i]; 

     if (--object.countdown <= 0) { 

      object.countdown = object.delay; 
     if(i==0){ 
      advanceTheFleet(); 
      if(dropLine){ 
       object.delay-=20; 
       if(object.delay<=10){ 
        object.delay=10; 
       } 
      } 
     } 
     else{ 
      propelMissiles(); 
     } 

    } 
} 

} 动画（）;

Answer 1

演示：​​

开始与一个requestAnimationFrame（因为它是在动画循环效率）。

我假设你已经为你的船和导弹创建了对象。

添加delay和countdown元素，每个对象

objects.push({id:"ship",x:20,y:20,vx:1,vy:0,delay:20,countdown:20,color:"green"}); 

objects.push({id:"missle",x:220,y:20,vx:-1,vy:0,delay:3,countdown:3,color:"red"}); 

然后在requestAnimationFrame可以减少为每个对象倒计时。

如果倒计时达到零，则绘制该对象。

for(var i=0;i<objects.length;i++){ 
    var object=objects[i]; 

    // if this object's countdown has expired, move it 
    if(--object.countdown<=0){ 

     // reset the countdown 

     object.countdown=object.delay; 

     // move the object 

     object.x+=object.vx; 
     object.y+=object.vy; 
    } 
}