我正在尝试在ActionScript 3中为圆形矩形设置动画。
我希望它出现在屏幕的中央，然后在所有四个方向快速生长。初始大小应为约30x10像素，最终大小约为300x100像素。动画应该占用500到1000毫秒之间的某个时间。我希望这个盒子在最后几帧中略微超过这些尺寸，然后反弹回正确的尺寸。
由于TypeOneError的建议，我现在正在使用Back easeOut补间和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;
}
}
}
更新：
是的，感谢Niko Nyman，我明白了。以下是感兴趣的少数人的最终代码：
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 :(得分：0)
您是否尝试过使用easeOut？
myTween = new Tween(o, "scale", Elastic.easeOut, 1, 1.5, 0.75, true);
答案 1 :(得分：0)
如果您希望“长大”并返回，则需要Back.easeOut转换。我是否也建议您使用Flash创作工具来加速图形的创建？您可以使用Rectangle Primitive工具创建圆角矩形，将其转换为MovieClip或Sprite并选择9切片缩放。如果您调整切片使它们开始和结束曲线开始的位置，它只会向上缩放中心并且角落将保持圆形。
答案 2 :(得分：0)
你能不能画出中心的图形（即将左上角放在x = -startWidth/2和y = -startHeight/2而不是0, 0），然后在mySprite上做一个简单的缩放比例？这样你就可以摆脱所有的矩阵计算......