Actionscript 3 在ActionScript 3中设置圆形矩形的动画

我正在尝试在ActionScript3中设置一个圆形矩形的动画

我希望它出现在屏幕的中央，然后在所有四个方向快速增长。初始大小应约为30x10像素，最终大小约为300x100像素。动画应该在500到1000毫秒之间。我希望这个盒子在最后几帧中稍微超出这些尺寸，然后反弹到合适的尺寸

多亏了TypeOneError的建议，我现在使用了一个Back-easeOut tween和一个scale9Grid，但我仍然没有脱离困境。我可以让长方体向右和向下弹起，动画看起来也不错，但我希望长方体保持居中。函数ScaleFromCenterConstant几乎正确，因为长方体保持居中，但是如果我通过tween计算的比例发送，长方体将在屏幕上爆炸

我应该使用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;
    }

}   
}

更新：

是啊，多亏了尼科·尼曼，我才成功了。以下是感兴趣的少数人的最终代码：

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

}   
}

---

你有没有试过用它

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

---

如果你想“长大”回来，你希望

回来。easeOut

转换。我还可以建议您使用Flash创作工具来加速图形的创建吗？可以使用矩形基本体工具创建圆角矩形，将其转换为MovieClip或Sprite，然后选择9层缩放。如果您调整切片，使其开始和结束于曲线开始的位置，则只会向上缩放中心，而角将保持圆形。

您能否将图形居中绘制（即，将左上角置于

x=-startWidth/2

和

y=-startHeight/2

而不是

0，0

），然后在mySprite上做一个简单的两人比例测试？通过这种方式，您可以摆脱所有矩阵计算…

Back.easeOut转换是我所需要的，而且我已经将scale9Grid应用到工作中，效果良好，谢谢！不幸的是，我在缩放方面仍然有点困难，我已经相应地更新了这个问题。看起来你是从1到5缩放的，这将是500%大。这可能就是为什么它会从屏幕上消失。相当大的增加。好吧，我以50px的宽度开始，所以如果我的数学正确的话，500%的增加将导致最终的宽度为250px。调用Matrix.scale（）的问题在于，每个后续调用都是指数型的。