我如何使用 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 属性时，它工作正常。是否有我可以更改的属性列表？如果是这样，我在哪里可以找到这些。

我从 Whosebug 上的一个问题中找到了这个例子： http://jsfiddle.net/cZDEP/1/

但是他们在这种情况下没有使用 TweenJS，是否可以使用 TweenJS 替换此示例，或者在这种情况下我是否必须使用 Ticker 来为线条设置动画？

Answer 1

这是我使用图形命令组合在一起的快速示例： http://jsfiddle.net/d0d6mpLu/

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

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

要保存命令，可以在添加命令后访问Graphics的command 属性。最简单的方法就是链接命令属性:

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

那你就可以修改了：

rectCommand.w = 200;

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

希望对您有所帮助！

我如何使用 TweenJS 和 Easeljs 更改矩形的形状

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

javascript

canvas

easeljs

createjs

tween.js