- 2009年7月 7日 09:04
- Technology
- Comments: 0
- TrackBacks: 0
- Edit
Tweensy解説の第5弾です。今回はトゥイーンにまつわるアレコレを説明していきます。
その他、トゥイーンについて
Tweensy.to、from、fromToによるトゥイーンを定義したときは、TweensyTimelineインスタンスが返されます。TweensyTimelineインスタンスには、トゥイーン実行中に変更可能なパラメータが含まれています。
TweensyTimeline（タイムラインを使う）
TweensyTimelineを使うことで、トゥイーン実行中のパラメータを再定義することができます。
import com.flashdynamix.motion.Tweensy;
import com.flashdynamix.motion.TweensyTimeline;
var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0);
timeline.duration = 3.5;
myInstanceのxを、現在値から500に、始めに定義した2秒ではなく、3.5秒で動かします。
TweensyTimelineは、以下に記述するよりも、さらに多くの機能を提供します。
Relative & Random range（相対的、ランダムな範囲）
Tweensy.to、fromなどで指定するObjectのプロパティは、相対的またはランダムな範囲を指定することができます。
import com.flashdynamix.motion.Tweensy;
Tweensy.to(myInstance1, {x:"500"});
Tweensy.to(myInstance2, {x:"-500"});
Tweensy.to(myInstance3, {x:"250,500"});
いずれのTweensy.toも、インスタンスのxを動かす例です。上から順に、現在地から相対的に+500、現在地から相対的に-500、現在地から相対的に+250～+500の範囲でランダム、で動きます。
訳注：絶対指定との違いは、数値をダブルクオーテーションで括ることです。
TweensyTimeline.ease（イージング関数を使う）
イージング関数によって、トゥイーンの動き方を変えられます。Tweensyは、Adobeのfl.motion.easingパッケージに含まれるイージング関数をサポートしており、これらはTweensyライブラリの一部として提供されています。デフォルト（パラメータがnullもしくは指定されなかったとき）では、TweensyはQuintic.easeOutを使用します。
import com.flashdynamix.motion.Tweensy;
import fl.motion.easing.Sine;
Tweensy.to(myInstance, {x:500}, 2.0, Sine.easeOut);
myInstanceのxを、現在値から500に、2秒間で、Sine.easeOutを使いながら動かします。
TweensyTimeline.easeParams（イージング関数にパラメータを与える）
イージング関数のBack、Elasticは、特別なイージング関数です。これらの関数は、パラメータを与えることで、動き方を変えることができます。TweensyTimelineで、BackEaseParamsクラス、ElasticEaseParamsクラスを使ってパラメータを定義します。
import com.flashdynamix.motion.Tweensy;
import com.flashdynamix.motion.TweensyTimeline;
import fl.motion.easing.Back;
import com.flashdynamix.motion.easing.BackEaseParams;
var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0, Back.easeOut);
timeline.easeParams = new BackEaseParams(0.7);
myInstanceのxを、現在値から500に、2秒間で、0.7倍に弱められたBack.easeOutを使いながら動かします。
TweensyTimeline.delayStart、TweensyTimeline.delayEnd（ディレイをかけたトゥイーン）
すべてのトゥイーンは、始まりと終わりにディレイをかけることができます。デフォルトでは、ディレイはありません。
import com.flashdynamix.motion.Tweensy;
import com.flashdynamix.motion.TweensyTimeline;
var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0, null, 1.0);
timeline.delayEnd = 1.5;
myInstanceのxを、現在値から500に、1秒待ってから、2秒間で動かし、その後1.5秒経ったらトゥイーンを終了します。
訳注：Tweensy.toの引数で指定している「1.0」の部分が、TweensyTimeline.delayStartにあたります。これは実際に動き始めるまでのディレイです。つまり、トゥイーンを実行しても、始めの1秒間は見た目が何も変わらないということです。対してdelayEndは、見た目の変化（動き）が終わってから、トゥイーン完了イベント（onCompleteイベント）が発生するまでのディレイです。
次回は、これまで解説してきたx以外のプロパティをトゥイーンする方法を予定しています。
よろしければコメントをどうぞ！
匿名希望のコメントはこちらへ
Trackbacks:0
- TrackBack URL for this entry
- https://448.jp/cgi-bin/mt/bnq48cke.cgi/1373
- Listed below are links to weblogs that reference
- Tweensy解説 #5 duration, Relative & Random range, ease, easeParams, delayStart, delayEnd from 448.jp blog
