如果你想让你的网站或者应用增添些趣味，EaselJS将是你的不二选择。这是一款来自 Adobe 的 HTML5 动画和游戏库，可以创建交互式的游戏和图形动画，EaselJS是 HTML5 的 [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)，它使我们能够快速创建高质量、高性能的 web 图形。

EaselJS 基于 Canvas 实现，可以让我们更加方便的使用 JavaScript 创建 Canvas 动画，渲染性能也比起传统 DOM 渲染要快得多，为此我们只需了解 EaselJS API，就可以很容易的为我们的 html 项目添加交互性和动画效果。

现在，我们将一步步学习 EaselJS 的使用方法，我们将从以下几个方面来学习：

* 创建 EaselJS 的元素

* 设置 EaselJS 的元素属性

* 创建动画帧

* 动画效果的应用

## 1. 创建 EaselJS 的元素

要在 HTML 页面中使用 EaselJS，首先要确保已经引用了 EaselJS 库文件，如下：

```html

```

如上所示，在文档头部引入 EaselJS 库文件，同时在body中添加一个 canvas 标签。canvas 就是我们可以在上面绘制各种图形的画布，我们可以用 EaselJS API 来绘制图形。

然后我们需要初始化一个 Stage 实例，也就是舞台，这是所有 EaselJS 显示对象的容器。你可以把舞台想象成是一个画板，所有的图形对象都是在这个画板上展示的。

```javascript

var stage = new createjs.Stage("myCanvas");

```

有了舞台，我们来创建一些对象吧！在 EaselJS 中，有很多类型的对象，包括：容器、位图、矢量图和文本等等。我们将从最简单的对象开始：形状。

```javascript

var circle = new createjs.Shape();

circle.graphics.beginFill("#00ff00").drawCircle(0, 0, 50);

circle.x = 100;

circle.y = 100;

stage.addChild(circle);

stage.update();

```

上述代码，我们创建了一个形状对象 circle，并设置该对象的颜色为绿色，然后在舞台上添加了这个形状。我们发现该形状显示在了屏幕上，并且位置也是如我们所预期的。

## 2. 设置 EaselJS 的元素属性

亲爱的朋友们，我们可以设置许多对象属性。在 EaselJS 中，常用的属性有：x 和 y 坐标、宽度和高度、透明度、舞台大小和其他一些对象特定的属性，比如 graphics 等等。

对于形状对象，我们还可以使用它的 graphics 属性来进行复杂的绘制操作。比如我们画一个小人：

```javascript

var man = new createjs.Shape();

man.graphics.beginFill("#0000ff").drawCircle(50, 50, 30)

.moveTo(50,80).lineTo(50,140).moveTo(30,100).lineTo(70,100);

man.x = 300;

man.y = 300;

stage.addChild(man);

stage.update();

```

如上代码，形状对象是使用 graphics 属性以编程方式绘制出来的，我们创建了一个包含头部、手、腿、身体的小人形状，然后将该形状在舞台上居中显示。

## 3. 创建 EaselJS 动画

我们完成了元素的创建，下面，让我们看如何让它们动起来吧！EaselJS 提供了 [Ticker类](https://createjs.com/docs/easeljs/classes/Ticker.html)，该类派发 enterFrame 事件，并且自动更新 Stage 实例和所有其它与 Ticker 实例关联的对象，从而使我们能够创建动画。Ticker 实例默认情况下自动启动，使用者主动启动或停止它们。

```javascript

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

function handleTick(event) {

//这里就可以移动我们的对象

circle.x += 1;

circle.y += 1;

stage.update();

}

```

如上代码，我们调用了 `createjs.Ticker.addEventListener()`，并且监听事件 `tick`。这个事件每个位图渲染周期都会循环执行一次 \-\- 在每个渲染循环中更新每个对象的位置，然后重新绘制舞台。我们将上述代码放到创建舞台的代码块中，就可以看到形状对象 circle 在屏幕上移动了。

接下来，我们尝试同时移动小人和圆圈：

```javascript

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.framerate = 60;

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

function handleTick(event) {

var deltaS = event.delta / 1000;

circle.x += 50 * deltaS;

circle.y += 50 * deltaS;

man.x += 150 * deltaS;

man.y += 150 * deltaS;

stage.update(event);

}

```

如上代码，我们在 `handleTick` 函数中新增了两行代码，来使小人和圆圈沿着一定的路径运动。看看效果（yeap，好看）：


## 4. 动画效果的应用

现在我们已经了解了怎么使用 EaselJS 来创建形状对象，并添加动画效果了，但是这仅仅是一个开始。EaselJS 拥有强大的工具和组件，请查阅[官方文档](https://createjs.com/docs/easeljs/index.html)获取更多技巧和知识。

在这里，我们列举一些你可能想使用的功能：

- 事件侦听器

- 物理引擎

- 像素精灵表

- 补间缓动

- 淡入淡出效果

下面，让我们来看看如何使用缓动效果：

```javascript

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.framerate = 60;

var tween = createjs.Tween.get(man, {loop: true})

.to({x:stage.canvas.width - 75}, 1000, createjs.Ease.getPowInOut(4))

.to({y:stage.canvas.height - 75}, 1000, createjs.Ease.getPowInOut(4))

.to({x:75}, 1000, createjs.Ease.getPowInOut(4))

.to({y:75}, 1000, createjs.Ease.getPowInOut(4));

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

function handleTick(event) {

stage.update(event);

}

```

如上代码，使用 `Tween` 对象来创建缓动效果，通过 `loop` 属性设置循环播放。tween.to() 方法用于提供缓动效果的参数，可以控制具体的形状移动路径和时间等属性。最后使用 Ticker 来更新场景。

我们可以看到，小人重新在画布上出现，并按照我们定义的移动循环规则播放，非常出色。

至此，我们已经了解了 EaselJS 的基础知识，现在是时候将知识付诸实践了。EaselJS 非常易学易用，并且能够创建很多惊人的图形效果。开始动手吧！