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

Question

此代码现在可以完成工作。动画都在函数调用中。

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

    }
}

} 动画（）;

Answer 1

演示：http://jsfiddle.net/m1erickson/4vV5X/

从一个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;
    }
}