如何以不同的速度同時運行動畫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; 
    } 
}