TweenJS 矩形命令 "grow from center"

Question

这里是 createjs 的新手：

创建此 fiddle：example。我希望矩形从中心而不是左上角开始增长。我找不到任何帮助，我不知道要搜索什么。

代码：

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();
}

谢谢。

Answer 1

最好的方法是更改图形的注册点，使其从中心开始生长。

您的代码：

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

改为：

.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/

[编辑：我最初说了 2 个选项，但第二个（使用 regX 和 regY）效果不佳，因为您必须补间该值以及大小更改。]

TweenJS 矩形命令 "grow from center"

TweenJS rect command "grow from center"

createjs

tweenjs