Create.js实战-MovieClip操作

博主记忆力总不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。

闲话少说，之前看了一下tween.js的操作感觉是很有意思的，今天分享出来给大家一起学习一下，

老套路我们先创建画布，

<canvas id=”gameView” width = “1024” height = “768” style=”background-color: #cccccc; width:1024px;height:768px;”></canvas>

第二部 引入create.js引擎外置文件

<script src=”js/create.js”></script>

第三部开始进入主代码逻辑

var stage = new createjs.Stage(“gameView”);

创建了舞台并且根据canvas的id所关联

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

同步监测更新刷新舞台

var mc = new createjs.MovieClip(null,0,true,{start:50});

创建MovieClip

stage.addChild(mc);

添加到舞台

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));

创建图形容器，填充颜色，绘制圆形

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

运动轨迹1
mc.timeline.addTween(
createjs.Tween.get(state2).to({x:400})
.to({x:0},100)
.to({x:400},100)
);

运动轨迹2

mc.gotoAndPlay(“start”);

开始执行，

最后的效果就是两个球体在指定的xy坐标内 相对的重复开始运动，

今天又是代码慢慢的一天，各位老哥我们下次见 ＝。＝ 拜拜