CreateJS 动画

最新推荐文章于 2024-08-13 08:09:23 发布

冰灵

最新推荐文章于 2024-08-13 08:09:23 发布

阅读量3.2k

点赞数

分类专栏： JS HTML5 文章标签： JavaScript HTML5 Canvas JavaScript引擎

本文链接：https://blog.csdn.net/bud_icelf/article/details/8932490

版权

这篇博客详细介绍了如何利用EaselJS库在HTML5环境中制作图形动画、精灵表位图动画以及DOM元素动画，提供了三个具体的示例。

摘要由CSDN通过智能技术生成

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986

EaselJS 动画

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

效果显示<