org.as3s.Tween Ver2.0の使い方(5) カスタムイージング関数
org.as3s.Tween Ver2.0ではイージング関数として独自に作成した関数を利用することができます。
また使い方(3)で紹介したように、持続時間を設定しないイージング関数を作成することができるため、従来のTweenライブラリよりも柔軟な拡張が可能です。
カスタムイージング関数
カスタムイージング関数は、Function closureで記述する必要があります。
trace(this);
};
ではなく、
trace(this);
};
という記述方法のことです。（参考：メソッドクロージャとバインドメソッド）
カスタムイージング関数内では、thisはTweenクラスで使用されるTweenParamオブジェクトを指し、次のパラメータが使用されます。
this.init: Tween開始時の初期値
this.begin: 各Tween開始時の初期値（複数Tweenを設定した場合はそれぞれの初期値）
this.value: Tween中の現在の値
this.end: 各Tweenの目標値
this.change: 各Tweenの変化量
this.complete: 各Tweenが終了したかどうかのBoolean
例）Tweenクラスで用意されている単純なイージング(Tween.easing)の実装
if (v*c<0) v = -v;
var distance:Number = this.end - this.value;
if (v>0 && v>distance || v<0 && v<distance) {
this.complete = true;
return this.end;
} else {
return this.value + v;
}
};
上記のように、カスタムイージング関数内ではTween中の毎フレームの値を返すようにし、Tweenが完了した場合にはthis.completeをtrueにします。
また、Tween.accelerate関数のように、現在の速度といった独自のパラメータを持たせることもできます。
例）Tweenクラスで用意されている等加速度イージング(Tween.accelerate)の実装
if (a*c<0) a = -a;
this.v = this.v!=null ? this.v + a : iv + a;
var distance:Number = this.end - this.value;
if (this.v>0 && this.v>distance || this.v<0 && this.v<distance) {
this.complete = true;
return this.end;
} else {
return this.value + this.v;
}
};
動作サンプル
以下のサンプルは、少しトリッキーな例ですが、上記のTween.easing関数をベースに目標値が刻々と変化するようなカスタムイージング関数を定義して、マウスカーソルに追随するアニメーションを作成しています。
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import flash.geom.ColorTransform;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample5 extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample5() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(-25, -25, 50, 50);
sp.graphics.endFill();
addChild(sp);
//Mouse Event
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseMove(event:Event):void {
Tween.start(sp, {}, {scaleX:1, scaleY:1, alpha:0.5}, Tween.easing);
Tween.start(sp, {COMPLETE:onTweenComplete}, {x:stage.mouseX}, followEasing, 0, [stage, "mouseX", 0.1]);
Tween.start(sp, {COMPLETE:onTweenComplete}, {y:stage.mouseY}, followEasing, 0, [stage, "mouseY", 0.1]);
}
private function onTweenComplete(event:Event):void {
if (sp.x==stage.mouseX && sp.y==stage.mouseY) {
Tween.start(sp, {}, {scaleX:1.5, scaleY:1.5, alpha:1}, Tween.easing);
}
}
//Custom Easing Function
private var followEasing:Function = function(t:Number, b:Number, c:Number, d:Number, target:Object, key:String, fraction:Number = 0.5, threshold:Number = 0.05):Number {
this.end = target[key];
var distance:Number = this.end - this.value;
var v:Number = distance*fraction;
if ((v<0 ? -v : v) <threshold) {
this.complete = true;
return this.end;
} else {
return this.value + v;
}
};
}
}
はじめまして。いつも愛読させていただいています。
さっそくTweenライブラリをダウンロードして使わせていただきました。
まだ少ししか触っていないのですが、Filter Tweenに超絶的に感動しました。
他のTween機能も試させていただきますね。
いつも貴重な情報・素晴らしいライブラリをありがとうございます。
shinro
20 Aug 08 at 11:23 am
しばらくblogを書く暇がなくてコメントに気づくのが遅くなりました。
こんなマイナーなTweenライブラリを使っていただきありがとうございます。
admin
17 Oct 08 at 10:40 pm