2009-05-19 120 views
1

動畫一個圓角矩形我試圖在ActionScript 3在ActionScript 3

動畫一個圓角矩形我希望它出現在屏幕的中央,然後生長出迅速在所有四個方向。初始尺寸應該約爲30x10像素,最終尺寸約爲300x100像素。動畫應該在500到1000毫秒之間。我希望盒子在最後幾幀略微超出這些尺寸,然後反彈回正確的尺寸。

由於TypeOneError的建議,我現在正在使用Back easeOut tween和scale9Grid,但是我仍然沒有走出困境。我可以讓盒子向右和向下反彈,動畫看起來不錯,除了我希望盒子保持居中。 ScaleFromCenterConstant函數幾乎是正確的,因爲框保持居中,但是如果我通過補間計算的比例發送,則框會在屏幕上爆炸。

我應該使用Matrix.scale()還是應該單獨設置Matrix.a .d .tx和.ty?

這裏是我的代碼迄今:

package { 

import fl.transitions.Tween; 
import fl.transitions.TweenEvent; 
import fl.transitions.easing.*; 

import flash.display.*; 
import flash.geom.Matrix; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
import flash.text.TextField; 
import flash.text.TextFieldAutoSize; 
import flash.utils.setTimeout; 

public class Scaling extends Sprite 
{ 

    private var startWidth:int = 50; 
    private var startHeight:int = 30; 
    private var startLineWidth:int = 5; 
    private var startEllipse:int = 15; 
    private var startCenter:Point = new Point(400, 300); 

    public var mySprite:Sprite = new Sprite(); 
    public var myTween:Tween; 

    public function Scaling() { 
     this.stage.scaleMode = StageScaleMode.NO_SCALE; 
     this.stage.align = StageAlign.TOP_LEFT; 

     graphics.beginFill(0x000000); 
     graphics.drawRect(0, 0, 800, 600); 
     mySprite.graphics.endFill(); 

     mySprite.graphics.beginFill(0xF7F3DC); 
     mySprite.graphics.lineStyle(startLineWidth, 0xD35F72); 
     mySprite.graphics.drawRoundRect(0, 0, startWidth, startHeight, startEllipse, startEllipse); 
     mySprite.graphics.endFill(); 

     mySprite.x = startCenter.x - startWidth/2; 
     mySprite.y = startCenter.y - startHeight/2; 
     mySprite.width = startWidth; 
     mySprite.height = startHeight; 

     mySprite.scale9Grid = new Rectangle(10, 10, 30, 10); 

     setTimeout(GoGoGadgetScaling, 1000); 
    } 

    private function GoGoGadgetScaling():void { 
     addChild(mySprite); 

     var o:Object = new Object(); 
     o["scale"] = 1; 

     myTween = new Tween(o, "scale", Back.easeOut, 1, 5, 0.3, true); 

     myTween.addEventListener(TweenEvent.MOTION_CHANGE, function(evt:TweenEvent):void { 
      //ScaleRightAndDown(mySprite, o["scale"] * 2, o["scale"], startCenter); 
      //ScaleFromCenterConstant(mySprite, 1.2, 1.1, startCenter); 
      ScaleFromCenter(mySprite, o["scale"], o["scale"], startCenter); 
     }); 

     myTween.addEventListener(TweenEvent.MOTION_FINISH, function(evt:TweenEvent):void { 
      setTimeout(function():void { 
       var tf:TextField = new TextField(); 
       tf.autoSize = TextFieldAutoSize.LEFT; 
       tf.text = "Finished..."; 
       mySprite.addChild(tf); 
      }, 100); 
     }); 
    } 

    private function ScaleRightAndDown(ob:*, sx:Number, sy:Number, ptScalePoint:Point):void { 
     var m:Matrix = ob.transform.matrix; 
     m.a = sx; 
     m.d = sy; 
     mySprite.transform.matrix = m; 
    } 

    private function ScaleFromCenterConstant(ob:*, sx:Number, sy:Number, ptScalePoint:Point):void { 
     var m:Matrix = ob.transform.matrix; 
     m.ty -= ptScalePoint.y; 
     m.tx -= ptScalePoint.x; 
     m.scale(sx, sy); 
     m.tx += ptScalePoint.x; 
     m.ty += ptScalePoint.y; 
     ob.transform.matrix = m; 
    } 

    // This does not work 
    private function ScaleFromCenter(ob:*, sx:Number, sy:Number, ptScalePoint:Point):void { 
     var m:Matrix = ob.transform.matrix; 
     m.ty -= ptScalePoint.y; 
     m.tx -= ptScalePoint.x; 
     m.scale(sx, sy); 
     m.a = sx; 
     m.d = sy; 
     m.tx += ptScalePoint.x; 
     m.ty += ptScalePoint.y; 
     ob.transform.matrix = m; 
    } 

} 
} 

UPDATE:

耶,多虧了妮可·尼曼,我得到了它的工作。以下是感興趣的幾個最終代碼:

package { 

import fl.transitions.Tween; 
import fl.transitions.TweenEvent; 
import fl.transitions.easing.*; 
import flash.display.*; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
import flash.text.*; 
import flash.utils.setTimeout; 

public class Scaling extends Sprite 
{ 

    private var startWidth:int = 400; 
    private var startHeight:int = 150; 
    private var startLineWidth:int = 5; 
    private var startEllipse:int = 15; 
    private var startCenter:Point = new Point(400, 300); 

    public var mySprite:Sprite = new Sprite(); 
    public var myTween:Tween; 

    public function Scaling() { 
     this.stage.scaleMode = StageScaleMode.NO_SCALE; 
     this.stage.align = StageAlign.TOP_LEFT; 

     mySprite.graphics.beginFill(0xF7F3DC); 
     mySprite.graphics.lineStyle(startLineWidth, 0xD35F72); 
     mySprite.graphics.drawRoundRect(-startWidth/2, -startHeight/2, startWidth, startHeight, startEllipse, startEllipse); 
     mySprite.graphics.endFill(); 

     mySprite.x = startCenter.x; 
     mySprite.y = startCenter.y; 

     mySprite.scale9Grid = new Rectangle(-startWidth/2 + startEllipse/2, -startHeight/2 + startEllipse/2, startWidth - startEllipse, startHeight - startEllipse); 

     mySprite.scaleX = 0; 
     mySprite.scaleY = 0; 

     addChild(mySprite); 

     setTimeout(GoGoGadgetScaling, 1000); 
    } 

    private function GoGoGadgetScaling():void { 

     var o:Object = new Object(); 
     o["scale"] = 1; 

     myTween = new Tween(o, "scale", Back.easeOut, 0.1, 1, 0.5, true); 

     myTween.addEventListener(TweenEvent.MOTION_CHANGE, function(evt:TweenEvent):void { 
      mySprite.scaleX = o["scale"]; 
      mySprite.scaleY = o["scale"]; 
     }); 

     myTween.addEventListener(TweenEvent.MOTION_FINISH, function(evt:TweenEvent):void { 
      setTimeout(function():void { 
       var tf:TextField = new TextField(); 
       tf.autoSize = TextFieldAutoSize.LEFT; 
       tf.text = "Finished..."; 
       mySprite.addChild(tf); 
      }, 100); 
     }); 
    } 

} 
} 
+0

嘗試使用Elastic.easeOut。 – 2009-05-19 22:30:32

回答

0

你可以直接繪製圖形居中(即將左上角放在x = -startWidth/2y = -startHeight/2而不是0, 0),然後在mySprite上做一個簡單的縮放比例?這樣你可以擺脫所有的矩陣計算...

0

您是否試過使用easeOut?

myTween = new Tween(o, "scale", Elastic.easeOut, 1, 1.5, 0.75, true); 
0

如果您希望「長大」並回來,您需要Back.easeOut轉換。我是否也建議你使用Flash Authoring工具來加速圖形的創建?您可以使用Rectangle Primitive工具創建一個圓角矩形,將其轉換爲MovieClip或Sprite並選擇9切片縮放。如果您調整切片,以便它們開始和結束曲線開始的位置,它將只會縮放中心並保持角落。

+0

Back.easeOut過渡是我需要的,我也已經把scale9Grid與良好的結果合作,謝謝!不幸的是,我仍然遇到了縮放問題,我已經更新了相應的問題。 – 2009-05-26 15:09:20

+0

看起來像是從1-5縮放,這將會增加500%。可能是爲什麼它要離開屏幕。相當大的增加。 – typeoneerror 2009-05-26 18:27:27