0

我正在使用动力学

        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

因此，如果我正确理解您的代码，您希望同时为多个对象设置动画，所有对象都在同一层中。

您遇到减速的原因是因为您有多个动画对象。因此，每次移动一个对象时，您都在重新绘制整个图层。

所以你真正想做的是重组为：

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 回答