Canvas のライブラリCreateJS を試してみる
Canvas のライブラリCreateJS を試してみる
Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。
公式サイト： www.createjs.com
CreateJS とは
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
Adobe が推しているCanvasのライブラリ。 Flashの代替として作ってるみたいです。
CreateJS というライブラリファイルがあるわけではなく、 「EaselJS」、「PreloadJS」、「TweenJS」、「SoundJS」の 4つのラブラリファイルから構成されている。
各CDN も提供されている。
まだ、正式版1.X系は出てないので、 仕様変更の可能性が大きいです。
EaselJS
EaselJS は、 Canvas で使用される要素を書きやすくしてくれるライブラリです。
チュートリアル
CDN で読み込む場合は、以下のコードで読み込める。
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
Canvas を Stage インスタンスで管理する。 以下のコードで生成する。
var stage = new createjs.Stage("canvas_id_name");
Canvasで描画する形、rect やarc は、 Shape インスタンスで扱えるようになっている。 オブジェクト志向のように扱える。
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
描画したいShape をStageに追加する。 しかし、追加するだけでは描画されない。
stage.addChild(circle);
update() で初めて描画される。
stage.update();
PreloadJS
PreloadJS は、Canvasで扱うような素材ファイルの読み込みに使う。 このライブラリで、あらかじめファイルを読んでおき、 後で描画することができる。
チュートリアル
ボタンを押すと、画像を読み込んで、body へ追加されるチュートリアルです。
CDN で読み込む場合は、以下のコードで読み込める。
<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
LoadQueue インスタンスを生成する。
ファイルが読み込まれると、fileloadイベントが発生し、 handleFileComplete関数が呼ばれる。
loadFile 関数で実際に、 ファイルの読み込みが始まる。
function loadImage() {
var preload = new createjs.LoadQueue(false);
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile("url.png");
}
画像が読み込まれると、 event.result はimgタグになる。 なので、body 要素にimgタグが追加されることになる。
function handleFileComplete(event) {
document.body.appendChild(event.result);
}
TweenJS
TweenJSは、アニメーションの設定をすることができる。
チュートリアル
CDN で読み込む場合は、以下のコードで読み込める。
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
インスタンスでなく、静的メソッドTween.get() でアニメーションの設定をする。
第1引数にアニメーションしたいShapeインスタンスを指定する。
第2引数にアニメーションの設定、loop で、 アニメーションの繰り返しを設定できる。
to() メソッドでアニメーションを追加できる。 メソッドチェーンのように書ける。
to() の第1引数に変化させるパラメータを指定。 第2引数にduration, 第3引数にアニメーションのeasingを指定。
createjs.Tween.get(circle, { loop: true })
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
setFPS() で、FPSを指定できる。
Stage にtick イベントを 追加することで、実際にアニメーションが実行される。
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
SoundJS
audioタグで扱えるような音データを扱うことができる。
