AS3 イージングとバネのモーションのメモ
- 時間：2009年11月20日 15:43
-
delicious に登録
-
はてブに登録
- トラックバック：(0)
- コメント：(0)
下記サンプルのボタンをクリックしてください。
移動距離がイージングの場合は+なら+のまま-なら-のままですが
バネの場合はターゲットに近づくと+-がいったりきたりしています。（その値がバネの振り幅）
【サンプルswf】
イージングについてメモ
- まずイージングの値を決める。必ず1以下数字が小さいほどターゲットに対してゆっくり近づく。
- 次にターゲット（徐々に近づけたい目標）を決める。
- ターゲットまでの距離を求める。
- ターゲットまでの距離にイージングの値を掛けて速度を算出する。
- 速度を現在の位置に加算。
- 目標に到達するまで3～5を繰り返す。
時間が出来た時に要図解
下記がイージングの公式
_ball.x += (mouseX - _ball.x) * _easing; _ball.y += (mouseY - _ball.y) * _easing;
バネ的な動きについてメモ
- バネの比率を決める。（高いほど強いバネに、低いと伸びたようなバネに）
- 次にターゲットを決める。
- ターゲットまでの距離を求める。
- 加速度を求める。（加速度=ターゲットまでの距離*バネの比率）
- 加速度を速度に加える。
- 速度に摩擦を適用（この処理がないと永遠にバネる）
- 速度を現在の位置に加算。
- 目標に到達するまで3～7を繰り返す。
時間が出来た時に要図解
下記がバネ的な動きの公式
_ball.vx += (mouseX - _ball.x) * _spring; _ball.vx *= _fliction; _ball.x += _ball.vx; _ball.vy +=(mouseY - _ball.y) * _spring; _ball.vy *= _fliction; _ball.y += _ball.vy;
【Sample20091120.as】
package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
public class Sample20091120 extends Sprite {
private var _ball:Ball;
/*_easing*/
private var _easing:Number = 0.15;//大きいほど早い
/*_spring*/
private var _spring:Number = 0.2;//高いほど大きなバネになる
private var _fliction:Number = 0.8;
private var _easingBtn:TextBtn;
private var _springBtn:TextBtn;
private var _mode:String;
private var _debugTxt:TextField;
public function Sample20091120():void{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
_init();
}
private function _init():void {
//dynamic クラスにしているのでプロパティの追加可能
_ball = new Ball();
_ball.vx = 0;
_ball.vy = 0;
_ball.x = stage.stageWidth / 2;
_ball.y = stage.stageHeight / 2;
addChild(_ball);
_easingBtn = new TextBtn("イージング");
_easingBtn.id = "イージング";
addChild(_easingBtn);
_easingBtn.x = stage.stageWidth / 2 - _easingBtn.width / 2-50;
_easingBtn.y = stage.stageHeight -40;
_easingBtn.addEventListener(MouseEvent.MOUSE_DOWN, _startHandler);
_springBtn = new TextBtn("バネ");
_springBtn.id = "バネ";
addChild(_springBtn);
_springBtn.x = stage.stageWidth / 2 - _springBtn.width / 2+50;
_springBtn.y = stage.stageHeight - 40;
_springBtn.addEventListener(MouseEvent.MOUSE_DOWN, _startHandler);
_debugTxt= new TextField();
_debugTxt.autoSize = TextFieldAutoSize.LEFT;
_debugTxt.selectable = false;
_debugTxt.x = 20;
_debugTxt.y = 20;
addChild(_debugTxt);
_debugTxt.text = "移動距離 : 0"
}
private function _startHandler(e:MouseEvent):void {
_mode = e.target.id;
this.stage.addEventListener(Event.ENTER_FRAME, _enterframeHandler);
}
private function _enterframeHandler(e:Event):void {
if (_mode == "イージング") {
//イージングの公式
_ball.x += (mouseX - _ball.x) * _easing;
_ball.y += (mouseY - _ball.y) * _easing;
_debugTxt.text = "移動距離 : " + String(Math.floor((mouseX - _ball.x) * _easing));
trace(String(Math.floor((mouseX - _ball.x) * _easing)));
}else if (_mode == "バネ") {
//バネの公式
_ball.vx += (mouseX - _ball.x) * _spring;
_ball.vx *= _fliction;
_ball.x += _ball.vx;
_ball.vy +=(mouseY - _ball.y) * _spring;
_ball.vy *= _fliction;
_ball.y += _ball.vy;
_debugTxt.text = "移動距離 : " + String(Math.floor(_ball.vx));
trace(String(Math.floor(_ball.vx)));
}
}
}
}
import flash.display.Sprite;
dynamic class Ball extends Sprite {
public function Ball():void {
this.graphics.beginFill(0x333333);
this.graphics.drawCircle(0, 0, 30);
this.graphics.endFill();
}
}
import flash.text.*;
dynamic class TextBtn extends Sprite {
public function TextBtn(str:String):void {
this.graphics.beginFill(0x666666);
this.graphics.drawRect(0,0, 60, 22);
this.graphics.endFill();
this.buttonMode = true;
this.mouseChildren = false;
var tf= new TextField();
tf.width = 60;
tf.y = 2;
tf.autoSize = TextFieldAutoSize.CENTER; //autoSizeを指定しないと高さが100pxになる
tf.selectable=false;
this.addChild(tf);
var format:TextFormat=new TextFormat();
format.color=0xFFFFFF;
format.size = 10;
tf.defaultTextFormat = format;
tf.text = str;
}
}
AS3 イージングとバネのモーションのメモに対してコメントをする