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

<h2>學習CreateJs第一步，先要看文檔</h2> CreateJs提供了一些顯示類： <ul> <li>畫圖片用(Bitmap)</li> <li>畫圖形，比如矩形，圓形等用(Shape)</li> <li>畫文字，用(Text)</li> <li>還有容器Container的概念，容器可以包含多個顯示對象，就像div標簽一樣，都有局部帶動全局的功能。</li> <li>…等</li> </ul> 使用CreateJs理解一些概念就好辦多了，它有一個顯示列表，其中Stage是顯示列表的頂級容器，然后是Container，再之后就是各種Shape了。 這些顯示類都是集成自DisplayObject類，它是一個抽象類，不能直接構造，它定義了核心的屬性和方法，比如：x，y，alpha，rotation，scaleX，scaleY等。 所以：看文檔可以先看看DisplayObject類，然后去看看Stage舞臺類，然后看看Container類，然后就是畫圖形的Shape類等其他類，先看構造函數需要傳什么參數，再看看有哪些屬性和方法。Ticker類也可以看看。 <h2>CreateJs一些API作用</h2> 要畫圖首先要引入這個庫沒毛病吧，然后實例化一個舞臺。 然后你要畫一個圖形，就找Shape的文檔，文檔上寫的很清楚怎么畫一個圖形。 new一個Shape對象，用它的屬性graphics，我叫它畫筆。它就相當于Graphics類，所以關于它的方法可以去看Graphics類的API。 graphics可以設置一些樣式，線條寬度，顏色等等，還可以調用一些方法繪制圖形，畫矩形rect或者drawRect都可以。畫圓形arc或者drawCircle都可以，arc還可以畫扇形。 但是這樣頁面是不會有任何反應的，還需要把這個Shape對象添加到舞臺上去，這時候頁面還是沒有反應，因為添加上去還要渲染，需要用舞臺調用update方法。CreateJs提供了tick事件，會自動update。 這里也得提一下，CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，默認是setTimeout，默認的幀數是20，一般的話還沒啥，但是如果你設置成requestAnimationFrame模式的話，就會感覺到動畫如絲般的流暢，差距一眼就看出來了。這些API里面都有，好好看文檔。 <ol class="linenums"> <li class="L0">createjs.Ticker.timingMode = createjs.Ticker.RAF;</li> </ol> HTML代碼 ~~~ createjs.Ticker.timingMode = createjs.Ticker.RAF; ~~~ JS ~~~ let canvas = document.querySelector('#canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //創建舞臺 let stage =new createjs.Stage(canvas); //舞臺自動更新 createjs.Ticker.on('tick',stage); //創建一個Shape對象 let rect =new createjs.Shape(); //用畫筆設置顏色，調用方法畫矩形，矩形參數猜都猜出來了：x,y,w,h rect.graphics.beginFill("#f00").drawRect(0,0,100,100); //添加到舞臺 stage.addChild(rect); ~~~ 這就是用CreateJs畫圖的一個大概流程：創建顯示對象→設置一些參數→調用方法繪制→添加到舞臺→update() 畫圓形也一樣，只不過調用的方法變了。 <h2>CreateJs做動效</h2> CreateJs就是封裝了canvas的API讓繪圖變得簡單好用，canvas做動效的原理就是不停的繪制不同的場景。 對于CreateJs來說就是改變這些顯示對象的屬性值，比如x,y累加移動1px，就可以做移動的效果，還可以改變透明度：alpha，縮放：scaleX,scaleY，扭曲：skewX，skewY，旋轉：rotation等等。 接著上面的代碼 ~~~ function loop (){ rect.x++; if(rect.x ==100){ rect.x =0; } requestAnimationFrame(loop); } loop(); ~~~ 這樣矩形就動起來了。 但是有一個需要注意的地方，如果我們做的是放大或者旋轉動畫就有問題了。如圖： <a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110384845.gif" rel="box" data-original-title="CreateJs入門必知必會"><img class="alignnone size-full wp-image-635" title="CreateJs入門必知必會" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110384845.gif" alt="CreateJs入門必知必會"></a> 默認是基于坐標圓點縮放的，默認它的圓點是在左上角的，所以一般做動畫都是先指定x,y不會使用默認的圓點的。 <a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110420742.gif" rel="box" data-original-title="CreateJs入門必知必會"><img class="alignnone size-full wp-image-636" title="CreateJs入門必知必會" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110420742.gif" alt="CreateJs入門必知必會"></a> ~~~ let circle =new createjs.Shape(); circle.x = circle.y =300; circle.graphics.beginFill("#f00").drawCircle(0,0,100,100); stage.addChild(circle); function loop (){ circle.scaleX +=0.01; circle.scaleY +=0.01; if(circle.scaleX >=2){ circle.scaleX =1; circle.scaleY =1; } requestAnimationFrame(loop); } loop(); ~~~ 然后可以借助動畫庫來實現一些連貫的動畫。CreateJs默認有帶了一個動畫庫tweenjs。這API就不用說了吧，猜都猜到怎么用了。記得要先引入這個動畫庫 ~~~ createjs.Tween.get(circle,{loop:true}) .wait(1000) .to({x:100,y:100},1000) .wait(1000) .to({scaleX:1.5},1000) .wait(1000) .to({scaleY:1.5},1000) .wait(1000) .to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceIn) .wait(1000) .to({x:0,y:0},1000); ~~~ 然后，需要注意的是，如果你添加多個顯示對象，他們是有層級關系的，stage對象有個children屬性代表子元素，是一個數組，里面的元素層級像下標一樣從0開始，簡單來說就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。 ~~~ //所以，比如有紅色和藍色兩個圓，要想讓紅色在上面就要后添加紅色，就只能 stage.addChild(blue); stage.addChild(red); //當然，作為一個強大的canvas庫，還有其他方法，可以設置元素的層級 stage.setChildIndex(red,1); //還可以互換兩個元素的位置 stage.swapChildren(blue,red); //還可以根據元素下標來互換兩個元素 stage.swapChildrenAt(0,1); //然而有時候你可能并不知道元素的下標，所以你可以這樣 stage.getChildIndex(red)//1 //還有一些獲取子元素的方法 addChild，addChildAt，getChildAt，getChildByName //還可以獲取元素的大小,不過這個方法不支持獲取Shape對象的大小，其他圖片，文字啥的可以。 getBounds() //還有刪除子元素的方法 removeChild，removeChildAt //還有陰影類,Shadow red.shadow =new createjs.Shadow("#000",0,0,30); //還可以畫虛線,20是每個虛線的長，10是虛線的間隔，直線就是去掉setStrokeDash這個方法 let line =new createjs.Shape(); line.graphics.setStrokeDash([20,10],0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0); //還有遮罩，就是溢出隱藏那種效果。 let rect =new createjs.Shape(); rect.graphics.rect(0,0,100,100).closePath(); let line =new createjs.Shape(); line.graphics.setStrokeDash([20,10],0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0); //線的遮罩，這樣，只能看到線條的100px長。 line.mask = rect; stage.addChild(line);//遮罩不需要添加 ~~~ <h2>CreateJs事件</h2> CreateJs事件使用也很方便，像jq一樣的事件綁定和移除方式：on和off ~~~ //注意點： //用到mouseOver事件的時候需要加一句 stage.enableMouseOver(10); //要讓移動端支持createjs的點擊等鼠標事件時需要加上 createjs.Touch.enable(stage); //移除事件需要特殊注意一下，移除的時候，參數不是事件函數，而是監聽事件的返回值。可以放在對象的一個自定義屬性上面。方便。 rect.handleClick = rect.on('click',()=>{ console.log('點擊事件'); }); rect.off('click',rect.handleClick); ~~~ <h3>高亮效果</h3> ~~~ //在CreateJs里面透明的地方是不響應事件的，這樣就實現了事件委托。比如做一個高亮效果，直接給容器加一個事件。 let container =new createjs.Container().set({ x:100, y:100 }); for(let i =0; i <4; i++){ let rect =new createjs.Shape().set({ x:100* i, y:100* i }); rect.fillCommand = rect.graphics.beginFill("red").command; rect.graphics.rect(0,0,100,100); container.addChild(rect); } stage.addChild(container); stage.enableMouseOver(10); container.on('mouseover',(e)=>{ e.target.fillCommand.style ='blue'; }); container.on('mouseout',(e)=>{ e.target.fillCommand.style ='red'; }) ~~~ 效果如圖： <a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060211001898.gif" rel="box" data-original-title="CreateJs入門必知必會"><img class="alignnone size-full wp-image-656" title="CreateJs入門必知必會" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060211001898.gif" alt="CreateJs入門必知必會"></a> <h2>最后要說的</h2> 最后附上幾個我之前做的demo。代碼略渣。 <a class="dl" title="" href="http://zxycc.cc/demo/data/index1.html" rel="nofollow" target="_blank" data-original-title="">demo1</a> * * * * * <a class="dl" title="" href="http://zxycc.cc/demo/data/index2.html" rel="nofollow" target="_blank" data-original-title="">demo2（點擊小圓球）</a> * * * * * <a class="dl" title="" href="http://zxycc.cc/demo/data/index3.html" rel="nofollow" target="_blank" data-original-title="">demo3</a> * * * * * <a class="dl" title="" href="http://zxycc.cc/demo/data/index4.html" rel="nofollow" target="_blank" data-original-title="">demo4</a> * * * * * >[warning]剩下的就去查API吧，如果還是有些不太明白的，就看代碼，看別人寫的或者從官方Github上面下載的壓縮包里面有demo，看看用法，結合API來學。