Search code examples
createjstweenjs

TweenJS rect command "grow from center"

new to createjs here:

Created this fiddle: example. I would like the rect to grow from the center and not from the top left corner. I couldn't find any help, I don't know what to search for.

Code:

const   PAGE_WIDTH  = 150,
        PAGE_HEIGHT = 75;

var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);

var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);

var pageCommand = page.graphics
   .beginFill('red')
   .drawRect(0, 0, 1, 1).command;

createjs.Tween.get(pageCommand)
   .to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)

function tick() {
  stage.update();
}

Thanks.

Solution

  • The best way is to change the registration point of your graphics so it grows from the center.

    Your code: 

    .drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})

    Instead: 

    .drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})

    Fiddle: http://jsfiddle.net/1kjkqo2v/

    [edit: I said 2 options initially, but the second (using regX and regY) wouldn't work well, since you have to tween that value as well as your size changes.]