createjs是一個輕量級的框架，稍微有點時間和耐心，就可以把全部源代碼都看一遍，畢竟只有三十幾個js文件。地址：http://www.createjs.com/
開發createjs的動畫或游戲，沒有重型的IDE或什么工具支持，我們只能從零開始寫js。一方面，這樣對於jser來說，足夠靈活；另外一方面，createjs因此足夠精簡足夠小。
createjs由幾個庫組成：
l easeljs，這個是核心，包括了顯示列表、事件機制；
l preloadjs，用於預加載圖片等；
l tweenjs，用於控制元件的緩動；
l soundjs，用於播放聲音。
easeljs 81k，preloadjs 31k，soundjs 34k，tweenjs 18k，對於手機小動畫或小游戲，其實只需要加載easeljs即可，因為核心庫已經涵蓋了簡單圖片的預加載功能。
開發步驟：
1、 下載類庫，可以使用源代碼，也可以使用壓縮過的min.js，就好像平時寫網頁一樣。
2、 建立html和canvas標簽，onload后再執行createjs相關邏輯。
3、 編寫createjs邏輯。這個非常簡單，因為createjs只提供了最簡單的基礎功能，我們理解了基礎功能后就可以疊積木了。
關於createjs，最關鍵是要理解類結構
上圖列出了createjs的主要類結構，所有舞台上的內容都是元件，元件的基類是DisplayObject。Container可以包含子元件，舞台Stage本身也是Container。另外Sprite用於表現SpriteSheet幀動畫人物、Bitmap用於展示純靜態的人物。
而Filter和Shadow則是濾鏡分支，可以針對任意元件實現顏色變換、模糊、陰影等效果。使用濾鏡的方式跟Flash一致，需要新建Filter實例，添加到目標元件的FilterList中，Createjs框架在下一幀就會把該元件加上濾鏡效果。
下邊以一個例子概要學習一下Createjs的使用：
<script type="text/javascript">
var stage;
function init() {
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
stage.autoClear = true;
//添加背景圖
var bg = new createjs.Bitmap("../res/bg.jpg");
stage.addChild(bg);
//增加5個小人，不斷做旋轉和放縮
for (var i = 0; i < 5; i++) {
var man = new createjs.Bitmap("../res/grossini.png");
man.regX = 42;
man.regY = 60;
man.x = canvas.width/6*(i+1);
man.y = canvas.height/5*4;
man.scaleX = man.scaleY = 1;
stage.addChild(man);
createjs.Tween.get(man, {loop: true}, true)
.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);
man.addEventListener("click", function(event) {
console.log("click", event.currentTarget);
}); //監聽點擊非常方便，位圖的透明區域忽略鼠標事件
}
var images = [];
for (var i = 1; i <= 14; i++) {
images.push("../res/grossini_dance_" + (i<10?("0"+i):i) + ".png");
}
//增加5個幀動畫小人，不斷播放14幀畫面
for (var j = 0; j < 5; j++) {
var sheet = new createjs.SpriteSheet({
images: images,
frames: {width: 85, height: 121, regX: 42, regY: 60}
}); //需要設置每幀的寬高，注冊點信息
var man = new createjs.Sprite(sheet);
man.framerate = 60/7;
man.x = canvas.width/6*(j+1);
man.y = canvas.height / 3;
man.play();
stage.addChild(man);
}
stage.update();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
}
//這里有點猥瑣，需要用戶自行控制舞台不斷update更新
function tick(event) {
stage.update(event);
}
</script>
