canvas动画库createjs之easeljs(上篇)

以下是关于“canvas动画库createjs之easeljs(上篇)”的完整攻略，包括基本概念、解决方法、示例说明和注意事项。

基本概念

EaselJS是CreateJS中的一个模块，是一个用于HTML5 Canvas的JavaScript库，可以帮助开发者快速创建交互式图形和动画。EaselJS提供了一组易于使用的API，可以轻松地创建形状、文本、位图、容器和其他图形元素在它们之间添加动画和交互。

解决方法

以下是使用EaselJS创建动画的解决方法：

1. 创建Canvas元素。

```html

```

1. 创建Stage对象。

javascript
var stage = new createjs.Stage("canvas");

1. 创建Shape对象。

javascript
var shape = new createjs.Shape();

1. 绘制图形。

javascript
shape.graphics.beginFill("#FF0000").drawRect(0, 0, 50, 50);

1. 将Shape对象添加到Stage对象中。

javascript
stage.addChild(shape);
```

1. 更新Stage对象。

javascript
stage.update();

1. 创建Ticker对象。

javascript
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", handleTick);

1. 创建handleTick函数。

javascript
function handleTick(event) {
shape.x += 5;
if (shape.x > stage.canvas.width) { shape.x = 0; }
stage.update(event);
}

1. 运行动画。

javascript
createjs.Ticker.setPaused(false);

示例说明

以下是两个使用EaselJS创建动画的示例：

示例一：创建矩形动画

假设我们需要创建一个矩形动画，我们可以按照以下步骤操作：

1. 创建Canvas元素。

```html

```

1. 创建Stage对象。

javascript
var stage = new createjs.Stage("canvas");

1. 创建Shape对象。

javascript
var shape = new createjs.Shape();

1. 绘制矩形。

javascript
shape.graphics.beginFill("#FF0000").drawRect(0, 0, 50, 50);

1. 将Shape对象添加到Stage对象中。

javascript
stage.addChild(shape);

1. 更新Stage对象。

javascript
stage.update();

1. 创建Ticker对象。

javascript
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", handleTick);

1. 创建handleTick函数。

javascript
function handleTick(event) {
shape.x += 5;
if (shape.x > stage.canvas.width) { shape.x = 0; }
stage.update(event);
}

1. 运行动画。

javascript
createjs.Ticker.setPaused(false);

示例二：创建文本动画

假设我们需要创建一个文本动画，我们可以按照以下步骤操作：

1. 创建Canvas元素。

```html

```

1. 创建Stage对象。

javascript
var stage = new createjs.Stage("canvas");

1. 创建Text对象。

javascript
var text = new createjs.Text("Hello World", "20px Arial", "#000000");

1. 将Text对象添加到Stage对象中。

javascript
stage.addChild(text);

1. 更新Stage对象。

javascript
stage.update();

1. 创建Ticker对象。

javascript
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", handleTick);

1. 创建handleTick函数。

javascript
function handleTick(event) {
text.x += 5;
if (text.x > stage.canvas.width) { text.x = 0; }
stage.update(event);
}

1. 运行动画。

javascript
createjs.Ticker.setPaused(false);

注意事项

在使用EaselJS创建动画时，需要注意以下点：

• 在创建Canvas元素时，需要指定Canvas的宽度和高度。
• 在创建Stage对象时，需要将Canvas元素的ID作为参数传入。
• 创建Shape对象时，需要使用Shape类的构造函数。
• 在绘制图形时，需要使用Shape对象的graphics属性。
• 在将Shape对象添加到Stage对象中时，需要使用Stage对象的addChild方法。
• 在更新Stage对象时，需要使用Stage的update方法。
• 在创建Ticker对象时，需要设置帧率和添加tick事件监听器。
• 在创建handleTick函数时，需要更新Shape或Text对象的位置，并更新Stage对象。
• 在运行动画时，需要设置Ticker对象的paused属性为false。

结论

使用EaselJS可以轻松地创建交互式图形和动画。在动画时，需要创建Canvas元素、Stage对象、Shape或Text，并将它们添加到Stage对象中。在更新动画时，需要使用Ticker对象和handleTick函数。在运行动画时，需要设置Ticker对象的paused属性为false。

阅读剩余 85%