JZTXT

CreateJS 动画 EaselJS 动画

发布时间 2023-06-08 16:00:31作者: 多见多闻

本节将介绍创建图形动画,精灵表位图动画,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元素.