CODEWITHSUNDEEP
javascriptcanvascreatejseaseljstween.js
Daniel Tate
Daniel Tate

Reputation: 2163

How do i change the shape of a rectangle using TweenJS and Easeljs

I have a simple shape:

var line = new createjs.Shape();
line.graphics.beginFill('red').drawRect(0, 0, 1, 10);

I want to animate this shapes width changing in this case from 1px to 100px

How do I go about this?

I have read through almost all of the documentation and am still not sure if it's possible at this point and I can't seem to find an example of this on their website or anywhere else.

createjs.Tween.get(line).to({width: 100}, 1000, linear);

This shows up in almost all of the animation documentation but does nothing when using width. When I change the x or y properties it works fine. Is there a list of properties that I can change? If so where can I find these.

I found this example from a question on stackoverflow: http://jsfiddle.net/cZDEP/1/

But they in this case aren't using TweenJS, is it possible to replace this example using TweenJS or would I have to use the Ticker in this case to animate a line?

Upvotes: 1

Views: 1369

Answers (1)

Lanny
Lanny

Reputation: 11294

Here is a quick sample I put together using Graphics Commands: http://jsfiddle.net/d0d6mpLu/

There is no width/height in EaselJS. You can get and set bounds of most display objects, but not shapes. http://blog.createjs.com/update-width-height-in-easeljs/

For the above example, you can save off any graphic command, and modify its properties later (and update the stage to reflect it). Graphics commands were added to EaselJS 0.7.0. Here are the docs for the drawRect command used in that example: http://www.createjs.com/docs/easeljs/classes/Graphics.Rect.html

To save a command, you can access the command property of the Graphics after the instruction is added. It is easiest to just chain the command property:

var rectCommand = bar.graphics.drawRect(0,0,0,30).command;

Then you can modify it:

rectCommand.w = 200;

Another approach is to draw the rectangle, and use the scaleX/scaleY properties. This works with older versions of EaselJS. For the included example, you would need a separate shape to tween the scale of. Here is an updated sample with that approach: http://jsfiddle.net/d0d6mpLu/1/

Hope that helps!

Upvotes: 2

Related Questions