javascript - 如何为每个对象独立启动动画(KineticJS)

Question

我正在使用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，然后成功地为每个对象停止它？

Answer 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 循环内使用匿名函数。