本节将介绍创建图形动画,精灵表位图动画,DOM元素动画.
例子1 图形动画
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
你的浏览器不支持canvas标签
</canvas>
<script>
var myCanvas=document.getElementById("myCanvas");
var stage=new createjs.Stage(myCanvas);
var shape=new createjs.Shape();
shape.graphics.beginFill("red").drawRect(0,0,50,50);
createjs.Ticker.addEventListener("tick",tick);
function tick(event){
if(shape.x>stage.canvas.width){
shape.x=0;
}
shape.x++;
stage.update();
}
stage.addChild(shape);
stage.update();
</script>
</body>
</html>
createjs.Ticker.addEventListener("tick",tick);
增加时间监听器,每隔一定时间执行,参数一为事件类型,参数二为相应回调函数.
if(shape.x>stage.canvas.width){
shape.x=0;
}
如果shape的x坐标大于canvas标签宽度则回到原处.
shape.x++;
shape的x坐标加1(向右移动).
例子2 精灵表位图动画
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="200"></canvas>
<script>
var myCanvas=document.getElementById("myCanvas");
var stage=new createjs.Stage(myCanvas);
var data={
"animations":
{
"all": [0, 25],
},
"images": ["test.png"],
"frames":
{
"height": 256,
"width":128,
"regX": 0,
"regY": 0,
"count": 26
}
}
var spriteSheet = new createjs.SpriteSheet(data);
var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
bitmapAnimation.x = 0;
bitmapAnimation.y = 20;
bitmapAnimation.gotoAndPlay("all");
stage.addChild(bitmapAnimation);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
bitmapAnimation.addEventListener("tick", tickEvent);
function tickEvent(event){
if(bitmapAnimation.x>stage.canvas.width){
bitmapAnimation.x=0;
}
bitmapAnimation.x+=5;
}
</script>
</body>
</html>
var data={
"animations":
{
"all": [0, 25],
},
"images": ["test.png"],
"frames":
{
"height": 256,
"width":128,
"regX": 0,
"regY": 0,
"count": 26
}
}
创建SpriteSheet数据,animations包含动画集合,frames包含帧相关属性,images包含图片数据.test.png为以下图片,另存为即可.
var spriteSheet = new createjs.SpriteSheet(data);
创建SpriteSheet对象,参数一为SpriteSheet数据.
var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
创建BitmapAnimation对象,参数一为SpriteSheet对象.
bitmapAnimation.gotoAndPlay("all");
跳到"all"并开始播放,参数一为位置标记或帧位置.
createjs.Ticker.setFPS(24);
设置每秒帧数为24.bitmapAnimation.addEventListener("tick", tickEvent);
增加tick事件监听.
例子3 DOM元素动画
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
<style>
#content{
text-align:center;
background-color: #000;
color:#FFF;
width:400px;
height:250px;
}
</style>
</head>
<body>
<div class="canvasHolder">
<div id="content">
<h2>例子3 DOM网页元素动画</h2>
教程制作<br/>
<button width="100" οnclick="alert('教程制作')">测试按钮</button>
</div>
<canvas id="myCanvas" width="400" height="250"></canvas>
</div>
<script>
var myCanvas=document.getElementById("myCanvas");
var stage=new createjs.Stage(myCanvas);
var myCanvas=document.getElementById("content");
var dOMElement = new createjs.DOMElement(content);
dOMElement.regX=400;
dOMElement.regY=250;
dOMElement.x=400;
dOMElement.y=250;
stage.addChild(dOMElement);
createjs.Ticker.addEventListener("tick", tick);
function tick(event){
if(dOMElement.x<document.body.clientWidth){
dOMElement.x+=3;
}
stage.update();
}
</script>
</body>
</html>var myCanvas=document.getElementById("content")
获取id为content的div元素.
var dOMElement = new createjs.DOMElement(content);
创建DOMElement对象,参数一为DOM元素.