CreateJs-EaselJS精灵Sprite类和简明动画

一、EaselJS中Sprite类

EaselJS精灵Sprite类是用spritesheet实例显示一个帧或帧序列(即动画)。精灵片是一系列的图像(通常是动画帧)合并成一个单一的图像。例如，一个动画由8个100x100图像可以组合成一个400X200精灵表。

sprite结构：

Sprite ( spriteSheet  frameOrAnimation )

参数:

spritesheet，这包括源图像，帧的尺寸，和帧数据。

[frameOrAnimation] String | Number optional

最初播放的帧数或动画。

实例：

// 实例化  createjs.Sprite类，传入精灵spriteSheet参数

var instance = new createjs.Sprite(spriteSheet);

// 使用gotoAndPlay和gotoAndStop方法开启和结束动画

instance.gotoAndPlay("frameName");

instance.gotoAndStop("frameName");

重点：gotoAndPlay()和gotoAndStop()这两个方法很重要，就是唤起和结束精灵帧动画的方法。

二、EaselJS中Ticker类动画机制

EaselJS简明教程动画，动画是将静止的画面变为动态的艺术，由静止到动态的实现，主要依靠人眼的视觉残留效应。

通常来说动画分为两种：逐帧动画和补间动画

1.逐帧动画

逐帧动画把动画(例如人物动作)进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。

实现逐帧动画主要需要两个东西，动作关键帧和动起来的机制。

关键帧：

var data = {

images: ["images/runningGrant.png"],

frames: {width:50, height:50},

animations: {run:[0,4], jump:[5,8,"run"]}

};

var spriteSheet = new createjs.SpriteSheet(data);

var animation = new createjs.Sprite(spriteSheet, "run");

“动画”机制：

使动画动起来的机制，这里使用EaselJS的另一个类Ticker。Ticker的使用貌似下面代码

createjs.Ticker.addEventListener("tick", tick);

function tick(evt) {

//some code

}

Ticker的几个关键方法，setFPS、getFPS设置和获取帧频，setInterval、getInterval设置和获取时间间隔，setPaused、getPaused设置和获取暂停等，这些都是静态方法。

逐帧小demo：

扫码欣赏：

2.补间动画

补间动画，指我们给定动作的初始状态和结束状态，然后动画系统(例如动画软件)自动补齐中间状态，从而形成动画，补间动画适用于物体的移动、状态的改变等简单的动画。

三、实例代码

下面就让我们来做一个完整的实例吧!

创建Sprite类，传入精灵spriteSheet参数

逐帧动画，奔跑的小人

补间动画，让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起

再加上控制小人是否运动的按钮

html结构：

您的浏览器不支持canvas，请使用现代浏览器。

CSS样式：

#canvas{background: #ffffff;}

#btn{width: 80px;height: 40px; margin-left: 440px;position: absolute;bottom: 5%;left: 50%;margin-left: -40px; border: none; border-radius: 5px;background: #ccc;}

JS：

引入easeljs文件

注意：为了保证更好的运行速度，请使用EaselJS 0.7.0及以上的版本。

var w = document.documentElement.clientWidth,

h = document.documentElement.clientHeight;

var  stage=new createjs.Stage("canvas"),

container=new createjs.Container(),

// 定义SpriteSheet 参数

data={

/*定义动画*/

"animations":{

// start, end, next, speed

"run": [0, 25, "run",1.5],

//start,end,next,speed开始帧，结束帧，下一个动作，运行速度

"jump": [26, 63, "run",1.5]

},

/*定义图像路径,使用图像或图像的url列表*/

"images": ["images/runningGrant.png"],

/*定义框架:

简单的方法来定义框架,只需要连续帧大小(框架的大小就是单个帧的图片大小)*/

"frames":{

//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小

"height": 292.5,

"width":165.75,

//相对于原始偏移的位置

"regX": 0,

"regY": 0,

//帧数

"count": 64

}

};

//适配用

stage.canvas.width = w;;

stage.canvas.height = h;

//实例精灵动画集

var move = new createjs.SpriteSheet(data);

//SpriteSheet类设置帧和动画,里面的run为开始的动画

var grant = new createjs.Sprite(move,"run");

//设置在舞台中的位置

grant.x=20;

grant.y=120;

// 把动画放到舞台上，创建一个间隔事件侦听，进行动画

container.addChild(grant);

stage.addChild(container);

createjs.Ticker.setFPS(20);

createjs.Ticker.addEventListener("tick",tick);

//speed用来做加速度

var speed=1;

function tick(){

if(!createjs.Ticker.getPaused()){

grant.x+=3*speed;

stage.update(); //更新舞台

speed+=.01;

(grant.x>stage.canvas.width) && (grant.x=0,speed=1)

}

}

//侦听鼠标事件

stage.addEventListener("stagemousedown",handleClick);

function handleClick(){

grant.gotoAndPlay("jump");

}

//设置按钮暂停

var btn=document.getElementById("btn");

btn.addEventListener("click",togglePause);

function togglePause(){

//grant.gotoAndStop();

//其实实现暂停和运动就是false和true切换

var paused = !createjs.Ticker.getPaused();

createjs.Ticker.setPaused(paused);

btn.value = paused ? "运动play" : "暂停pause";

}

stage.update(); //更新舞台

DEMO演示：