org.as3s.Tween Ver2.0の使い方(3) 物理的なイージング
org.as3s.Tweenでは単純なイージング以外にも簡単な物理運動をシミュレートしたイージングをサポートしています。
等速イージング
TweenerなどのTweenライブラリで通常使われる等速イージングはfl.motion.easing.Linearクラスが使われますが、これは目標値までの差分を持続時間で均等に分割して移動するもので速度を直接指定するものではありません。
org.as3s.Tweenでは、Tween.unifom関数を使って速度を指定したイージングを行うことができます。
tween.start();
追加引数として、速度（デフォルトは1）を指定します。
tween.start();
動作サンプル（画面クリックでスタートします）
左の２つがorg.as3s.Tween.unifomを使ったもの、右の２つがfl.motion.easing.Linear.easeNoneを使ったものです。
Linear.easeNoneでは初期位置が違っても持続時間が同じなので同時に到達します。
一方、org.as3s.Tween.unifomは同じ速度で動くので到達時間が異なります。
org.as3s.Tweenでは場面によってこれらを使い分けることができます。
（なお、このサンプルではワンライナーを使って記述しています。）
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import org.as3s.Tween;
[SWF(width='700',height='500',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample3a extends Sprite {
private var tween:Tween;
private var sps:Array = [];
public function TweenSample3a() {
//Target Object
for (var i:int=0; i<4; i++) {
sps[i] = new Sprite();
sps[i].graphics.beginFill(0x333333);
sps[i].graphics.drawCircle(0,0,40);
sps[i].graphics.endFill();
sps[i].x = i<2 ? i*125 + 100 : i*125 + 200;
sps[i].y = i%2==0 ? 50 : 150;
addChild(sps[i]);
}
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
//Reset target position
for (var i:int=0; i<4; i++) {
sps[i].x = i<2 ? i*125 + 100 : i*125 + 200;
sps[i].y = i%2==0 ? 50 : 150;
}
//org.as3s.Tween.uniform
Tween.start(sps[0], {}, {y:400}, Tween.uniform, null, [5]);
Tween.start(sps[1], {}, {y:400}, Tween.uniform, null, [5]);
//fl.motion.easing.Linear
Tween.start(sps[2], {}, {y:400}, Linear.easeNone, 80);
Tween.start(sps[3], {}, {y:400}, Linear.easeNone, 80);
}
}
}
等加速度イージング
org.as3s.Tweenでは、Tween.accelerate関数を使って加速度を指定したイージングを行うことができます。
tween.start();
追加引数として、加速度（デフォルトは1）、初速度（デフォルトは0）を指定します。
tween.start();
バウンスイージング
org.as3s.Tweenでは、Tween.bounce関数を使って等加速度運動に跳ね返りを加えたイージングを行うことができます。
tween.start();
追加引数として、加速度（デフォルトは1）、初速度（デフォルトは0）、跳ね返りの反射率（デフォルトは1）を指定します。
tween.start();
動作サンプル（画面クリックでスタートします）
左の２つがorg.as3s.Tween.bounceを使ったもの、右の２つがfl.motion.easing.Bounce.easeOutを使ったものです。
Bounce.easeOutでは、持続時間が同じなので同時に到達する（違う高さから落としたものが同時に到着する）ことになり、このような使い方では不自然になります。
一方、org.as3s.Tween.bounceは加速度を指定して動くので物理空間をシミュレートした自然な動きを実現できます。
Tween.start(sps[0], {}, {y:400}, Tween.bounce, null, [1, 0, 0.8]);
Tween.start(sps[1], {}, {y:400}, Tween.bounce, null, [1, 0, 0.8]);
//fl.motion.easing.Linear
Tween.start(sps[2], {}, {y:400}, Bounce.easeOut, 120);
Tween.start(sps[3], {}, {y:400}, Bounce.easeOut, 120);
ばねイージング
org.as3s.Tweenでは、Tween.elastic関数を使って、ばね係数やダンパーを指定したばねイージングを行うことができます。
tween.start();
追加引数として、ばね係数（デフォルトは0.5）、ダンパー（デフォルトは0.5）、初速度（デフォルトは0）、しきい値（デフォルトは0.05）を指定します。
tween.start();
動作サンプル（画面クリックでスタートします）
左の２つがorg.as3s.Tween.elasticを使ったもの、右の２つがfl.motion.easing.Elastic.easeOutを使ったものです。
Bounce.easeOutでは、初期位置が違っても振動が完全に同期し、同時に目標値に到達します。
一方、org.as3s.Tween.bounceはばね係数やダンパーを指定して動くので物理空間をシミュレートした自然な動きを実現できます。
Tween.start(sps[0], {}, {y:350}, Tween.elastic, null, [0.1, 0.15]);
Tween.start(sps[1], {}, {y:350}, Tween.elastic, null, [0.1, 0.15]);
//fl.motion.easing.Linear
Tween.start(sps[2], {}, {y:350}, Elastic.easeOut, 120);
Tween.start(sps[3], {}, {y:350}, Elastic.easeOut, 120);