Createjs的控件 BitMap、MovieClip、Sprite

最新推荐文章于 2025-04-21 17:03:41 发布

梦宠

最新推荐文章于 2025-04-21 17:03:41 发布

阅读量3.8k

点赞数 3

分类专栏： CreateJs

本文链接：https://blog.youkuaiyun.com/u010977934/article/details/51943389

版权

CreateJs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Createjs中的Bitmap、MovieClip和Sprite控件的使用。Bitmap用于显示图片，MovieClip用于处理复杂的动画，而Sprite则可以从spritesheet中播放帧序列。文中通过实例详细讲解了如何创建MovieClip动画，包括创建MovieClip，绘制圆并进行动画效果，以及使用Timeline同步动画。最后，展示了如何使用Sprite显示和播放帧序列动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Createjs控件

一、BitMap控件

掌握了BitMap之后，我们可以快速的对图片做处理。

1、首先准备一张我们需要引入的照片，在HTML代码中引入easeljs文件。

    <script src="js/easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>

2、使用canvas标签创建stage

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

3、创建一个容器Container,并且将该容器放进stage中，代码如下：

    var gameView = new createjs.Container();
    stage.addChild(gameView);

4、使用控件Bitmap引入我们需要的图片，并且将该图片放进Container中

      var bitmap = new createjs.Bitmap("img/image.jpg");
      gameView.addChild(bitmap);

5、最后使用 Ticker 事件监听（给stage设置tick,相当于js中的setInterval,定时运行一个函数），我们用来定时的刷新stage;

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",function(){
	
	stage.update();
	
})

最终图片显示，加载成功；

二、MovieClip控件：影片剪辑
掌握了MovieClip可以更好地处理动画。

TweenJS类库主要用来调整和动画HTML5和Javascript属性。

1.首先我们需要引入三个js文件，分别为：easelJS、tweenJS、movieclipJS.

<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tweenjs-0.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="movieclip-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>

2.在body中写一个canvas，且引入我们写逻辑处理的js的文件。

<canvas id="movieClip" width="400px" height="400px"></canvas>
<script src="movieClip.js" type="text/javascript" charset="utf-8"></script>

3. 使用canvas标签创建stage

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

4、使用Ticker 事件监听（给stage设置tick,相当于js中的setInterval,定时运行一个函数），我们用来定时的刷新stage;代码如下：

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);

5.创建MovieClip,并且添加给stage

var mc = new createjs.MovieClip(null, 0, true, {
	start: 50,              //50为起始的时间线，   循环为true;
	stop:100 
}); //跳转到当前时间线的50 的位置     
stage.addChild(mc);

6.绘画出2个圆。以0.100为原点半径为30，代码如下：

var state1 = new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawCircle(0, 100, 30));
var state2 = new createjs.Shape(new createjs.Graphics().beginFill("#555555").drawCircle(0, 100, 30));

7.设置他们从不同的位置开始做动画效果，这个Timeline类同步多个(tweens)渐变并允许它们作为一个整体被控制。

mc.timeline.addTween(createjs.Tween.get(state1).to({x: 0}).to({x: 400}, 100).to({x: 0}, 100));
mc.timeline.addTween(createjs.Tween.get(state2).to({x: 400}).to({x: 0}, 100).to({x: 400}, 100));

ps:

state1:从x为0 的地方开始运动，运动到400的地方（整个画布的宽度），所用的时间线是100，然后在用100的时间线回到x=0的地方；

state2:从x = 400的地方开始运动，运动到x = 0,所用时间线为100，然后再返回x = 400的地方。

这样看来，是两个不同颜色的圆球在相对运动，他们会在x = 200，时间线为50 的地方重合，如此反复的做运动。

8.最后用gotoAndPlay,表示这个时间表没有停顿的跳转到指定的位置或标签。

mc.gotoAndPlay("stop");

效果如下：

三、Sprite 控件

起。显示一个帧或帧序列（即动画）从spritesheet实例。精灵片是一系列的图像（通常是动画帧）合并成一个单一的图像。例如，一个动画由8 100x100图像可以组合成一个400X200精灵表（4帧在2高）。你可以显示单个帧，播放帧作为一个动画，甚至序列动画一起。例如：

1、首先引入需要的easeljs文件

2、写一个canvas，引入我们写逻辑处理的js文件

        <head>
		<meta charset="UTF-8">
		<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<canvas id="sprite" width="960px" height="400px"></canvas>
		<script src="app.js" type="text/javascript" charset="utf-8"></script>
	</body>

var stage = new createjs.Stage("sprite");
//创建出SpriteSheet
var  ss = new createjs.SpriteSheet({
	"images":["spritesheet_grant.png"],
	"frames":{
		"height":292,            //每个图的高度为292，宽度为165，一共有64张图
		"width":165,
		"count":64},
	
	"animations":{
		"run":[0,25,"jump"],         //0帧到25帧是跳
		"jump":[26,63,"run"]         //26帧到63帧是跑
	}
	
	
});

4、

var s = new createjs.Sprite(ss,"run");
//两个参数，一个是spritesheet的对象， 

s.x = 100;   //位置为100，100
s.y = 100;

stage.addChild(s);

//监听事件，50毫秒更新stage
createjs.Ticker.setFPS(50);
createjs.Ticker.addEventListener("tick",stage);

效果如下：

是一个小人跑跳的动画，这样就完成了。