博主記憶力總不好，最近剛好用了一下createJs框架，怕以后一段時間沒用后會忘記，所以在此做個記錄，或許以后用得著。

閑話少說，之前看了一下tween.js的操作感覺是很有意思的，今天分享出來給大家一起學習一下，

老套路我們先創(chuàng)建畫布，

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

創(chuàng)建了舞臺并且根據(jù)canvas的id所關聯(lián)

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

同步監(jiān)測更新刷新舞臺

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

創(chuàng)建MovieClip

stage.addChild(mc);

添加到舞臺

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

創(chuàng)建圖形容器，填充顏色，繪制圓形

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

創(chuàng)建圖形容器，填充顏色，繪制圓形

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

開始執(zhí)行，

最后的效果就是兩個球體在指定的xy坐標內 相對的重復開始運動，

今天又是代碼慢慢的一天，各位老哥我們下次見 ＝。＝ 拜拜

轉載于:https://my.oschina.net/8946a/blog/1305278

總結

以上是生活随笔為你收集整理的Create.js实战-MovieClip操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。