Question

我已经看过使用scaleX补间矩形的示例，但我找不到任何补间圆的东西。（我绘制的“圆圈”实际上是一个甜甜圈形状，我希望外圈是补间的。）

var resizeVar:Number = 75;

myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), resizeVar);
myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), 75);

我试过这样做，但这会引发很多错误。我认为不可能这样：

TweenMax.to(myCircle, 2, {resizeVar:150, ease:SlowMo.ease.config(1, 0)});

通常使用显示对象，就是这样做的。但它不适用于这个“甜甜圈”：

TweenMax.to(myRectangle, 2, {scaleX:1.5, scaleY:1.5 ease:SlowMo.ease.config(1, 0)});

所以我的问题是，我如何补间外圈的半径？

编辑：这就是绘制甜甜圈的方式，因此resizeVar需要从75变为150.

var myCircle:Sprite = new Sprite();

myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, 150); // this is what should be tweening/scaling
myCircle.graphics.drawCircle(0, 0, 75); // this should stay the same
myCircle.graphics.endFill();

addChild(myCircle);

Answer 1

您应该能够补间任何displayObject的scaleX和scaleY属性：

var radius:Number = 75;
var myCircle:Sprite = new Sprite();
myCircle.graphics.beginFill(0);
myCircle.graphics.drawCircle(radius/2, radius/2, radius);
myCircle.graphics.endFill();
addChild(myCircle);

TweenMax.to(myCircle, 2, {scaleX:2, scaleY:2, ease:SlowMo.ease.config(1,0)});

修改

这就是你如何扩展甜甜圈的外部：

var resizeObject:Object = { innerRadius:75, outerRadius:150 }; myCircle = new Sprite(); myCircle.graphics.beginFill(0xbbbbbb); myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius); myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius); myCircle.graphics.endFill(); addChild(myCircle); TweenMax.to(resizeObject, 2, {outerRadius:300, ease:SlowMo.ease.config(1,0), onUpdate:updateCircle, onUpdateParams:[resizeObject]}); function updateCircle(resizeObject:Object):void { myCircle.graphics.clear(); myCircle.graphics.beginFill(0xbbbbbb); myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius); myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius); myCircle.graphics.endFill(); }

Answer 2

它适用于矩形的原因是您正在更改矩形的比例。更改比例时，Flash Player会调整包含图形的显示对象的比例。

但是，对于圆圈，您正在尝试更改圆的半径。半径仅在使用drawCircle()方法绘制圆时使用。补间半径的一种方法是使用补间多次重绘圆圈（不是那么理想）。

要使用新半径重新绘制圆圈，您可以使用TweenMax提供的onUpdate回调：

TweenMax.to(myCircle, 2, {resizeVar:150, onUpdate: onUpdateCallback, onUpdateParams: [resizeVar] });

function onUpdateCallback(radius):void
{
    myCircle.graphics.drawCircle(myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), radius);
}

<强> [编辑]

注意，我添加了一些你需要传递给onUpdateCallback()函数的参数。我还修改了函数以添加radius参数，然后在绘制圆时使用radius。

关于“试图改变这个甜甜圈的外圈”，这可能会更复杂。您可能需要绘制甜甜圈的两个圆圈。您可能还需要在绘制圆圈之前调用graphics.clear()。

然而，也许@Marcela的答案更好，只需更改已绘制对象的scaleX和scaleY即可。但是如果需要达到指定的半径，唯一的方法是在补间的每个间隔上重新绘制圆圈。

在AS3中使用GreenSock补间精灵大小

2 个答案: