在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()方法繪製圓時纔會使用半徑。調整半徑的一種方法是使用您的補間重新繪製圓圈多次（不是那麼理想）。

要重新繪製新的半徑的圓圈，你可以使用onUpdate回調TweenMax報價：

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

[編輯]

注意，我已經添加了一些PARAMS說你需要傳遞給onUpdateCallback()函數。我還修改了函數以添加radius參數，然後在繪製圓時使用radius。

關於「試圖改變這個甜甜圈的外圈」，這可能會更復雜。您可能需要畫兩個圓圈。繪製圓之前，您可能還需要撥打graphics.clear()。

不過，也許@Marcela的答案比較好，只是改變已經繪製的對象的scaleX和scaleY。但是，如果您需要達到指定的半徑，唯一的方法就是在補間的每個間隔上重新繪製圓。