簡単にアニメーション処理を行えるライブラリ「TweenJS」

こちらのライブラリは以前紹介したEaselJSと一緒に使います。

gskinner/TweenJS - GitHub
https://github.com/gskinner/TweenJS/tree/

読み込みはこの様にeasel.js、Tween.jsの順番で行います。

	<script type="text/javascript" src="easel.js"></script>
	<script type="text/javascript" src="Tween.js"></script>

前回のEaselJSと同様のアニメーションを行う場合この様な記述になります。

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);

	Tween.get(circle)
		.to({scaleX:0.1}, 2000)
		.to({scaleX:1}, 2000)
		.loop();

  Ticker.setFPS(30);
  Ticker.addListener(stage);
}
window.addEventListener('load', init, false);

実際に動いているものはこちらで確認出来ます。