動畫一個圓角矩形我試圖在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);
});
}
}
}
嘗試使用Elastic.easeOut。 – 2009-05-19 22:30:32