简介

createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示，其中根容器是stage对象，在创建了canvas画布后，首先要创建stage对象，就跟cocos里的根节点一样。

 <script src="libs/createjs.min.js"></script>

常用的画布和根容器stage初始化代码：

// 首先，创建canvas标签
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
document.body.appendChild(canvas);
// 然后创建stage对象,相当于根容器，所有效果均添加在stage上
var stage = new createjs.Stage(canvas.id);
stage.preventSelection = false;
stage.canvas.width = 720;
stage.canvas.height = 400;
stage.enableMouseOver(10);
// 设置动画帧频
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', stage);
// 兼容手机点击事件，参数根据需要调整
createjs.Touch.enable(stage, false, true);

1. EaselJs

EaselJs的功能主要是根据需要展示的内容创建不同的容器，容器里可以嵌套容器，然后容器中可以包含图片、文字等元素。下面介绍使用最频繁的几个功能。
（1）创建容器

var container = new createjs.Container();

（2）创建位图

var bitmap = new createjs.Bitmap('images/back.png');

（3）创建文本

var text = new createjs.Text('开始', "20px Microsoft YaHei,SimHei,黑体", "#000");

（4）使用雪碧图表中定义位图字形显示文本

// 这是一个+0123456789的图片字体的配置，animations代表雪碧图中每一个元素以及对应第几个frames，images代表图片位置，frames代表雪碧图中每一个元素在途中的[横坐标、纵坐标、宽度、高度]。
var obj = { 
    "animations": {
        "+": { "frames": [0] },
        "0": { "frames": [1] },
        "1": { "frames": [2] },
        "2": { "frames": [3] },
        "3": { "frames": [4] },
        "4": { "frames": [5] },
        "5": { "frames": [6] },
        "6": { "frames": [7] },
        "7": { "frames": [8] },
        "8": { "frames": [9] },
        "9": { "frames": [10] }
    },
    "images": [basePath + "/images/result/num.png"],
    "frames": [
        [0, 0, 48, 56],
        [40, 0, 48, 56],
        [80, 0, 48, 56],
        [120, 0, 48, 56],
        [160, 0, 48, 56],
        [0, 56, 48, 56],
        [40, 56, 48, 56],
        [80, 56, 48, 56],
        [120, 56, 48, 56],
        [160, 56, 48, 56],
        [0, 112, 48, 56],
    ]
};
var font_spriteSheet = new createjs.SpriteSheet(obj);
var bitmap_text = new createjs.BitmapText('+100', font_spriteSheet);

2. TweenJs

TweenJs的主要功能是通过改变图片的属性，从而创建动画效果。

// 首先，会对图片的属性有个初始化
var container = new createjs.Container();
stage.addChild(container); // 创建的容器必须添加到stage上才能显示，或者该容器的父容器（或再往上）添加到了stage上
var bitmap = new createjs.Bitmap('images/back.png');
bitmap.x = 0;  // 相对于容器的横坐标
bitmap.y = 0;  // 相对于容器的纵坐标
bitmap.scaleX = 1; // x方向的缩放比例
bitmap.scaleY = 1; // Y方向的缩放比例
bitmap.rotation = 0; // 旋转角度
bitmap.skewX = 0; // x方向上的倾斜
bitmap.skewY = 0; // y方向上的倾斜
bitmap.regX = 0; // 图片x方向的中心点，也就是计算位置、旋转时的参考点
bitmap.regY = 0; // 图片y方向的中心点，也就是计算位置、旋转时的参考点
// 也可以直接用一句话设置这些属性
bitmap.setTransform(0, 0, 1, 1, 0, 0, 0, 0, 0); 
// setTransform ( [x=0]  [y=0]  [scaleX=1]  [scaleY=1]  [rotation=0]  [skewX=0]  [skewY=0]  [regX=0]  [regY=0] )
conatainer.addChild(bitmap); // 图片只有添加到容器中或者stage才能显示

// 图片属性初始化或者只是采用默认值后，通过修改属性创建动画
createjs.Tween.get(bitmap) // 首先获得图片元素
  .to({ x:100,y:100}, 1000) // 使用1000ms的时间将图片位置移动到（100，100）
  .to({scaleX:0.5, scaleY:0.5},2000) // 使用2000ms的时间将图片缩小为一半
  .wait(1000) // 等待1s
  .to({rotation:90},1000) // 然后图片用1s的时间旋转90度
  .call(function(){  });  // 执行完动画触发函数

3. PreloadJs

PreloadJs用于预加载资源和进度条的展示。

var queue = new createjs.LoadQueue(true); // 通过true，false选择预加载
  // 一定要将其设置为 true, 否则并发不起作用。  
queue.maintainScriptOrder = true;
// 设置并发数  
queue.setMaxConnections(4);

queue.installPlugin(createjs.Sound); // 如果需要预加载声音，需要加这句

queue.on("progress", handleProgress, this); 
queue.on("fileload", handleFileload, this);
queue.on("complete", handleComplete, this);
queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"}); //加载单个文件使用
queue.loadManifest([
    {id: "myImage", src:"path/to/myImage.jpg"},
    {id: "myImage1", src:"path/to/myImage1.jpg"},
    ..
]); // 加载许多文件使用
function handleComplete() {
    createjs.Sound.play("sound");
    var image = queue.getResult("myImage");
    document.body.appendChild(image);
}

queue.load();

4. SoundJs

SoundJs添加声音。不过兼容性上有些问题需要注意处理。
具体使用参考：http://www.createjs.cc/src/docs/soundjs/classes/AbstractSoundInstance.html

var myInstance = createjs.Sound.play("myAssetPath/mySrcFile.mp3", {loop:2});
myInstance.on("loop", handleLoop);
function handleLoop(event) {
    myInstance.volume = myInstance.volume * 0.5;
}