CreateJs教程6章：easeljs中的精灵动画
EaselJS实现精灵动画
网页中经常会看到一些动画，如一个小人在奔跑，如下图:
图中的小人就是精灵动画，它是由一张一张图片连续播放而形成的，不是直接在网页中放的一张gif哦。
本章将讲解如何实现这个效果，我们使用了EaselJS的SpriteSheet类
本课的代码如下，我们先列出代码，然后对主要的代码进行讲解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS: Simple SpriteSheet Example</title>
<link href="../_easel-assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_easel-assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_easel-assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.js"></script>
<script id="editable">
var stage;
function init() {
// create a new stage and point it at our canvas:
stage = new createjs.Stage(document.getElementById("testCanvas"));
// Define a spritesheet. Note that this data was exported by Zoë.
var spriteSheet = new createjs.SpriteSheet({
framerate: 30,
"images": ["../_easel-assets/art/spritesheet_grant.png"],
"frames": {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165},
// define two animations, run (loops, 1.5x speed) and jump (returns to run):
"animations": {
"run": [0, 25, "run", 1.5],
"jump": [26, 63, "run"]
}
});
// Events from SpriteSheet (not required for the demo)
spriteSheet.on("complete", function(event) {
console.log("Complete", event);
});
spriteSheet.on("error", function(event) {
console.log("Error", event);
});
var grant = new createjs.Sprite(spriteSheet, "run");
grant.x = stage.canvas.width / 2;
grant.y = 22;
// Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
stage.addChild(grant);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>EaselJS精灵动画 demos</h1>
<p>使用<code>SpriteSheet</code>定义精灵动画的一个例子.</p>
</header>
<div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
代码中的中的init初始化函数，创建stage舞台，我们都学过，这里主要讲 雪碧对象SpriteSheet部分
雪碧对象SpriteSheet
SpriteSheet是雪碧对象，createjs.SpriteSheet用于创建雪碧对象，其构造函数如下：
SpriteSheet ( data )
- data : 一个雪碧数据的对象，这个对象比较复杂
这里有一个新概念，雪碧对象，或者精灵表对象
什么是雪碧对象（精灵表对象）
sprite是雪碧图，雪碧图就是将很多很多的小图片放在一张图片上。这样做的目的是，浏览器只需要下载一次图片，就能够得到多个图片内容，如下：
SpriteSheet构造函数的参数对象data
传递给SpriteSheet构造函数的data参数需要包含如下内容，才能构造一个雪碧对象：
- images:需要包含源图像或要使用的图像。
- frames:需要包含各个图像帧的位置。
- animations:形成命名动画的帧序列。可选参数的。
- framerate:播放帧率。可选参数
这个对象示例为：
{ framerate: 30, "images": ["../_easel-assets/art/spritesheet_grant.png"], "frames": {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165}, "animations": { "run": [0, 25, "run", 1.5], "jump": [26, 63, "run"] } }
接下来，我们对这几个值详细解释，知识需要慢慢品，像红酒一样，不要着急哦。
SpriteSheet中的images属性
images是一个数组，images中的元素可以是一个url地址，也可以是一个图像对象。这个参数是必须要有的：
images: [image1, "path/to/image2.png"],
- image1是一个图像对象
- path/to/image2.png是一个图像相对的路径
SpriteSheet中的frames
我们本例的小人动画是由一张一张的静态图片拼接成动态小人的。一个动画由若干帧组成。一个frames的定义如下:
frames: {
width: 165,
height: 292,
count: 64,
regX: 82,
regY: 0,
spacing: 0,
margin: 0
}
frames的这几个属性的含义分别是：
- width＆height为必填项，表示每一帧的宽度和高度
- regX＆regY 表示每一帧的“原点”坐标
- spacing 表示帧之间的间隔大小
- margin 表示图像周围的边距
- count允许您指定子画面中的帧总数；如果省略，将根据源图像和帧的尺寸进行计算。将根据帧在源图像中的位置（从左到右，从上到下）为帧分配索引。
每一个参数的含义用图来表示如下：
SpriteSheet中的animations属性
定义一个或多个动画包含的帧及每帧之间的时间间隔。下面的代码定义了2个动画。
"animations": {
"run": [0, 25, "run", 1.5],
"jump": [26, 63, "run"]
}
animations中包含了2个动画，一个动画是跑（run），一个动画是跳（jump）。
- run: 第0到25帧表示奔跑
- jump：第26到63帧表示跳动
帧数或帧率framerate
每秒钟播放Spritesheet动画的帧数，如每秒20帧，那么设置为framerate: 20。
帧就是视频或者动画中的每一张画面；帧数就帧的数量，即静止画面的数量；帧率是用于测量显示帧数的量度，单位是“每秒显示帧数”；
帧率(Frame rate) = 帧数(Frames)/时间(Time)，单位为帧每秒(f/s, frames per second, fps)
帧率是用于测量显示帧数的量度，测量单位为“每秒显示帧数”（ Frame per Second， FPS）或“赫兹”（ Hz），一般来说 FPS 用于描述视频、电子绘图或游戏每秒播放多少幀。
spriteSheet对象的主要事件
spriteSheet对象会从远程服务器下载资源图片，所以他会有一些关于下载的事件，spriteSheet的on方法，表示监听事件，on方法的原型为：
complete事件
当精灵图片都加载完成后，会触发complete事件，示例代码如下：
spriteSheet.on("complete", function(event) {
console.log("Complete", event);
});
error错误事件
当图像遇到错误时调度。SpriteSheet将为遇到错误的每个图像调度一个错误事件，并且 即使所有图像都已处理完毕，一旦所有图像完成处理后，SpriteSheet仍将调度一个完整事件。
spriteSheet.on("error", function(event) {
console.log("Error", event);
});
createjs.Sprite函数创建精灵对象
createjs.Sprite函数通过精灵表（spriteSheet）来创建一个精灵对象，createjs.Sprite函数的原型是：
Sprite ( spriteSheet [frameOrAnimation] )
- spriteSheet: 表示精灵表，通过精灵表对象创建精灵动画Sprite
- [frameOrAnimation] 是字串|编号类型，可选参数，表示最初播放的帧号或动画名字。
了解了这个函数，我们来创建一个精灵grant，代码如下：
var grant = new createjs.Sprite(spriteSheet, "run"); grant.x = stage.canvas.width / 2; grant.y = 22; stage.addChild(grant);
- 首先创建了grant对象
- 然后通过设置grant的x和y坐标，把这个精灵放在的舞台的中间位置
- stage.addChild(grant)表示把grant对象加入到舞台，这样就能显示在舞台上了。
举个例子网技术交流总群(581912254)
