Canvas动画库CreateJS之EaselJS的简介和基本用法

EaselJS简介

EaselJS是CreateJS的一个模块，用于创建和管理HTML5 Canvas中的图形，可以帮助开发者在Canvas中创建复杂的图形动画。它提供了一个可视化的接口，可以让开发者更容易地创建和管理Canvas中的图形元素，并且可以轻松地添加动画效果，从而让开发者更加轻松地创建复杂的Canvas动画。

EaselJS的基本用法

初始化

需要初始化一个EaselJS的Stage，Stage是一个容器，用于放置和管理Canvas中的图形元素。

// 初始化Stage
var stage = new createjs.Stage("canvas");

添加图形元素

可以在Stage中添加图形元素，比如圆形、矩形、文本等等。

// 创建一个圆形
var circle = new createjs.Shape();
circle.graphics.beginFill("#ff0000").drawCircle(0, 0, 50);

// 将圆形添加到Stage中
stage.addChild(circle);

添加动画

添加完图形元素后，可以使用EaselJS提供的动画方法，让图形元素做出各种动画效果。

// 让圆形以圆形轨道运动
createjs.Tween.get(circle, {loop: true})
    .to({x: 200, y: 0}, 1000, createjs.Ease.getPowInOut(4))
    .to({x: 200, y: 200}, 1000, createjs.Ease.getPowInOut(4))
    .to({x: 0, y: 200}, 1000, createjs.Ease.getPowInOut(4))
    .to({x: 0, y: 0}, 1000, createjs.Ease.getPowInOut(4));

// 更新Stage
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);

更新Stage

可以调用Stage的update方法，更新Stage中的图形元素，使动画效果在Canvas中显示出来。

// 更新Stage
stage.update();