EaselJS: A Javascript Library for Working with the HTML5 Canvas Element.
http://easeljs.com/
Flash界の凄い人が作ったそうです。
fladdict » GSkinnerの作ったJavaScriptライブラリが素敵すぎる件
http://fladdict.net/blog/2010/12/gskinner.html
この様な記述で使えます。ここでは円(Shape)を作成してその横幅を拡大、縮小するアニメーションを行っています。
var stage; var circle; var addScale = 0.01; function init() { var canvas = document.getElementById("canvas"); stage = new Stage(canvas); circle = new Shape(); circle.graphics.beginFill("#0000FF").drawCircle(0, 0, 100); circle.x = 235; circle.y = 235; stage.addChild(circle); stage.tick = function() { if (circle.scaleX > 1.5 || circle.scaleX < 0.1) { addScale = -addScale; } circle.scaleX += addScale; this.update(); // 再描画 }; Ticker.setFPS(30); Ticker.addListener(stage); } window.addEventListener('load', init, false);
実際に動いているものはこちらで確認出来ます。
Ticker.setFPS(30); でFPSを設定し、すると Ticker.addListener() したオブジェクト(ここでは stage )の tick メソッドが指定したFPSで呼ばれます。
オープンソースだと「リファレンス?ソース見ろ!!」という感じのプロジェクトも多いですがEaselJSはしっかりしたリファレンスページが有ります。素晴らしい!!
API: (YUI Library)
http://easeljs.com/docs/
なお、ここではアニメーション処理を tick メソッド内の記述で行っていますが現在はTweenJSという簡単にアニメーションを行うライブラリが出来てるみたいです。
アニメーション処理を行いたい場合はEaselJSと一緒にTweenJSを使用するのが簡単です。