在Actionscript 3中补间圆角矩形

I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with actionscript 3. My tweening engine is TweenLite.

我想在一个短圆角矩形和一个高圆角矩形之间补间。 (我只想处理高度 - 没有其他参数)。我用actionscript 3编程。我的补间引擎是TweenLite。

I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?

我一直在补间包含圆角矩形的精灵。补间精灵会产生失真。我想我一直在缩放原始图像,而不是圆角矩形的高度?

Here is a simple example of my code:

这是我的代码的一个简单示例:

Draw the rounded rectangle:

绘制圆角矩形:

roundRect = new Sprite();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15
roundRect.graphics.endFill();
addChild(roundRect);

roundRect = new Sprite(); roundRect.graphics.beginFill(0x000000处); roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //原始高度:15 roundRect.graphics.endFill();的addChild(ROUNDRECT);

Then I listen for a mouse click event on the rounded rectangle.

然后我在圆角矩形上听一下鼠标点击事件。

The mouse event triggers a function with the following code:

鼠标事件使用以下代码触发函数:

TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120

TweenLite.to(this.roundRect,1,{height:120}); //最终高度:120

I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion. Is there any way to achieve this?

我想补间圆角矩形本身的高度。我希望这不会产生不必要的失真。有没有办法实现这个目标?

Thank you.

2 个解决方案

#1

This can be achieved with "9-slice scaling".

这可以通过“9切片缩放”来实现。

Below are two tutorials on how to setup a Movieclip to use the 9-slice guides, one is done through the IDE (using the guidelines) and the other through code (by defining a rectangle called grid and assigning this to the movieclip's scale9Grid property).

下面是关于如何设置Movieclip以使用9切片指南的两个教程,一个通过IDE(使用指南)完成,另一个通过代码完成(通过定义一个名为grid的矩形并将其指定给movieclip的scale9Grid属性) 。

http://www.sephiroth.it/tutorials/flashPHP/scale9/

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html

Once the scale9Grid property has been correctly assigned you can scale (and Tween) the movieclip as intended without any distortion.

一旦正确分配了scale9Grid属性,您可以按预期缩放(和Tween)动画片段而不会出现任何失真。

It might also be worth reading: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ which describes various scenarios when scale9grid does and doesn't work. (mainly to do with having nested children and non-vector graphics inside of the grid).

它也许值得一读:http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/,它描述了scale9grid运行和不运行时的各种场景。 (主要是在网格内部嵌套子项和非矢量图形)。

Hope this helps.

希望这可以帮助。

#2

As an alternative, and since its only a rounded rectangle, you could also do something like this:

作为替代方案,由于它只是一个圆角矩形,你也可以这样做:

var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();

function updateRect() {
    roundRect.graphics.clear();
    roundRect.graphics.beginFill(0x000000);
    roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
    roundRect.graphics.endFill();
}

roundRect.addEventListener("click", click);
function click(e) {
    TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}

#1