読者です 読者をやめる 読者になる 読者になる

【phina.js】2回目以降のTweenerアニメーションが動かないとき

ゲームを作ってるときにハマったもの。
解決済みです。

phinajs.com

1回しか動かない

たとえばクリックイベントなどでオブジェクトのアニメーションを繰り返したいとき。

動かないプレビュー

アニメーション部分の記述は以下。

star.tweener
.to({ y: star.y - 100 }, 100, "swing")
.call(function() {
  console.log("moved !!");
})

上にぐんぐん動かしたい……
エラーも出ないしコールバックも動作しないしでどん詰まりでしたが、
ある会話を発見して解決できました。

動いた!

Tweenerのリファクタについて · Issue #165 · phi-jp/phina.js · GitHub

結論から言うと、
clear()で前回のアニメーションをクリアするか、play()で明示的に実行するといいみたいです。

clear()

star.tweener.clear() // <= 前回のアニメーションをクリア
.to(/** 省略 **/)

play()

star.tweener
.to(/** 省略 **/)
.play() // <= 明示的に実行

Tweenerソースコードを追ってみたところplayingという変数でフラグ管理がされていました。

初期化でplaying = true
アニメーション終了時にplaying = falseになり、
その後playing == falseだと動かず、
clear()play()それぞれの中でplaying = trueに戻されて(?)いるよう。

動作させたい文脈に合わせて使い分けるのが好ましいと思われます。
今回は前回の動きに関係なく実行したいだけなので、play()を使うことにしました。

動くプレビュー

夜中に2時間くらい奮闘してたのでスッキリしました。
おしまい