phina.jsのオブジェクトには、tweenerというプロパティーがあり、 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] などで説明されているように、単純なアニメーションを実現するのにとても便利です。しかし、同時に複数のアニメーションを実現するには、少々難しいテクニックが必要になります。このページでは、その方法を説明します。通常の単一アニメーションは、
phinaobj.tweener.to({x: 200}, 1000) .to({y: 150}, 400, 'swing'); // .play(); // 2回目以降
というようなパターンをとります。このコードは、phinaobjのプロパティーxを1秒かけて200に変化させ、それからプロパティーyを0.4秒で150にします。ただし、この方法では2つのアニメーションは順番に適用され、同時にはできません。複数のアニメーションをいっぺんに再生するには、phinaobjに複数のtweenerを関連付けなければなりません。そのためには、新しくTweenerのオブジェクトを生成し、そのattachToメソッドで以下のように関連付けます(tweener2は任意の変数、ここでは新しくphinaobjのプロパティーを作って代入している)。
phinaobj.tweener2 = phina.accessory.Tweener() .attachTo(phinaobj);
後は、2つあるtweenerに対してそれぞれアニメーションを指定すれば、目的のアニメーションが実現できます。最終的なコードは以下の通りです。
phinaobj.tweener2 = phina.accessory.Tweener() .attachTo(phinaobj); phinaobj.tweener.to({x: 200}, 1000); phinaobj.tweener2.to({y: 150}, 400, 'swing');
ちなみに、phina.jsのオブジェクトに含まれているtweenerプロパティーは、実はゲッターで最初に使ったときに実体が生成されるようになっています。

phina.jsのオブジェクトとは言っても、tweenerプロパティーはphina.app.Elementを継承したクラスにしかありません。また、phina.app.Elementを継承したクラスにしかTweenerは使用できません。Vector2のような極めて基本的なオブジェクトのプロパティーをTweenさせるには、さらに高度な工夫が必要になります。Tweenerは、内部でphina.util.Tweenというクラスを使用しています。このクラスを使用すれば、phina.app.Elementを継承していないオブジェクトのプロパティーもTweenさせることが出来ます。まず、Tweenのオブジェクトを作成します。
var tween = phina.util.Tween();
そうすれば、後はこれまで
vec.tweener.to({x: 55}, 550, 'linear')
としていた所を
tween.to(vec, {x: 55}, 550, 'linear')
と置き換えるだけです。ただし、これだけでは動きません。Tweenerが行ってくれていた毎フレームの移動処理を行っていないからです。そこで、Sceneなり自作クラスなりのupdate関数にその処理を加えましょう。以下のようにします。
update: function(app) { /* * 元々からあった処理 */ tween.forward(1000 / app.fps); }
この処理を加えることによって、アニメーションの時間が 1000 / app.fps ミリ秒だけ進みます。カッコ内の式は、このフレームにどれだけアニメーションの時間を進めるかを決定しているので、この式を変更することでTweenerのupdateTypeに相当することも行えます。 また、update関数から変数tweenを参照できるようにしておくことも忘れずに。Tweenによるアニメーションを多数行いたい場合の例を以下に示します。
init: function(options) { this.superInit(options); /* * 諸々の処理 */ this.tweens = [phina.util.Tween(), phina.util.Tween(), phina.util.Tween()]; /* * tweensを使用したアニメーションを行う */ }, update: function(app) { /* * 同じく諸々の処理 */ this.tweens.each(function(tween) { tween.forward(1000 / app.fps); }); }
しかし、このようなことをする機会は滅多に無いでしょう。備忘録程度に考えていただければと思います。