铰接式动画

Question

我正在尝试弄清楚如何对火车动画进行排序，以便可以围绕曲线对每个货车进行偏移和旋转，例如，在this display中的Route_51 (单击Test>Runtwice)中。需要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链接。