デモ
円が移動して、大きさが変わります。
CreateJSの基本的な使い方
こちらを参考にしました。
・参考
EaselJS v1.0.0 API Documentation : EaselJS
CreateJSを使ってみよー | アシアルブログ
CreateJSでスマートフォン向けサイトのアニメーションを実装するときに気をつけるポイント - Qiita
ステージを作成
//ステージ生成 stage = new cj.Stage("world"); stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight;
まずステージと呼ばれる描画する場所を定義します。
円を作成
//円を生成 circle = new cj.Shape(); circle.graphics.beginFill("#ccc").drawCircle(0,0,50); //中央に配置 circle.x = stage.canvas.width / 2; circle.y = stage.canvas.height / 2;
シェイプを呼び出して、円を定義します。
ステージに追加
//ステージに追加 stage.addChild(circle); //ステージ更新 stage.update();
最後にステージに追加して、更新を行います。
これで円を描画することができました。
自動更新してアニメーションさせる
Tickで自動更新
cj.Ticker.addEventListener("tick",handleTick); //自動更新 function handleTick(){ //move circle.x += 10; //拡大 circle.scaleX *= 1.03; circle.scaleY *= 1.03; if(circle.x > stage.canvas.width){ circle.x = 0; circle.scaleX = 1; circle.scaleY = 1; } stage.update(); }
tickを使えば、CanvasでよくあるsetTimeoutでループする処理を書かなくて済みます。setTimeoutとの違いはFPSを定義できるところみたいです。