在 AS3 中使用 GreenSock 补间 Sprite 大小

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 即可。但是，如果您需要达到指定的半径，唯一的方法是在补间的每个间隔上重新绘制圆。