javascript - 関節アニメーション

Question

このディスプレイの Route_51 (Test>Run[twice] をクリック) など、曲線に沿って各貨車を順番にオフセットおよび回転できるように、列車のアニメーションをシーケンス化する方法を見つけようとしています。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リンクをたどってください。