第四章、从文档到动画(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>