0

私はkineticjsを使用しています

        for(var i = 0; i < playerData.length; i++)
        {
            (function(i){
                data = playerData[i];

                group = stage.get('#' + data.user_id)[0];

                    var anim = new Kinetic.Animation(function(frame){



                                        dx = group.getX() - data.posX;
                                        dy = group.getY() - data.posY;

                                        var dist = Math.sqrt(dx * dx + dy * dy);


                                        var angle = Math.atan2(dy, dx);

                                        var speedX = Math.cos(angle) * moveSpeed;
                                        var speedY = Math.sin(angle) * moveSpeed;
                                        group.setX(parseInt(group.getX()) - speedX);
                                        group.setY(parseInt(group.getY()) - speedY);
                                        console.log(dist);



                    }, mainLayer);
                    console.log('animation started');
                    anim.start();

            })(i)
        }

オブジェクトごとにアニメーションを実行するのに問題があります。サーバーから新しいデータを取得するたびに、すべてのオブジェクトをループして新しい座標で移動しますが、アニメーションを正しく実行する方法がわかりません。オブジェクトが実行されません。同時に、それらはスタックし始めます。問題は、新しい Kinetic.Animation を開始してから、オブジェクトごとに正常に停止するにはどうすればよいかということです。

4

1 に答える 1

2

したがって、コードを正しく理解している場合は、すべて同じレイヤーにある複数のオブジェクトを同時にアニメーション化する必要があります。

速度が低下している理由は、複数のアニメーション オブジェクトがあるためです。つまり、オブジェクトを 1 つだけ移動するたびにレイヤー全体を再描画しているということです。

したがって、本当にやりたいことは、次のようなものに再構築することです。

var anim = new Kinetic.Animation(function(frame){ // one animation on outside controlling logic for playerData
    for(var i = 0; i < playerData.length; i++)
    {
        (function(i){
            var data = playerData[i];

            group = stage.get('#' + data.user_id)[0];

            var dx = group.getX() - data.posX;
            var dy = group.getY() - data.posY;

            var dist = Math.sqrt(dx * dx + dy * dy);

            if(dist > 1){ //this takes care of the stop you are looking for
                var angle = Math.atan2(dy, dx);

                var speedX = Math.cos(angle) * moveSpeed;
                var speedY = Math.sin(angle) * moveSpeed;
                group.setX(parseInt(group.getX()) - speedX);
                group.setY(parseInt(group.getY()) - speedY);
                console.log(dist);
            }
            else{
                console.log(group.getName() + 'stopped moving');
                //this.stop(); // maybe use this to stop animation?
            }
        })(i)
    }
}, mainLayer);

console.log('animation started');
anim.start();

このようにして、レイヤーを一度だけ再描画するだけで、はるかに高速になります。また、for ループ内に無名関数が必要かどうかもわかりません。

于 2013-02-27T03:16:39.887 に答える