javascript - 关节动画

Question

我试图弄清楚如何对火车动画进行排序，以便我可以偏移并围绕曲线依次旋转每辆货车，例如，在此显示中的 Route_51（单击测试>运行[两次]）中。需要 Chrome 或其他兼容 HTML5 的浏览器。

这是我迄今为止的“不合规”代码（使用 KineticJs）：

function animate(nr,path,incr,train,dirX,dirY){
var steps,offsetX,offsetY,count,a;
steps = Math.round(path[nr][2] / incr);
offsetX = path[nr][2]/steps;
offsetY = path[nr][3]/steps;
count = 0;
stage.onFrame(function(frame){
    layer = train[0].getLayer();
    if(count < steps){
        for(a=0; a<train.length; a+=1){ 
            incrX = train[a].getX() + offsetX * -dirX;
            incrY = train[a].getY() - offsetY * -dirY;
            train[a].setX(incrX);
            train[a].setY(incrY);
        }
        layer.draw();
        count += 1;
    }
    else{
        stage.stop();
        nr += 1;
        if(path[nr]){
            animate(nr,path,incr,train,dirX,dirY);
        }
    }
});
stage.start();

}

我似乎无法掌握逻辑（变老）。

所有帮助表示赞赏。谢谢。

Answer 1

在某种逻辑出现之前，似乎必须经过一定的时间。

在这种情况下，每个机车/货车都需要自己的完全递增的路径来错开起点和可选的终点。这是运动中的火车的屏幕截图，其中插入了“正常”比例视图。当然还有改进的空间，尤其是曲线坐标。

有关动画，请访问http://glasier.hk并点击 KJS 链接。