createjs新⼿教程-前端向（⼀）
canvas动画作者 ajex ：www.ajexoop/wordpress/2016/11
⾸先先从HTML⽂件开始，新建⼀个HTML⽂件，css⽅⾯就不多说了，前端童鞋都⽤。createjs-2015.11.26.min.js是createjs⼤部分类库的⼀个集合，⼤家也可以放在⾃⼰的服务器上，就像我注释⾥那样，main.js是我们主要写逻辑的js⽂件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createjs新⼿教程</title>
</head>
<body onload="init();" >
<canvas id="mainView" width="1920" height="1000" ></canvas>
<script src="atejs/createjs-2015.11.26.min.js"></script>
<!--可以下载下来放在⾃⼰的服务器-->
<!--<script src="static.m3guo/video/v1/createjs/createjs/createjs-min.js"></script>-->
<script src="main.js"></script>
</body>
</html>
main.js
//main.js
var canvas,stage,container,images = {},sprite
function init() {
canvas = ElementById("mainView");
stage = new createjs.Stage(canvas);//获取舞台
container = new createjs.Container();//新建容器
stage.addChild(container);//将容器放在舞台上
able(stage);//使移动端⽀持createjs的⿏标事件
var loader = new createjs.LoadQueue(false);//这⾥⼀共可以是3个参数第⼀个是是否⽤XHR模式加载第⼆个是基础路径第三个是跨域
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("progress",progressHandler);
loader.addEventListener("complete",completeHandler);
loader.loadManifest([
{src:"images/back.jpg", id:"back"},
{src:"images/sprite.png", id:"sprite"}
]);
//Ticker是⼀种计时类(触发⼀种动画类型)，相对于tween
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stageBreakHandler);
}
function handleFileLoad(evt) {
if (pe == "image") { images[evt.item.id] = sult; }
//这是单个⽂件加载完成的事件，把它保存到⼀个地⽅之后可以直接拿来创建对象
}
function progressHandler(event)
{
//这⾥可以写加载进度 event.progress
}
function completeHandler(event)
{
//全部加载完成
veEventListener("fileload",handleFileLoad);
veEventListener("progress",progressHandler);
veEventListener("complete",completeHandler);
var bitmap = new createjs.Bitmap(images.back);
container.addChild(bitmap);
bitmap.addEventListener("click",clickHandler)
var spriteData = {
images: [images.sprite],
frames: {width:80, height:80, regX: 40, regY:40},
//animations：可以理解为动画要做哪⼏个动作，这⾥写了站⽴和⾛2个动作stand，walk。其中动作可以传2种参数，数组或者对象
animations: {
stand:[0,3,"stand",0.2],
walk:{
frames: [4,5,6,7,6,5],
next: "walk",
speed: 0.2
}
}
};
//把object数据放进spriteSheet，把spritesheet放进sprite，sprite放进我们的显⽰容器，动画就可以显⽰了
var spriteSheet = new createjs.SpriteSheet(spriteData);
sprite = new createjs.Sprite(spriteSheet,"stand");
container.addChild(sprite);
sprite.x = 100;
sprite.y = 100;
}
function clickHandler(event)
{
veTweens(sprite);
if(event.rawX > sprite.x)
{ //CCSprite类是cocos2D的概念，⽐如等于2就放⼤两倍，-1就转⽅向
sprite.scaleX = 1;
}
else if(event.rawX < sprite.x)
{
sprite.scaleX = -1;//为-1的时候可以转⽅向
}
(sprite).to({x:event.rawX,y:event.rawY},1000).call(tweenCompleteHandler);
}
function tweenCompleteHandler()
{
//AndPlay
先看下效果：这是⼀个简单的点击⾏⾛动画。
代码中都加了注释哈，这⾥解释下⽤到的类。
Stage是我们的舞台类，可以理解为所有canvas内部对象的总容器或者说是根显⽰对象。
Container是⼀个容器类，类似于Div，可以把⼀些显⽰对象全部放进去统⼀操作（直接操作舞台会有很多预料之外的问题，所以如果你要操作所有显⽰对象，建议创建⼀个根容器，然后操作这个根容器）
LoadQueue是⼀个预加载类，可以把需要加载的资源提前加载，基本⽀持⼤多数的⽂件预加载。我这⾥主要处理了它的3个事
件，fileload，progress，complete。其中在handleFileLoad中我为什么要把所有资源全部预先放在⼀个地⽅呢？因为我新建Bitmap和Sprite 时虽然直接传路径也可以，但是如果传的是对象，⽐如new createjs.Bitmap(images.back)；这样可以减少⼀个创建对象的过程，可以略微的减少性能消耗（当然前提要是这个资源已经预加载了，不然就报错了），这点本⼈之前写项⽬的时候也忽略了，直到分析了源代码。progressHandler如注释所写，是⽤来显⽰加载进度的，不过要注意的是显⽰加载进度的素材本⾝也要被预加载，也就是说你要⾃⼰做好看点的进度条你要做2个预加载，先预加载进度条资源，再加载项⽬资源。completeHandler就是你资源全部加载完了，开始跑程序了，注意完了以后把所有侦听拿掉。
Ticker是⼀个计时类，不过他是每过⼀帧触发⼀次的，也就是说跟时间其实没关系（因为帧频是会波动的）。createjs.Ticker.setFPS(30)；和createjs.Ticker.addEventListener("tick", stageBreakHandler)；是必须要加的，stageBreakHandler⾥⾯放的是刷新舞台的⽅法，因为createjs 需要不停的刷新舞台来刷新动画，也就是⼀个重绘的过程。平时也可以拿Ticker类做动画。
Bitmap是⼀个位图类，把路径或者预加载完成的对象放进去，然后把对象放在舞台就可以显⽰了，我
这边是放在了container，但是因为container是放在了舞台，所以也能显⽰，这就是⼀个容器嵌套关系，应该不难理解把。
Sprite是⼀个精灵图类，就是显⽰⼀个序列帧动画的类，这边我的素材是这样的：
这表⽰站⽴和⾏⾛2个动作。由SpriteSheet来编码这些动作，SpriteSheet类相当于Sprite类的数据类，⽽SpriteSheet⼜需要⼀个Object数据。我先讲下数据格式images：就是图⽚资源，可以放加载完的对象，也可以直接放路径，可以放多个图⽚，图⽚的顺序关系到序列帧号。frames：可以传进去的参数很多，我着重介绍width，height regX regY。width 和 height就是你以多少⼤⼩来切割图⽚，regX regY就是注册点，放⼤缩⼩的时候以哪个点来放⼤。animations：可以理解为动画要做哪⼏个动作，我这⾥写了站⽴和⾛2个动作stand，walk。其中动作可以传2种参数，如果传数组，第⼀个表⽰起始帧，第⼆个表⽰结束帧，第三个表⽰结束后播放哪个动作，第四个表⽰播放速度。如果传对象，frames表⽰播放帧的顺序，next表⽰结束后的动作，speed表⽰播放速度，⼤家可以看到传object对控制帧更加灵活，但是当起始帧和末尾帧相距⽐较远时可以⽤数组。然后把object数据放进spriteSheet，把spritesheet放进sprite，sprite放进我们的显⽰容器，动画就可以显⽰了，new Sprite时
可以指定默认动画动作。显⽰对象的 x y 表⽰对象在容器中的坐标，相当于left top，所有显⽰对象都有x y。关于
sprite可讲的还有很多，有兴趣的⼤家可以看下下⾯2篇博⽂，介绍的更加详细：
Tween类是⼀个缓动类，负责缓动，⽤tween做动画和ticker的不同之处在于tween是根据时间的，ticker是根据帧频的，也就是tween的优点在于就算卡了在规定时间内也还是能运⾏完毕的，并且tween是缓动的，也就是可以慢慢加速，慢慢减速。除了像我demo⼀样缓动坐标，当然他也可以缓动别的东西，⽐如alpha值，⼤⼩，甚⾄是滤镜参数。
期待下篇。。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论