动态.js动画 包含形状和文本的多个组

Kinetic.js Animating Multiple groups that contain a shape and text

本文关键字：文本 js 动画 包含形 动态      更新时间：2023-09-26

我是Kinetic的新手.js。我正在尝试创建一系列随机移动的组，每个组包含一个星星和一个标题。这是当前的草图：http://jsfiddle.net/dCw9e/。

我无法弄清楚为什么每个组对象在动画中都有一组唯一的边界。谁能阐明我在这里错过了什么？为什么每个组的边界不一样？即父容器的边界。

这是动画：

var anim = new Kinetic.Animation（function（frame） {

newtime = frame.time;
// Acceleration due to gravity via time delay (chunks miliseconds)
if((newtime - oldtime) > framerate) { // every N milliseconds... (this emulated a frame rate)
    oldtime = newtime;
    var angularSpeed = Math.PI / 2;
    var angleDiff = [];

    var stage = MilestonesGame.stage;
    var stageKids = stage.getChildren();
    var starsLayer = stageKids[1];
    var stars = [];
    stars = starsLayer.getChildren();
    //console.log(stars[1].getX());
    for(var n= 0; n < groups.length; n++){
        angleDiff[n] = frame.timeDiff * angularSpeed / 10000 * rotDir[n];
    }   

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

    /* Bounce stars off all stage parameter boundaries */
    // floor boundary
    if(groups[j].getY() > floor) {groups[j].setY(floor);}
    if(groups[j].getY() == floor) {
     $(window).resize(_.debounce(function(){
        floor = MilestonesGame.stage.getHeight()-7;
     }, 300));
        yvel[j] *= -1;
    }
    //Ceiling boundary
    if(groups[j].getY() < cieling){groups[j].setY(cieling);}
    if(groups[j].getY() == cieling){
        yvel[j] *= -1;
    }
    // right wall
    if(groups[j].getX() > rightwall) {groups[j].setX(rightwall);}
    if(groups[j].getX() == rightwall) {
        $(window).resize(_.debounce(function(){
            rightwall = MilestonesGame.stage.getWidth()-7;
        }, 300));
        xvel[j] *= -1;
    }
    // left wall
    if(groups[j].getX() < leftwall) {groups[j].setX(leftwall);}
    if(groups[j].getX() == leftwall) {
        xvel[j] *= -1;
    }
    groups[j].setX(groups[j].getX() + xvel[j]);                                 
    groups[j].setY(groups[j].getY() + yvel[j]);
    //stars[i].rotate(angleDiff[i]);
    }
}

}， this.starsLayer）;anim.start（）;

谢谢乔恩

任何组的原点 [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]);
    }
相关文章：