第四章、從文檔到動畫(2) · createjs-從入門到精通

>[warning]## 制作動畫或小游戲——CreateJS基礎類 > * * * * * <div class = "post"> <div id="cnblogs_post_body" class="blogpost-body">前面曾經記錄過Canvas的基礎知識《<a href="http://www.cnblogs.com/strick/p/5310787.html" target="_blank">讓自己也能使用Canvas</a>》，在實際使用中，用封裝好的庫效率會高點。 使用成熟的庫還能對基礎知識有更深入的理解，CreateJS是基于HTML5開發的一套模塊化的庫和工具，有4個模塊，<a href="https://github.com/CreateJS" target="_blank">github地址在這里</a>。 最近看到有個<a href="http://www.createjs.cc/" target="_blank">中文網</a>，很多API都翻譯了出來，不過就是翻譯的比較生硬。 我參考了國外寫的一本書《<a href="http://download.csdn.net/download/loneleaf1/9487928" target="_blank">HTML5.Games.with.CreateJS</a>》，再根據自己的一些理解整理了一下這個庫的使用。 下面所有的demo代碼都可以在<a href="http://codepen.io/strick/pen/BKYdRP" target="_blank">這里查看到</a>。   <h1>一、Stage</h1> <a href="http://www.createjs.cc/easeljs/docs/classes/Stage.html" target="_blank">Stage</a>（舞臺）就是展現圖形、執行動畫的地方，必須先創建Stage，然后才能做后續操作。 有兩種方式的初始化： <div class="cnblogs_code"> <pre>stage = new createjs.Stage(document.getElementById('canvas')); stage = new createjs.Stage('canvas');//直接使用canvas的ID</pre> </div> 接下來就是添加圖形等布置操作，等到你布置好舞臺后，就需要調用“update”方法，展示新的舞臺內容。 <div class="cnblogs_code"> <pre>stage.update();</pre> </div>   <h1>二、Ticker</h1> <a href="http://www.createjs.cc/easeljs/docs/classes/Ticker.html" target="_blank">Ticker</a>類是一個定時器，主要就是定時刷新舞臺，理想的幀速率是60FPS，在這個類中也可以手動的修改這個速度。 <div class="cnblogs_code"> <pre>var stage; function init() { stage = new createjs.Stage('canvas');//直接使用canvas的ID createjs.Ticker.addEventListener("tick", runGame); createjs.Ticker.setFPS(60); } function runGame(e) { stage.update(); }</pre> </div> 如果想控制“runGame”中的刷新，可以設置暫停。 “setPaused”方法可以修改“e”中的“paused”屬性。 <div class="cnblogs_code"> <pre>createjs.Ticker.setPaused(true); function runGame(e) { if(!e.paused) stage.update(); }</pre> </div>   <h1>三、Graphics</h1> 1）初始化方式 接下來可以畫一些圖出來，<a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html" target="_blank">Graphics</a>類可以畫矢量圖（vector）或位圖（bitmap）。 <div class="cnblogs_code"> <pre>var g = new createjs.Graphics(); g.beginStroke('#000'); g.beginFill('#FF6600'); g.drawRect(0,0,100,100);</pre> </div> 也可以鏈式的寫法。 <div class="cnblogs_code"> <pre>var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);</pre> </div> Graphics類僅僅提供了畫圖，但并不會顯示，如果要顯示，就需要“Shape”類的幫忙。   2）簡寫 Graphics類中的畫圖方法還有簡寫： <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160412154438301-791242895.jpg" alt="" data-pinit="registered" />   <h1>四、Shape</h1> 1）制作圖形 一旦你創建了一個Graphics類，你就需要<a href="http://www.createjs.cc/easeljs/docs/classes/Shape.html" target="_blank">Shape</a>類，下面的代碼接上面的“g”。 <div class="cnblogs_code"> <pre>var square = new createjs.Shape(g); square.x = square.y = 100; stage.addChild(square);</pre> </div> <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160412152319879-849956821.jpg" alt="" data-pinit="registered" /> 除了正方形，還可以有三角形、圓、多邊形等，詳細的代碼可以在<a href="http://codepen.io/strick/pen/BKYdRP" target="_blank">這里看到</a>。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160412152537832-2122862430.jpg" alt="" data-pinit="registered" />   2）簡單的動畫 使用動畫就會引入<a href="http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html" target="_blank">TweenJS</a>模塊，將會用到上面畫正方形的Graphics代碼，多了下面兩句代碼。 <div class="cnblogs_code"> <pre>//繞著圖形中心滾動 square.regX = square.regY = 50;//設置圖形的X和Y軸位移 createjs.Tween.get(square).to({ rotation: 360 }, 3000);</pre> </div> <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160412160531004-27622406.gif" alt="" data-pinit="registered" />   <h1>五、一個UI元素demo</h1> 接下來制作一個常見的加載條，當年上傳、打開某個程序或做其它操作經常能看到，詳細代碼可以<a href="http://codepen.io/strick/pen/grewaR" target="_blank">在這里查看到</a>。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160413213636926-75146437.jpg" alt="" /> 1）制作過程 先設置舞臺，再創建創建加載條，最后用定時器累加加載條長度，其實也可以直接在Ticker事件中累加長度，只是速度會快一點。 <div class="cnblogs_code"> <pre>function init() { setupStage();//設置舞臺 buildLoaderBar();//創建加載條 startLoad();//用定時器累加加載條長度 }</pre> </div> 用鏈式寫法來寫更新長度的那段代碼，“updateLoaderBar”是在“startLoad”函數中的。 <div class="cnblogs_code"> <pre>function updateLoaderBar() { loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill(); loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke(); }</pre> </div> 先是畫里面的藍色，再畫邊框。 <a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html#method_beginFill" target="_blank">beginFill</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html#method_endFill" target="_blank">endFill</a>組合使用了一下，endFill是指重新開始畫，使得后面的設置不會影響當前的。 如果我去掉endFill，將會直接顯示完整的綠色，因為后面的“drawRect(0, 0, LOADER_WIDTH, 40)”，又設置了一遍寬度。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160413220703301-608715166.jpg" alt="" /> <a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html#method_beginStroke" target="_blank">beginStroke</a>和<a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html#method_endStroke" target="_blank">endStroke</a>組合使用，目的和上面的差不多。 如果把“endStroke”去掉，就會發現多了根右邊框，之所以會多是前面的“drawRect”影響了展示。 <img src="https://images2015.cnblogs.com/blog/211606/201604/211606-20160413222118988-703939014.jpg" alt="" />   2）一點小改造 后面再觀察一下發現，其實可以不用每次來畫邊框，邊框可以在“buildLoaderBar”函數中定義。 <div class="cnblogs_code"> <pre>function buildLoaderBar() { loaderBar = new createjs.Shape(); loaderBar.x = loaderBar.y = 100; loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke(); stage.addChild(loaderBar); }</pre> </div> 相應的“updateLoaderBar”函數也要做些修改，<a href="http://www.createjs.cc/easeljs/docs/classes/Graphics.html#method_drawRect" target="_blank">drawRect</a>中的X、Y坐標要修改下，寬度也要改變下。 本來以為設置了邊寬為2，那么也要偏移2，但其實不是，只需要偏移1就行了。 <div class="cnblogs_code"> <pre>function updateLoaderBar() { loaderBar.graphics.beginFill('#00ff00').drawRect(1, 1, LOADER_WIDTH * percentLoaded - 2, 38).endFill(); }</pre> </div> 如果我把邊框的寬度改成4，偏移和寬度又要重新計算了，怪不得寫在里面，就方便多了。  </div><div id="MySignature"></div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div>