createjs新手教程-前端向（一）

作者 ajex ：http://www.ajexoop.com/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();"  style="margin: 0px">
    <canvas id="mainView" width="1920" height="1000"  style="position:absolute;"></canvas>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <!--可以下载下来放在自己的服务器-->
    <!--<script src="http://static.m3guo.com/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 = document.getElementById("mainView");
    stage = new createjs.Stage(canvas);//获取舞台
    container = new createjs.Container();//新建容器
    stage.addChild(container);//将容器放在舞台上
    createjs.Touch.enable(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 (evt.item.type == "image") { images[evt.item.id] = evt.result; }
    //这是单个文件加载完成的事件，把它保存到一个地方之后可以直接拿来创建对象
}
function progressHandler(event)
{
    //这里可以写加载进度 event.progress
}
function completeHandler(event)
{
    //全部加载完成
    event.currentTarget.removeEventListener("fileload",handleFileLoad);
    event.currentTarget.removeEventListener("progress",progressHandler);
    event.currentTarget.removeEventListener("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)
{
    createjs.Tween.removeTweens(sprite);
    if(event.rawX > sprite.x)
    {　　//CCSprite类是cocos2D的概念，比如等于2就放大两倍，-1就转方向
        sprite.scaleX = 1;
    }
    else if(event.rawX < sprite.x)
    {
        sprite.scaleX = -1;//为-1的时候可以转方向
    }
    createjs.Tween.get(sprite).to({x:event.rawX,y:event.rawY},1000).call(tweenCompleteHandler);
    sprite.gotoAndPlay("walk");
}
function tweenCompleteHandler()
{　　

//sprite.gotoAndPlay

sprite.gotoAndPlay("stand"); } function stageBreakHandler(event) { stage.update(); }

先看下效果：http://www.ajexoop.com/test/test10/index.html 这是一个简单的点击行走动画。

代码中都加了注释哈，这里解释下用到的类。

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篇博文，介绍的更加详细：

createjs进阶—sprite精灵图的使用(一)

createjs进阶—sprite精灵图的使用（二）

Tween类是一个缓动类，负责缓动，用tween做动画和ticker的不同之处在于tween是根据时间的，ticker是根据帧频的，也就是tween的优点在于就算卡了在规定时间内也还是能运行完毕的，并且tween是缓动的，也就是可以慢慢加速，慢慢减速。除了像我demo一样缓动坐标，当然他也可以缓动别的东西，比如alpha值，大小，甚至是滤镜参数。

期待下篇。。

posted on 2016-11-23 10:26 meeming 阅读(1796) 评论(0) 收藏举报

刷新页面返回顶部

createjs新手教程-前端向（一）

公告