EaselJS是一个用于创建交互式HTML5动画和游戏的优秀工具。它不仅让开发者能够更加轻松地构建动画和游戏，而且还提供了丰富的API库和强大的渲染引擎，使得开发者可以更加灵活有效地控制和定制。今天，我们来探讨一下如何使用EaselJS轻松构建出交互式动画和游戏。

一、什么是EaselJS

EaselJS是CreateJS套件中的一个模块，它是一个JavaScript库，专门用于创建HTML5画布上的交互式图形和动画。EaselJS完全兼容HTML5 Canvas API，提供更简单，更直观和更有效的方法来处理图形渲染、交互性和动画。

EaselJS提供了一些有用的类和方法，包括Shape、Bitmap、Container、Tween等等，这些类可以让开发者轻松编写交互式图形和动画。此外，EaselJS还提供了一些事件处理函数，例如tick事件、mousedown事件、pressmove事件等，这些事件可以让开发者轻松实现交互并控制动画。

二、EaselJS的特点

1、HTML5 Canvas API的简化

其中一个EaselJS的重要特点就是简化了HTML5 Canvas API。简化的HTML5 Canvas API让开发者更加容易地创建图形、渲染文本、控制交互等等。例如，使用EaselJS，我们可以通过下面的代码轻松地在画布上显示一段文本：

var text = new createjs.Text(“Hello World!”, “20px Arial”, “#000”);

text.x = 100;

text.y = 100;

stage.addChild(text);

stage.update();

2、容器和嵌套对象支持

另一个EaselJS的特点是容器和嵌套对象的支持。这使得开发者能够创建复杂的组合形状和逻辑，而不必考虑如何逐个处理每个对象。容器可以包含多个对象，并且可以像单个对象一样移动、旋转或缩放。例如，以下代码使用容器创建一个复杂的对象：

var container = new createjs.Container();

var circle = new createjs.Shape();

circle.graphics.beginFill(“#ff0000”).drawCircle(0, 0, 50);

var text = new createjs.Text(“Hello World!”, “20px Arial”, “#000”);

text.x = -25;

text.y = -25;

container.addChild(circle, text);

container.x = 100;

container.y = 100;

stage.addChild(container);

stage.update();

3、动画和缓动

EaselJS包含TweenJS库，这使它更容易创建和渲染相对复杂的动画。TweenJS库提供了一组强大的功能，包括缓动和一些有用的Tween管理器。通过TweenJS，开发者可以很容易地对对象进行动画、旋转、缩放和移动等操作。

例如，以下代码使用TweenJS缓动一个对象从屏幕右侧滑动到屏幕左侧：

var rect = new createjs.Shape();

rect.graphics.beginFill(“#ff0000”).drawRect(0, 0, 100, 100);

stage.addChild(rect);

stage.update();

createjs.Tween.get(rect)

.to({x:0}, 1000, createjs.Ease.quadInOut)

.call(function(){

console.log(“Tween Complete”);

});

4、事件支持

EaselJS提供了一组强大的事件处理函数，例如tick事件、mousedown事件、pressmove事件等等。这些事件可以让开发者轻松地实现与对象的交互，或者实现对象的响应。比如，以下代码添加了一个点击事件，当用户点击时，鼠标下方的圆圈会向鼠标位置移动：

var circle = new createjs.Shape();

circle.graphics.beginFill(“#ff0000”).drawCircle(0, 0, 50);

circle.x = 100;

circle.y = 100;

stage.addChild(circle);

stage.update();

circle.on(“mousedown”, function(evt){

createjs.Tween.get(circle)

.to({x:evt.stageX, y:evt.stageY}, 500, createjs.Ease.quadInOut);

});

三、构建交互式动画和游戏

1、画布和舞台的创建

EaselJS的第一步就是创建Canvas和Stage。Canvas是HTML元素，用于在网页上显示可交互的内容。Stage是EaselJS中的主要容器，它是与canvas元素关联的最上层容器。

var canvas = document.getElementById(“canvas”);

var stage = new createjs.Stage(canvas);

2、绘制图形和添加对象

EaselJS提供了多种方式来绘制图形，例如使用Shape、Bitmap、Graphics等类。然后，使用addChild()函数向stage中添加对象。你可以把 stage 当成容器，对它的子对象进行删减、旋转、移动、透明度等变换。

var shape = new createjs.Shape();

shape.graphics.beginFill("#cc0000").drawCircle(100, 100, 50);

var bitmap = new createjs.Bitmap("image.png");

bitmap.x = 200;

bitmap.y = 100;

stage.addChild(shape, bitmap);

3、动画和缓动

使用TweenJS库，你可以很容易地对对象进行动画、旋转、缩放和移动等操作。在TweenJS库中设置对象的起始属性对象，动画的目标属性对象和缓动函数，在缓动动画完成后，还可以执行一个回调函数。

var circle = new createjs.Shape();

circle.graphics.beginFill(“#ff0000”).drawCircle(50, 50, 50);

stage.addChild(circle);

createjs.Tween.get(circle)

.to({x:200, y:200}, 1000, createjs.Ease.quadInOut)

.call(function(){

console.log(“Tween Complete”);

});

4、事件处理

在EaselJS中，可以针对具体的对象或舞台，注册事件处理程序。例如，在舞台中为“刷新”事件添加事件处理程序，可以在每一帧更新之前调用更新函数：

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

function handleTick(event) {

stage.update();

}

在canvas元素中为鼠标事件添加事件处理程序：

canvas.addEventListener("click", handleClick);

function handleClick(event) {

console.log("Click Event Occurred");

}

四、总结

EaselJS是一个优秀的HTML5动画和游戏开发工具，它提供了简单的API、嵌套对象、动画、事件处理等功能，使得开发者能够更加轻松地构建出各种动画和游戏。随着HTML5技术的发展，EaselJS有望成为前端开发者的首选工具之一。