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

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

本文关键字：何使用 TweenJS Easeljs      更新时间：2023-09-26

我有一个简单的形状：

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

我在stackoverflow上的一个问题中发现了这个例子：http://jsfiddle.net/cZDEP/1/

但在这种情况下，他们没有使用TweenJS，有可能用TweenJS代替这个例子吗？或者在这种情况中，我必须使用Ticker来动画一条线吗？

下面是我使用图形命令制作的一个快速示例：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/

希望能有所帮助！

相关文章：