如何改变一个矩形的使用TweenJS和Easeljs

Question

我有一个简单的形状形状：

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

我想动画这个形状在这种情况下，从1px的宽度变更为100px

怎么办我去解决这个问题？

我已经经历了几乎所有的文档阅读和现在还不能确定是否有可能在这一点上，似乎我无法找到他们的网站上或其他地方的一个例子。

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

这显示在几乎所有的动画文档中，但使用宽度时什么都不做。当我更改x或y属性时，它工作正常。是否有可以更改的属性列表？如果是的话我在哪里可以找到这些。

我发现这个例子从一个问题上的计算器： http://jsfiddle.net/cZDEP/1/

但他们在这种情况下不使用TweenJS，是有可能使用TweenJS来代替这个例子还是我将不得不使用代码在此情况下动画线？

Answer 1

这里是我放在一起使用图形命令快速样品： http://jsfiddle.net/d0d6mpLu/

有一个在EaselJS没有宽度/高度。您可以获取和设置大多数显示对象的边界，但不包含形状。 http://blog.createjs.com/update-width-height-in-easeljs/

对于上述示例，您可以保存任何图形命令，并稍后修改其属性（并更新阶段以反映它）。图形命令被添加到EaselJS 0.7.0。以下是该示例中使用的drawRect命令的文档：http://www.createjs.com/docs/easeljs/classes/Graphics.Rect.html

要保存命令，可以在添加指令后访问图形的command属性。这是最简单的只是链条命令属性：

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

然后，你可以修改它：

rectCommand.w = 200; 

另一种方法是绘制矩形，并使用scaleX/scaleY属性。这适用于旧版本的EaselJS。对于包含的示例，您需要一个单独的形状来调整比例。下面是一个更新的样本与方法：http://jsfiddle.net/d0d6mpLu/1/

希望帮助！