CreateJs入門必知必會

CreateJS介紹

CreateJS是基於HTML5開發的一套模塊化的庫和工具。
基於這些庫，可以非常快捷地開發出基於HTML5的游戲、動畫和交互應用。
CreateJS主要包含如下四個類庫：

• EaselJS – 簡化處理HTML5畫布（核心）
• TweenJS – 用來幫助調整HTML5和Javascript屬性
• SoundJS – 用來簡化處理HTML5 audio
• PreloadJS – 幫助管理和協調加載中的一些資源

CreateJS官網：http://createjs.com/
CreateJs中文網：http://www.createjs.cc/

學習CreateJs第一步，先要看文檔

CreateJs提供了一些顯示類：

• 畫圖片用(Bitmap)
• 畫圖形，比如矩形，圓形等用(Shape)
• 畫文字，用(Text)
• 還有容器Container的概念，容器可以包含多個顯示對象，就像div標簽一樣，都有局部帶動全局的功能。
• …等

使用CreateJs理解一些概念就好辦多了，它有一個顯示列表，其中Stage是顯示列表的頂級容器，然后是Container，再之后就是各種Shape了。
這些顯示類都是集成自DisplayObject類，它是一個抽象類，不能直接構造，它定義了核心的屬性和方法，比如：x，y，alpha，rotation，scaleX，scaleY等。
所以：看文檔可以先看看DisplayObject類，然后去看看Stage舞台類，然后看看Container類，然后就是畫圖形的Shape類等其他類，先看構造函數需要傳什么參數，再看看有哪些屬性和方法。Ticker類也可以看看。

CreateJs一些API作用

要畫圖首先要引入這個庫沒毛病吧，然后實例化一個舞台。
然后你要畫一個圖形，就找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里面都有，好好看文檔。

1. createjs.Ticker.timingMode = createjs.Ticker.RAF;

HTML代碼

1. <canvas id="canvas"></canvas>

JS

1. let canvas = document.querySelector('#canvas');
2. canvas.width = window.innerWidth;
3. canvas.height = window.innerHeight;
4. //創建舞台
5. let stage = new createjs.Stage(canvas);
6. //舞台自動更新
7. createjs.Ticker.on('tick',stage);
8. //創建一個Shape對象
9. let rect = new createjs.Shape();
10. //用畫筆設置顏色，調用方法畫矩形，矩形參數猜都猜出來了：x,y,w,h
11. rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
12. //添加到舞台
13. stage.addChild(rect);

這就是用CreateJs畫圖的一個大概流程：創建顯示對象→設置一些參數→調用方法繪制→添加到舞台→update()
畫圓形也一樣，只不過調用的方法變了。

CreateJs做動效

CreateJs就是封裝了canvas的API讓繪圖變得簡單好用，canvas做動效的原理就是不停的繪制不同的場景。
對於CreateJs來說就是改變這些顯示對象的屬性值，比如x,y累加移動1px，就可以做移動的效果，還可以改變透明度：alpha，縮放：scaleX,scaleY，扭曲：skewX，skewY，旋轉：rotation等等。
接着上面的代碼

1. function loop () {
2. rect.x++;
3. if(rect.x == 100){
4. rect.x = 0;
5. }
6. requestAnimationFrame(loop);
7. }
8. loop();

這樣矩形就動起來了。
但是有一個需要注意的地方，如果我們做的是放大或者旋轉動畫就有問題了。如圖：

默認是基於坐標圓點縮放的，默認它的圓點是在左上角的，所以一般做動畫都是先指定x,y不會使用默認的圓點的。

1. let circle = new createjs.Shape();
2. circle.x = circle.y = 300;
3. circle.graphics.beginFill("#f00").drawCircle(0, 0, 100, 100);
4. stage.addChild(circle);
5. function loop () {
6. circle.scaleX += 0.01;
7. circle.scaleY += 0.01;
8. if(circle.scaleX >= 2){
9. circle.scaleX = 1;
10. circle.scaleY = 1;
11. }
12. requestAnimationFrame(loop);
13. }
14. loop();

然后可以借助動畫庫來實現一些連貫的動畫。CreateJs默認有帶了一個動畫庫tweenjs。這API就不用說了吧，猜都猜到怎么用了。記得要先引入這個動畫庫

1. createjs.Tween.get(circle,{loop:true})
2. .wait(1000)
3. .to({x:100,y:100},1000)
4. .wait(1000)
5. .to({scaleX:1.5},1000)
6. .wait(1000)
7. .to({scaleY:1.5},1000)
8. .wait(1000)
9. .to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceIn)
10. .wait(1000)
11. .to({x:0,y:0},1000);

然后，需要注意的是，如果你添加多個顯示對象，他們是有層級關系的，stage對象有個children屬性代表子元素，是一個數組，里面的元素層級像下標一樣從0開始，簡單來說就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。

1. //所以，比如有紅色和藍色兩個圓，要想讓紅色在上面就要后添加紅色，就只能
2. stage.addChild(blue);
3. stage.addChild(red);
4.  
5. //當然，作為一個強大的canvas庫，還有其他方法，可以設置元素的層級
6. stage.setChildIndex(red,1);
7.  
8. //還可以互換兩個元素的位置
9. stage.swapChildren(blue,red);
10.  
11. //還可以根據元素下標來互換兩個元素
12. stage.swapChildrenAt(0,1);
13.  
14. //然而有時候你可能並不知道元素的下標，所以你可以這樣
15. stage.getChildIndex(red) //1
16.  
17. //還有一些獲取子元素的方法
18. addChild，addChildAt，getChildAt，getChildByName
19.  
20. //還可以獲取元素的大小,不過這個方法不支持獲取Shape對象的大小，其他圖片，文字啥的可以。
21. getBounds()
22.  
23. //還有刪除子元素的方法
24. removeChild，removeChildAt
25.  
26. //還有陰影類,Shadow
27. red.shadow = new createjs.Shadow("#000", 0, 0, 30);
28.  
29. //還可以畫虛線,20是每個虛線的長，10是虛線的間隔，直線就是去掉setStrokeDash這個方法
30. let line = new createjs.Shape();
31. line.graphics.setStrokeDash([20, 10], 0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);
32.  
33. //還有遮罩，就是溢出隱藏那種效果。
34. let rect = new createjs.Shape();
35. rect.graphics.rect(0,0,100,100).closePath();
36. let line = new createjs.Shape();
37. line.graphics.setStrokeDash([20, 10], 0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);
38. //線的遮罩，這樣，只能看到線條的100px長。
39. line.mask = rect;
40. stage.addChild(line);//遮罩不需要添加

CreateJs事件

CreateJs事件使用也很方便，像jq一樣的事件綁定和移除方式：on和off

1. //注意點：
2.  
3. //用到mouseOver事件的時候需要加一句
4. stage.enableMouseOver(10);
5.  
6. //要讓移動端支持createjs的點擊等鼠標事件時需要加上
7. createjs.Touch.enable(stage);
8.  
9. //移除事件需要特殊注意一下，移除的時候，參數不是事件函數，而是監聽事件的返回值。可以放在對象的一個自定義屬性上面。方便。
10. rect.handleClick = rect.on('click',() => {
11. console.log('點擊事件');
12. });
13. rect.off('click',rect.handleClick);

高亮效果

1. //在CreateJs里面透明的地方是不響應事件的，這樣就實現了事件委托。比如做一個高亮效果，直接給容器加一個事件。
2. let container = new createjs.Container().set({
3. x:100,
4. y:100
5. });
6. for (let i = 0; i < 4; i++) {
7. let rect = new createjs.Shape().set({
8. x:100 * i,
9. y:100 * i
10. });
11. rect.fillCommand = rect.graphics.beginFill("red").command;
12. rect.graphics.rect(0, 0, 100, 100);
13. container.addChild(rect);
14. }
15. stage.addChild(container);
16. stage.enableMouseOver(10);
17. container.on('mouseover',(e) => {
18. e.target.fillCommand.style = 'blue';
19. });
20. container.on('mouseout',(e) => {
21. e.target.fillCommand.style = 'red';
22. })

效果如圖：

最后要說的

最后附上幾個我之前做的demo。代碼略渣。
demo1demo2（點擊小圓球）demo3demo4
剩下的就去查API吧，如果還是有些不太明白的，就看代碼，看別人寫的或者從官方Github上面下載的壓縮包里面有demo，看看用法，結合API來學。
真羡慕你們能看到我寫的教程，雖然說不是很詳細，但是我覺得基本思路應該解釋清楚了。想當年，我自己學這個庫的時候，真是一個人瞎琢磨，花了好些時間才會用了，要是不點贊（喜歡），好意思嗎。