Javascript Kinetic.js为包含形状和文本的多个组设置动画

我是Dynamic.js的新手。我正在尝试创建一系列随机移动的组，每个组包含一颗星和一个标题。以下是当前草图：

我不明白为什么每个组对象在动画中都有一组唯一的边界。有人能解释一下我在这里遗漏了什么吗？为什么每组的边界不一样？i、 e.父容器的边界

这是动画：

var anim=新的动能动画（函数（帧）{

newtime=frame.time；
//重力通过时间延迟引起的加速度（毫秒）
如果（（newtime-oldtime）>帧速率）{//每N毫秒…（这模拟了帧速率）
旧时间=新时间；
var angularSpeed=Math.PI/2；
var angleDiff=[]；
var阶段=MilestonesGame.stage；
var stageKids=stage.getChildren（）；
var starsLayer=stageKids[1]；
var星=[]；
stars=starsLayer.getChildren（）；
//log（stars[1].getX（））；
对于（var n=0；nfloor）{groups[j].setY（floor）；}
如果（组[j].getY（）==楼层）{
$（窗口）.resize（u.debounce（函数（））{
floor=MilestonesGame.stage.getHeight（）-7；
}, 300));
yvel[j]*=-1；
}
//天花板边界
if（groups[j].getY（）rightwall）{groups[j].setX（rightwall）；}
if（组[j].getX（）==rightwall）{
$（窗口）.resize（u.debounce（函数（））{
rightwall=MilestonesGame.stage.getWidth（）-7；
}, 300));
xvel[j]*=-1；
}
//左墙
if（groups[j].getX（）

}，这是《星际杀手》）； anim.start（）

谢谢，

---

Jon

任何组的原点[x，y]相对于其父组默认为[0,0]

在您的案例中，每个组的家长都是舞台

所以你们所有的团队的起源——他们的x/y，都是相对于舞台的

一些观察结果

将调整大小的事件处理程序放在任何循环之外（如果在循环内部，则是错误的做法）。

// resizing handler -- never put this in a loop!

$(window).resize(_.debounce(function(){
    rightwall = MilestonesGame.stage.getWidth();
    floor = MilestonesGame.stage.getHeight();
}, 300));

让您的边界完全变大，以便以后可以轻松调整星星的大小

// boundaries -- leave boundaries full width/height
// which lets you resize each star later

var leftwall = 0;
var rightwall = MilestonesGame.stage.getWidth();
var floor = MilestonesGame.stage.getHeight();
var cieling = 0;

为了提高性能和清晰度，您的边界命中测试可以这样重构：

// Bounce stars off all stage parameter boundaries 

    for(var j = 0; j < groups.length; j++) {


    // temp save often used array references in vars

    var group=groups[j];
    var x=group.getX();
    var y=group.getY();
    var r=group.getOuterRadius();

    // ceiling boundary

    if(y-r<=cieling) {
        y=cieling+r;
        yvel[j] *= -1;
    }

    // floor boundary

    if(y+r>=floor) {
        y=floor-r;
        yvel[j] *= -1;
    }

    // left boundary

    if(x-r<=leftwall) {
        x=leftwall+r;
        xvel[j] *= -1;
    }

    // left and right boundary

    if(x+r>=rightwall) {
        x=rightwall-r;
        xvel[j] *= -1;
    }

    // move this star
    group.setX(x + xvel[j]);                                    
    group.setY(y + yvel[j]);

    }

//从所有阶段参数边界反弹星星
对于（var j=0；j

非常感谢！当你说“你所有的组的起源——它们的x/y，都是相对于舞台的”时，我假设你的意思是每个组的0，0点应该与舞台的0，0点对齐，对吗？这对我来说是违反直觉的，因为每个组的0，0点被每个组的x，y属性的差异奇怪地抵消了…我不能完全理解为什么会发生这种情况…有什么想法吗？是的，组[0]{x:0，y:0}位于阶段[0，0]。所以你们的群[0]{x:16，y:16}处于[16,16]阶段。组[0]中的任何内容都将从阶段[16,16]加上他们自己的x，y开始。例如，组[0]中的一个矩形（该矩形有自己的x:20，y:30）将处于阶段[16+20,16+30]。好的，在我的动画中，当我调用：oops时，当我调用时，组[j].setX（组[j].getX（）+xvel[j]）；组[j].setY（组[j].getY（）+yvel[j]）；，这难道不应该把团队移到舞台的边界内，让他们的每一条“线”都是舞台的线吗？

// Bounce stars off all stage parameter boundaries 

    for(var j = 0; j < groups.length; j++) {


    // temp save often used array references in vars

    var group=groups[j];
    var x=group.getX();
    var y=group.getY();
    var r=group.getOuterRadius();

    // ceiling boundary

    if(y-r<=cieling) {
        y=cieling+r;
        yvel[j] *= -1;
    }

    // floor boundary

    if(y+r>=floor) {
        y=floor-r;
        yvel[j] *= -1;
    }

    // left boundary

    if(x-r<=leftwall) {
        x=leftwall+r;
        xvel[j] *= -1;
    }

    // left and right boundary

    if(x+r>=rightwall) {
        x=rightwall-r;
        xvel[j] *= -1;
    }

    // move this star
    group.setX(x + xvel[j]);                                    
    group.setY(y + yvel[j]);

    }