2009-05-19 64 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