<h2>學(xué)習(xí)CreateJs第一步，先要看文檔</h2>
<p>CreateJs提供了一些顯示類(lèi)：</p>
<ul>
<li>畫(huà)圖片用(Bitmap)</li>
<li>畫(huà)圖形，比如矩形，圓形等用(Shape)</li>
<li>畫(huà)文字，用(Text)</li>
<li>還有容器Container的概念，容器可以包含多個(gè)顯示對(duì)象，就像div標(biāo)簽一樣，都有局部帶動(dòng)全局的功能。</li>
<li>…等</li>
</ul>
<p>使用CreateJs理解一些概念就好辦多了，它有一個(gè)顯示列表，其中Stage是顯示列表的頂級(jí)容器，然后是Container，再之后就是各種Shape了。<br>這些顯示類(lèi)都是集成自DisplayObject類(lèi)，它是一個(gè)抽象類(lèi)，不能直接構(gòu)造，它定義了核心的屬性和方法，比如：x，y，alpha，rotation，scaleX，scaleY等。<br>所以：看文檔可以先看看DisplayObject類(lèi)，然后去看看Stage舞臺(tái)類(lèi)，然后看看Container類(lèi)，然后就是畫(huà)圖形的Shape類(lèi)等其他類(lèi)，先看構(gòu)造函數(shù)需要傳什么參數(shù)，再看看有哪些屬性和方法。Ticker類(lèi)也可以看看。</p>
<h2>CreateJs一些API作用</h2>
<p>要畫(huà)圖首先要引入這個(gè)庫(kù)沒(méi)毛病吧，然后實(shí)例化一個(gè)舞臺(tái)。<br>然后你要畫(huà)一個(gè)圖形，就找Shape的文檔，文檔上寫(xiě)的很清楚怎么畫(huà)一個(gè)圖形。<br>new一個(gè)Shape對(duì)象，用它的屬性graphics，我叫它畫(huà)筆。它就相當(dāng)于Graphics類(lèi)，所以關(guān)于它的方法可以去看Graphics類(lèi)的API。<br>graphics可以設(shè)置一些樣式，線條寬度，顏色等等，還可以調(diào)用一些方法繪制圖形，畫(huà)矩形rect或者drawRect都可以。畫(huà)圓形arc或者drawCircle都可以，arc還可以畫(huà)扇形。<br>但是這樣頁(yè)面是不會(huì)有任何反應(yīng)的，還需要把這個(gè)Shape對(duì)象添加到舞臺(tái)上去，這時(shí)候頁(yè)面還是沒(méi)有反應(yīng)，因?yàn)樘砑由先ミ€要渲染，需要用舞臺(tái)調(diào)用update方法。CreateJs提供了tick事件，會(huì)自動(dòng)update。<br>這里也得提一下，CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，默認(rèn)是setTimeout，默認(rèn)的幀數(shù)是20，一般的話還沒(méi)啥，但是如果你設(shè)置成requestAnimationFrame模式的話，就會(huì)感覺(jué)到動(dòng)畫(huà)如絲般的流暢，差距一眼就看出來(lái)了。這些API里面都有，好好看文檔。</p>
<ol class="linenums">
<li class="L0"><span class="pln">createjs<span class="pun">.<span class="typ">Ticker<span class="pun">.<span class="pln">timingMode <span class="pun">=<span class="pln"> createjs<span class="pun">.<span class="typ">Ticker<span class="pun">.<span class="pln">RAF<span class="pun">;</span></span></span></span></span></span></span></span></span></span></span></span></li>
</ol>
<p>HTML代碼</p>
~~~
createjs.Ticker.timingMode = createjs.Ticker.RAF;
~~~
<p>JS</p>
~~~
let canvas = document.querySelector('#canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//創(chuàng)建舞臺(tái)
let stage =new createjs.Stage(canvas);
//舞臺(tái)自動(dòng)更新
createjs.Ticker.on('tick',stage);
//創(chuàng)建一個(gè)Shape對(duì)象
let rect =new createjs.Shape();
//用畫(huà)筆設(shè)置顏色，調(diào)用方法畫(huà)矩形，矩形參數(shù)猜都猜出來(lái)了：x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0,0,100,100);
//添加到舞臺(tái)
stage.addChild(rect);
~~~
<p>這就是用CreateJs畫(huà)圖的一個(gè)大概流程：創(chuàng)建顯示對(duì)象→設(shè)置一些參數(shù)→調(diào)用方法繪制→添加到舞臺(tái)→update()<br>畫(huà)圓形也一樣，只不過(guò)調(diào)用的方法變了。</p>
<h2>CreateJs做動(dòng)效</h2>
<p>CreateJs就是封裝了canvas的API讓繪圖變得簡(jiǎn)單好用，canvas做動(dòng)效的原理就是不停的繪制不同的場(chǎng)景。<br>對(duì)于CreateJs來(lái)說(shuō)就是改變這些顯示對(duì)象的屬性值，比如x,y累加移動(dòng)1px，就可以做移動(dòng)的效果，還可以改變透明度：alpha，縮放：scaleX,scaleY，扭曲：skewX，skewY，旋轉(zhuǎn)：rotation等等。<br>接著上面的代碼</p>
~~~
function loop (){
rect.x++;
if(rect.x ==100){
rect.x =0;
}
requestAnimationFrame(loop);
}
loop();
~~~
<p>這樣矩形就動(dòng)起來(lái)了。<br>但是有一個(gè)需要注意的地方，如果我們做的是放大或者旋轉(zhuǎn)動(dòng)畫(huà)就有問(wèn)題了。如圖：<br><a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110384845.gif" rel="box" data-original-title="CreateJs入門(mén)必知必會(huì)"><img class="alignnone size-full wp-image-635" title="CreateJs入門(mén)必知必會(huì)" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110384845.gif" alt="CreateJs入門(mén)必知必會(huì)"></a>
<br>默認(rèn)是基于坐標(biāo)圓點(diǎn)縮放的，默認(rèn)它的圓點(diǎn)是在左上角的，所以一般做動(dòng)畫(huà)都是先指定x,y不會(huì)使用默認(rèn)的圓點(diǎn)的。<br>
<a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110420742.gif" rel="box" data-original-title="CreateJs入門(mén)必知必會(huì)"><img class="alignnone size-full wp-image-636" title="CreateJs入門(mén)必知必會(huì)" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060110420742.gif" alt="CreateJs入門(mén)必知必會(huì)"></a>
</p>
~~~
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();
~~~
<p>然后可以借助動(dòng)畫(huà)庫(kù)來(lái)實(shí)現(xiàn)一些連貫的動(dòng)畫(huà)。CreateJs默認(rèn)有帶了一個(gè)動(dòng)畫(huà)庫(kù)tweenjs。這API就不用說(shuō)了吧，猜都猜到怎么用了。記得要先引入這個(gè)動(dòng)畫(huà)庫(kù)</p>
~~~
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);
~~~
<p>然后，需要注意的是，如果你添加多個(gè)顯示對(duì)象，他們是有層級(jí)關(guān)系的，stage對(duì)象有個(gè)children屬性代表子元素，是一個(gè)數(shù)組，里面的元素層級(jí)像下標(biāo)一樣從0開(kāi)始，簡(jiǎn)單來(lái)說(shuō)就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。</p>
~~~
//所以，比如有紅色和藍(lán)色兩個(gè)圓，要想讓紅色在上面就要后添加紅色，就只能
stage.addChild(blue);
stage.addChild(red);
//當(dāng)然，作為一個(gè)強(qiáng)大的canvas庫(kù)，還有其他方法，可以設(shè)置元素的層級(jí)
stage.setChildIndex(red,1);
//還可以互換兩個(gè)元素的位置
stage.swapChildren(blue,red);
//還可以根據(jù)元素下標(biāo)來(lái)互換兩個(gè)元素
stage.swapChildrenAt(0,1);
//然而有時(shí)候你可能并不知道元素的下標(biāo)，所以你可以這樣
stage.getChildIndex(red)//1
//還有一些獲取子元素的方法
addChild，addChildAt，getChildAt，getChildByName
//還可以獲取元素的大小,不過(guò)這個(gè)方法不支持獲取Shape對(duì)象的大小，其他圖片，文字啥的可以。
getBounds()
//還有刪除子元素的方法
removeChild，removeChildAt
//還有陰影類(lèi),Shadow
red.shadow =new createjs.Shadow("#000",0,0,30);
//還可以畫(huà)虛線,20是每個(gè)虛線的長(zhǎng)，10是虛線的間隔，直線就是去掉setStrokeDash這個(gè)方法
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長(zhǎng)。
line.mask = rect;
stage.addChild(line);//遮罩不需要添加
~~~
<h2>CreateJs事件</h2>
<p>CreateJs事件使用也很方便，像jq一樣的事件綁定和移除方式：on和off</p>
~~~
//注意點(diǎn)：
//用到mouseOver事件的時(shí)候需要加一句
stage.enableMouseOver(10);
//要讓移動(dòng)端支持createjs的點(diǎn)擊等鼠標(biāo)事件時(shí)需要加上
createjs.Touch.enable(stage);
//移除事件需要特殊注意一下，移除的時(shí)候，參數(shù)不是事件函數(shù)，而是監(jiān)聽(tīng)事件的返回值。可以放在對(duì)象的一個(gè)自定義屬性上面。方便。
rect.handleClick = rect.on('click',()=>{
console.log('點(diǎn)擊事件');
});
rect.off('click',rect.handleClick);
~~~
<h3>高亮效果</h3>
~~~
//在CreateJs里面透明的地方是不響應(yīng)事件的，這樣就實(shí)現(xiàn)了事件委托。比如做一個(gè)高亮效果，直接給容器加一個(gè)事件。
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';
})
~~~
<p>效果如圖：<br><a class="fancybox" title="" href="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060211001898.gif" rel="box" data-original-title="CreateJs入門(mén)必知必會(huì)"><img class="alignnone size-full wp-image-656" title="CreateJs入門(mén)必知必會(huì)" src="http://www.zxycc.cc/wordpress/wp-content/uploads/2017/06/2017060211001898.gif" alt="CreateJs入門(mén)必知必會(huì)"></a></p>
<h2>最后要說(shuō)的</h2>
<p>最后附上幾個(gè)我之前做的demo。代碼略渣。<br>
<a class="dl" title="" href="http://zxycc.cc/demo/data/index1.html" rel="nofollow" target="_blank" data-original-title=""><span class="fa fa-external-link">demo1</span></a>
* * * * *
<a class="dl" title="" href="http://zxycc.cc/demo/data/index2.html" rel="nofollow" target="_blank" data-original-title=""><span class="fa fa-external-link">demo2（點(diǎn)擊小圓球）</span></a>
* * * * *
<a class="dl" title="" href="http://zxycc.cc/demo/data/index3.html" rel="nofollow" target="_blank" data-original-title=""><span class="fa fa-external-link">demo3</span></a>
* * * * *
<a class="dl" title="" href="http://zxycc.cc/demo/data/index4.html" rel="nofollow" target="_blank" data-original-title=""><span class="fa fa-external-link">demo4</span></a><br>
* * * * *
>[warning]剩下的就去查API吧，如果還是有些不太明白的，就看代碼，看別人寫(xiě)的或者從官方Github上面下載的壓縮包里面有demo，看看用法，結(jié)合API來(lái)學(xué)。
- 序言
- 第一章、基礎(chǔ)引擎
- 第二章、了解API，開(kāi)始寫(xiě)動(dòng)畫(huà)
- 第三章、從文檔到動(dòng)畫(huà)(1)
- demo1源碼
- demo2源碼
- demo3源碼
- demo4源碼
- 第四章、從文檔到動(dòng)畫(huà)(2)
- 第五章、從文檔到動(dòng)畫(huà)(3)
- 第六章、精靈Sprite類(lèi)和簡(jiǎn)明動(dòng)畫(huà)(1)
- 第七章、精靈圖片的制作-奔跑的馬兒
- 第八章、野人大冒險(xiǎn)（項(xiàng)目實(shí)戰(zhàn)）
- 第九章、繪制動(dòng)畫(huà)走秀
- 第十章、createjs的位圖渲染（非常重要）
- 第十一章、createjs繪制視頻
- 第十二章、createjs與animateCC協(xié)作6
- 第十三章、createjs與animateCC協(xié)作5
- 十四章、createjs與animateCC協(xié)作4
- 十五章、createjs與animateCC協(xié)作3
- 十六章、createjs與animateCC協(xié)作2
- 十七章、createjs與animateCC協(xié)作1
- 十八章、前端轉(zhuǎn)做createjs的誤區(qū)
- 十九、createjs與白鷺和laya的性能比較
- 二十、createjs近期發(fā)現(xiàn)的坑與解決辦法
- 二十一、createjs推出新版本stageGL
- 二十二、createjs強(qiáng)制橫屏方法
- 二十三、get、set以及簡(jiǎn)單的封裝
- 二十四、createjs新手教程-前端向
- 二五、阻止createjs鼠標(biāo)穿透的方法
- 二六、Creatine-createjs的游戲引擎
- 二七、createjs性能實(shí)測(cè)與性能優(yōu)化實(shí)測(cè)
- 二八、createjs手勢(shì)解鎖效果demo
- 二九、給createjs新手的一點(diǎn)建議
- 三十、createjs進(jìn)階—sprite精靈圖2
- 三一、createjs進(jìn)階—sprite精靈圖1
- 三二、createjs性能優(yōu)化(持續(xù)更新)
- 三三、createjs幀頻顯示代碼
- 三四、createjs做的移動(dòng)端展示站
- 三五、createjs進(jìn)階—createjs的OOP
- 三六、新手寫(xiě)createjs時(shí)容易遇到的坑
- 三七、createjs基礎(chǔ)教程2-flashcc
- 三八、createjs基礎(chǔ)教程1-flashcc
- 三九、stagegl的用法介紹和注意事項(xiàng)
- 四十、stagegl性能實(shí)測(cè)
- 四一、算法的藝術(shù)（附算法特效demo）
- 四二、來(lái)一波硬貨，常用類(lèi)
- 四三、面向canvas，更加簡(jiǎn)單的自適應(yīng)方式
- 思思、再講講自適應(yīng)-移動(dòng)端自適應(yīng)
- 四五、有關(guān)遮罩和圖層疊加的問(wèn)題（附刮刮卡demo）