createjs 使用方法简介

简介

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