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

时间:2016-01-14 02:12:02

标签: javascript canvas createjs easeljs tween.js

我有一个简单的形状:

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来动画线?

1 个答案:

答案 0 :(得分:2)

这是我使用图形命令放在一起的快速示例: 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

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

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

然后你可以修改它:

rectCommand.w = 200;

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

希望有所帮助!