在 Actionscript 3 中补间圆角矩形

Question

我想在一个短圆角矩形和一个高圆角矩形之间进行补间。 （我只想处理高度 - 没有其他参数）。 我正在使用 Actionscript 3 进行编程。我的补间引擎是 TweenLite。

我一直在补间一个包含圆角矩形的精灵。 补间精灵会产生扭曲。 我想我一直在缩放原始图像，而不是圆角矩形的高度？

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

-

绘制圆角矩形：

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

然后我监听圆角矩形上的鼠标单击事件。

鼠标事件触发一个函数，代码如下：

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

-

我想调整圆角矩形本身的高度。 我希望这不会产生不必要的失真。 有什么办法可以实现这一点吗？

谢谢。

Answer 1

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

下面是关于如何设置影片剪辑以使用 9 切片参考线的两个教程，一个是通过 IDE（使用参考线）完成的，另一个是通过代码完成的（通过定义一个名为 grid 的矩形并将其分配给影片剪辑的 scale9Grid 属性） 。

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

< a href="http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html" rel="nofollow noreferrer">http ://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html

一旦正确分配了scale9Grid属性，您就可以按预期缩放（和补间）影片剪辑，没有任何失真。

它也可能值得一读：http://www. ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ 描述了scale9grid工作和不工作时的各种场景。 （主要与网格内的嵌套子项和非矢量图形有关）。

希望这可以帮助。

Answer 2

作为替代方案，由于它只是一个圆角矩形，您也可以执行以下操作：

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});
}