直感的かつ再利用性の高いアニメーションライブラリ BetweenAS3

SparkProjectに毎度顔を出しているような、ASマッチョな貴兄には、もはや定番のBetweenAS3。僕は今までぐだぐだTweener使っていたクチなんですが、FlashPlayer 9 対応したとのことで、訃報も久しいTweenerから乗り換えました。正直にいいます。

こんな直感的なライブラリは見たことがない。

同系列の新しいライブラリへの乗り換えってこれがなかなか、どうして躊躇してしまいますよね。慣れ親しんだTweenerから永訣とは、なかなか行かないんだろうと思いました。ところが、どっこいBetweenAS3にはスムーズに移行できました。

ただ左から右へスライドして、ぼけて元に戻るという単純なトゥイーンです。まずはTweenerから見てみましょう。

Tweener

FilterShortcuts.init();
Tweener.addTween(tweenerBox, {x:stage.stageWidth - tweenerBox.width,time:basetime,transition:"easeInOutSine"} );
Tweener.addTween(tweenerBox, {_Blur_blurX:20,_Blur_blurY:20,time:basetime / 2,transition:"linear",
	onComplete:Tweener.addTween,
	onCompleteParams:[tweenerBox, {_Blur_blurX:0,_Blur_blurY:0,time:basetime / 2,transition:"linear"}]
});

まず、フィルターを使うので、FilterShortcuts.initを実行します。そしてひとつめのTweener.addTweenで、スライドのトゥイーンを定義。transitionはStringで定義しています。二つめのTweener.addTweenで、ぼかしのフィルターをかけます。ぼかしきったら今度はぼかしをとかなければならないので、ここではonCompleteを使用します。delayでも構わないのですが、ここでは秒数で決め打つより、トゥイーンが確実に終った事を保証するonCompleteをとりました。

見てみると分かるんですが、結構無駄が多いですよね。同じ事を何度も書いたりして、、onCompleteを使用しているため、メソッドの指定とパラメータ指定が分離して可読性が著しく欠けてしまっています。

次はBetweenAS3です。

BetweenAS3

var slide:ITween = BetweenAS3.tween(betweenBox, { x:stage.stageWidth - betweenBox.width }, null, basetime,Sine.easeInOut);
var blur:ITween = BetweenAS3.tween(betweenBox, { _blurFilter:{blurX: 20, blurY: 20} }, { _blurFilter:{blurX: 0, blurY: 0} }, basetime/2,Linear.linear);
BetweenAS3.parallel(slide, BetweenAS3.serial(blur, BetweenAS3.reverse(blur))).play();

BetweenAS3.tweenを使って、トゥイーンをかけていきます。このメソッドはIObjectTweenインターフェースを実装したObjectTweenクラスインスタンスを返します。このインスタンスはトゥイーンの実体と呼べるべきもので、変数にいれて使い回すことが出来ます。同じように、ブラーのトゥイーンも掛けます。問題はこの後です。ブラーを元に戻すトゥイーン定義では、BetweenAS3.parallelとBetweenAS3.serial、そしてBetweenAS3.reverseを使います。

BetweenAS3.reverseは、指定したトゥイーンを逆転したReversedTweenクラスインスタンスを返します。これによって、ブラーが元に戻るトゥイーンが生成します。次に、BetweenAS3.serialを使って最初に作ったブラーに変化するトゥイーンと、ブラーが戻るトゥーンを連結します。トゥーインとトゥイーンを連結させることで、イベントの終了を待ったり監視する必要がありません。そして、BetweenAS3.parallelを使用してスライドするトゥイーンとブラーのトゥイーンを合成します。parallelの名の通り、並行して実行されます。最後に、BetweenAS3.parallelを実行して帰ってきたITweenGroupクラスインスタンスに対してplayを実行。めでたくトゥイーンが開始されます。

無駄がない

まず思うのが、無駄がないということ。Tweenerと比べると分かるんですが、ブラーを掛けて戻すといったトゥイーンの場合でも作ったトゥイーンを元に再利用できるので、似たような記述を書く必要がありません。さらに、注目すべきは、BetweenAS3.apply以外のメソッドは全て、ITweenインターフェースを実装するクラスインスタンスを返します。これはつまり、一定の書き方で動作が保証されているということです。なにかしたかったらメソッドにつっこんで、ごにょごにょすれば、かならずITweenが返ってきて、それをplayするだけ。イージングも定数で定義されているから、FlashDevelopなら補完がききます。ここまで直感的で、手軽だと、"ボブの絵画教室"みたいなこといいたくなりますよね。

"ね、簡単でしょう？"

まだ試していないという方は、yossyさんの作ったこの素晴らしいライブラリを試してみてください。Tweener ? そんなライブラリもありましたね！