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

Question

This code does the job now. The animations are all within the function calls .

function animate() {

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();
        }

    }
}

} animate();

Answer 1

Demo: http://jsfiddle.net/m1erickson/4vV5X/

Start with one requestAnimationFrame (because it's efficient at animation loops).

I'm assuming you have created objects for your ship and missle.

Add a delay and countdown element to each object

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"});

Then in requestAnimationFrame you can reduce the countdown for each object.

If the countdown reaches zero you draw that object.

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;
    }
}