トゥイーンアニメーションする

トゥイーンアニメーションを行うには akashic-timeline を利用します。

凡例

var tl = require("@akashic-extension/akashic-timeline");
var timeline = new tl.Timeline(scene);

// e を現在位置から座標 (300, 0) へ 2000 ミリ秒かけて動かすアニメーションを実行
timeline.create(e).moveTo(300, 0, 2000);

「毎フレーム描画位置を変える」といった簡単なアニメーションの場合は onUpdate トリガーを利用して 自力で動かすこともできます。 akashic-timeline を利用すると、拡大と移動の同時実行や、イージングなど複雑なアニメーションを簡潔に記述することができます。

画像を切り替えるパラパラアニメ (フレームアニメーション) を行うには g.FrameSprite を利用してください。

利用例

詳細

akashic-timeline は Akashic Engine 向けのトゥイーンアニメーションライブラリです。

akashic-timeline のインストールは game.json が置かれているディレクトリで以下のコマンドを実行してください。

akashic install @akashic-extension/akashic-timeline

akashic-timeline を利用したいシーンで以下のように require を行い、scene.onLoad 内で Timeline を生成します。

var tl = require("@akashic-extension/akashic-timeline");

scene.onLoad.add(function () {
  var timeline = new tl.Timeline(scene);
  var tween = timeline.create(rect);
});

timeline.create() を呼び出すことで rect をアニメーション対象とした Tween を生成することが出来ます。Tween とはアニメーションの実行単位であるアクションを操作するオブジェクトです。

timeline.create() では modified オプションが省略された場合、Tween の対象オブジェクトの modified()が与えられます。 これまでの例では、 modified オプションで rect.modified を指定していました。 この modified オプションは、毎フレーム、アクションを実行した度に呼び出される関数を指定するものです。通常は Akashic のエンティティの modified() 関数を指定することになりますが、 Tile や Label のような内部描画キャッシュを持つエンティティの場合は、必要に応じて invalidate() 関数を指定してください。

移動

エンティティの移動を行うアニメーションは moveX(), moveY(), moveTo(), moveBy() があり、. で繋げることで続けて実行することが出来ます。下記のコードでは、X 座標 100 の位置に 1 秒かけて移動した後、Y 座標 50 に 2 秒かけて移動するアニメーションを行います。

timeline.create(rect).moveX(100, 1000).moveY(50, 2000);

X 座標と Y 座標を同時に変化させたい場合は moveTo() アクションを利用します。 下記のコードでは、2 秒掛けて X 座標 300、Y 座標 400 の位置に移動するアニメーションを行います。

timeline.create(rect).moveTo(300, 400, 2000);

上記の例では絶対位置への移動でしたが、現在の位置からの相対位置に移動させるには moveBy() を利用することで相対位置への移動を行うことが出来ます。

Easing

Easing とはアニメーションの加速や減速方法を定義した関数です。 akashic-timeline では各アクションに様々な Easing を指定することが出来ます。 Easing を指定しない場合は、エンティティは直線的な動作で移動します。この時、内部的には Easing.linear が指定されています。

timeline.create(rect).moveTo(300, 400, 2000);

moveTo() などの最後の引数に他の Easing を指定することで複雑なアニメーションをさせることが出来ます。Easing の各関数の動作はイージング一覧で確認出来ます。詳細はAPI リファレンスを参照してください。

timeline.create(rect).moveTo(300, 400, 2000, tl.Easing.easeInCubic);

回転

rotateTo() や rotateBy() を使うことで回転アニメーションを実現することが出来ます。

下記のコードでは、四角形を 90 度回転させています。

timeline.create(rect).rotateTo(90, 1000);

ループ

ループは timeline.create() の loop オプションで指定することが出来ます。

timeline.create(rect, { loop: true }).rotateTo(90, 1000);

並列実行

アクションを並列実行するには con() を利用します。 con() を呼び出した直前のアクションと直後のアクションを並列に実行することができます。

下記の例では、moveTo() で移動しながら rotateTo() で回転しています。

timeline.create(rect).moveTo(200, 200, 1000).con().rotateTo(180, 2000);

その他のプロパティ制御

moveTo() や rotateTo() を使ってのアニメーションは内部的にアニメーション対象の x, y, angle 等のプロパティを変化させています。他のプロパティを制御したい場合は to() を使用することができます。

下記のコードでは、 FilledRect の width と height を変化させています。

timeline
  .create(rect, { loop: true })
  .to({ width: 500, height: 200 }, 1000)
  .to({ width: 0, height: 0 }, 1000);

開始位置からの相対値を指定したい場合は by() を使用することができます。

to() や by() を使用して数値型のプロパティを変化させることはできますが、 FilledRect の cssColor プロパティなど、数値型以外のプロパティを変化させることは出来ません。数値型以外のプロパティを変化させるには every() を使用することでプロパティを変化させることができます。下記のコードでは、every() に指定した関数の中で第二引数に変化量（0〜1）が渡されてくるので、 その値を元に cssColor を変化させています。

timeline.create(rect).every(function (elapsed, progress) {
  var c = Math.floor(255 * progress);
  rect.cssColor = `rgb(${c},0,${c} )`;
}, 5000);

アクションの完了と取り消し

すべてのアクションを完了させたい場合は complete() を利用します。 下記のコードでは、FilledRect をクリックすると 2 秒掛けて透過度が 0 になるというアニメーションを即座に完了させることができます。

var tween = timeline.create(rect).to({ opacity: 0 }, 2000);
rect.pointDown.add(function () {
  tween.complete();
});

また、アニメーションをその時点で取り消したい場合は cancel() を利用します。

var tween = timeline.create(rect).to({ opacity: 0 }, 2000);
rect.pointDown.add(function () {
  tween.cancel();
});

特定の Timeline に紐付いたすべての Tween を完了させたい場合は timeline.completeAll() を、取り消したい場合は timeline.cancelAll() を利用することができます。

Tween の破棄タイミング

timeline.create() で作成した Tween は timeline.remove() で破棄することができます。

破棄された Tween で定義したアクションは全て実行されなくなります。

また、以下の場合に Tween は自動的に破棄されます。

• 全アクションが終了し、ループしない場合
• アニメーション対象が破棄された場合

関連情報

• API リファレンス