2017-07-27 82 views
1

新在這裏createjs:TweenJS RECT命令 「從中心生長」

創建此琴: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(); 
} 

感謝。

+0

「我希望從**中心成長** ...」中心,你指的是矩形的中心,還是畫布的中心? – CrisMVP3200

回答

0

最好的方法是更改​​圖形的註冊點,使其從中心增長。

您的代碼:

.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}) 

小提琴:http://jsfiddle.net/1kjkqo2v/

[編輯:我說的2個選項開始,但第二個(使用至REGx和regY)止跌效果不好,因爲你必須補償這個價值以及你的尺寸變化。]

+0

看起來不錯,謝謝! :) – John