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

createjs 使用方法简介相关推荐

【机器学习入门到精通系列】蒙特卡罗方法简介和代码演示
文章目录 1 蒙特卡罗方法简介 2 求圆周率pi的近似值 3 求定积分的近似值 1 蒙特卡罗方法简介蒙特卡罗(Monte Carlo)方法:简单来说,蒙特卡洛的基本原理简单描述是先大量模拟,然后计算 ...
【Groovy】编译时元编程 ( ASTTransformation#visit 方法简介 | org.codehaus.groovy.ast.ModuleNode 脚本节点 )
文章目录一.ASTTransformation#visit 方法简介二.org.codehaus.groovy.ast.ModuleNode 脚本节点一.ASTTransformation#vi ...
【Android 异步操作】AsyncTask 异步任务 ( 参数简介 | 方法简介 | 使用方法 | AsyncTask 源码分析 )
文章目录一.AsyncTask 参数简介二.AsyncTask 方法简介三.AsyncTask 基本用法四.AsyncTask 构造函数源码解析五.AsyncTask 构造函数相关源码注释 ...
UA PHYS515A 电磁理论III 静磁学问题2 标量势方法与向量势方法简介
UA PHYS515A 电磁理论III 静磁学问题2 标量势方法与向量势方法简介标量势方法向量势方法 Hard Ferromagnets 标量势方法当空间中不存在电流密度时(J⃗=0\vec J ...
微信门店小程序怎样创建门店小程序创建方法简介
微信门店小程序怎样创建门店小程序创建方法简介微信门店小程序是什么东西?门店小程序要怎样创建?还不清楚微信门店小程序详情的小伙伴们抓紧时间跟上小编一起来看一下吧! 门店小程序是什么? 微信发 ...
ML之相似度计算：图像数据、字符串数据等计算相似度常用的十种方法简介、代码实现
ML之相似度计算:图像数据.字符串数据等计算相似度常用的十种方法简介.代码实现目录相似度 1.余弦相似性-夹角余弦(Cosine_Distance)距离 2.代码实现-余弦距离.余弦相似度 2.皮 ...
Redis Cluster搭建方法简介22211111
Redis Cluster搭建方法简介 (2013-05-29 17:08:57) 转载▼ Redis Cluster即Redis的分布式版本,将是Redis继支持Lua脚本之后的又一重磅功能,官方声 ...
html5 filereader读取文件,H5的FileReader分布读取文件应该如何使用以及其方法简介...
这次给大家带来H5的FileReader分布读取文件应该如何使用以及其方法简介,H5的FileReader分布读取文件的使用以及其方法简介的注意事项有哪些,下面就是实战案例,一起来看一下. 先介绍一下 ...
TabBarController创建及使用方法简介
TabBarController创建及使用方法简介大致讲解一下TabBarController的创建过程: 首先,我们需要一些视图,如创建UIControllerView类型的view1,view2 ...