javascript - 如何以不同的速度运行同步动画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

演示: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;
    }
}