前回に引き続き EaselJS を使って今度は Tween を使わないアニメーションをつくってみたいと思います。

まずは簡単なアニメーションから始めてみたいと思います。

一定時間ごとに rotation の値を変えて回転しているようなアニメーション

衝突判定などをするとコードの量が増えてしまうので、まずはロジックが分かりやすいようオブジェクトが回転するだけのアニメーションをつくってみます。

アニメーションを行うための準備

var stage = new createjs.Stage("elementId"); var tack = function() { stage.update(); }; createjs.Ticker.setFPS(33); createjs.Ticker.addEventListener("tick", tack);

アニメーションの基本は以上です。

createjs.Ticker の tick イベントが 33ミリ秒毎に実行されるようにし、その都度 tack という関数が実行されるようにしています。現在 tack 関数は stage.update() でステージを再描画するだけなのでなにも描画されませんが、tack 関数の中に矩形を描画するなどの処理を追加するとステージが再描画されるごとに矩形が描画されます。

オブジェクトを回転させてみる

これは単に rotation プロパティを変更していけばいいのですが、ひとつ問題があります。それは回転軸の問題です。なにはともあれ回してみます。赤い点は回転軸になります。

var stage = new createjs.Stage("elementId"), rect = new createjs.Shape(), r = 0; var tack = function() { r += 1; rect.set({ rotation: r }); stage.update(); }; createjs.Ticker.setFPS(33); createjs.Ticker.addEventListener("tick", tack);

けれどこれは意図した回転とは違います。回転はオブジェクトを中心として欲しいのです。

基準点の変更

Canvas の回転軸はデフォルトでは左上にあります。描画するときにもデフォルトでは左上を基準点にした座標をセットして描画します。このためオブジェクトを中心とした回転にはその位置まで基準点を一時的に移動する必要があります。

ここでは回すことだけが目的なのでシンプルな方法で解決してみます。

var stage = new createjs.Stage("elementId"), rect = new createjs.Shape(); stage.setTransform(30, 30);//矩形を描画したい位置までステージの基準点を移動 rect.regX = 20;//矩形の基準点を矩形の中心に移動 rect.regY = 20;//矩形の基準点を矩形の中心に移動

もしもこのあとに別のオブジェクトを描画させたい場合には、ステージの基準点をもとに戻しておく必要があります。