轉載於：http://www.ajexoop.com/wordpress/?p=85&replytocom=592
感謝此作者
新手寫createjs一定會遇到很多的坑，下面我來講下常見的坑和解決方法，大家可以經常來看看這篇文章，本人會持續更新！
1.按鈕的alpha值不能為0:
在做flash的時候很多人會弄一個alpha值為0的按鈕放在圖片上代替圖片按鈕點擊，以減少項目的大小。但是在createjs中所有對象 alpha為0時都不受任何鼠標事件影響。不過解決起來也非常容易，alpha設為%1（0.01）就可以了（設置hitArea也可以，而且更方便）。
2.項目中有使用引導層 必須在初始化中寫上createjs.MotionGuidePlugin.install();
這個就不用多說了 如果項目中的動畫有用到引導層 初始化的時候加上這句話就可以了。
3.項目中使用音樂時 必須在加載時寫上loader.installPlugin(createjs.Sound);
這個也不多解釋同上。
4.用到mouseOver事件的時候需要加一句stage.enableMouseOver();要讓移動端支持createjs的點擊等鼠標事件時需要加上createjs.Touch.enable(stage);
5.js function 內部的this指向和as3是不一樣的，需要額外保存this。
|
1
2
3
4
5
6
7
|
xx.addEventListener(
"click"
,
function
(){
this
.xxxx()
//這是錯誤的
})
var
_this =
this
;
xx.addEventListener(
"click"
,
function
(){
_this.xxxx()
//這是正確的
})
|
6.跨域錯誤（一般錯誤信息中有顯示cross-domain都是跨域錯誤，新手常發生在點擊和加載的時候，我不說很多新手甚至不知道這是跨域錯誤），先排查地址是不是在線上或者本地環境中的，地址是http或者https開頭就是在線上，local開頭就是本地模擬環境，file開頭就是以文件模式打開，chrome會默認阻止訪問本地圖片，所以file開頭就會跨域。排除環境問題，如果還是跨域就讓后台改權限。如果排除環境問題，點擊的時候還是跨域，那就這么處理，如果是animateCC就在上面蓋一層alpha為1%的元件，如果是線上點擊跨域就這么寫：
var hitArea = new createjs.Shape();
hitArea.graphics.beginFill("#000").drawRect(0,0,100,100);//這里的大小為圖片大小，請自己調整
bitmap.hitArea = hitArea;
7.圖片的名字不能與原件類鏈接名相同 （后綴名不同也算相同）,fla的名字不能和元件的類鏈接名相同，不然new對象的時候會new成別的對象，從而顯示錯誤或者什么都不顯示。
8.效率方面的優化，注重項目加載速度時多用矢量 注重項目體驗與動畫流暢時多用位圖，現因為國產舊手機多對矢量支持不好，特別是安卓，還是多用位圖吧，png用工具優化，推薦使用https://tinypng.com/，如果硬要用矢量，或者濾鏡，或者疊加模式，可以使用SpriteSheetBuilder類優化，詳細教程點擊這里。
9.CC生成的對象不能用createjs的方法繼承，需要特殊繼承。
10.tween在MoiveClip的timeline的運行會從毫秒計算變成幀計算，如wait（1）-幀 ，wait（1000）-毫秒。
11.animateCC如果要使用資源整合sprite表功能，請把png和jpg分開，因為不分開會很大（flashcc沒有這個功能所以別用），動畫素材的整合大小不要大於1000*1000，因為createjs的bug，整合拆分也算作整合的大小，然而圖片越大性能越差，最后整合就會比不整合卡很多（但是也不能不整合，小圖片多了，就算開多線程加載，加載速度也很慢），不動的素材，比如背景圖可以稍微大點，但注意也不能太大，任何素材太大都會被瀏覽器強制縮小，如果必須要大圖，就拆成幾個小圖，下面是推薦設置：
12.createjs偵聽點擊事件是會穿透的，也就是在上面掩蓋東西是無效的，不過也有辦法解決，在掩蓋對象上面放一個空的點擊偵聽就可以了。
13.動畫過多微信上切換程序后切回會掉幀，某些版本手機會出現，某些版本微信會直接關掉瀏覽器再打開就不會掉幀，當然這不是createjs的原因，因為css動畫也會出現這個問題，是整個瀏覽器的幀頻掉了（如果有大佬發現什么可以解決這個bug的方法請留言，謝謝，不過貌似最近微信修復了這個BUG）
14.如果出現無法跳幀，把MC的autoReset設置為false就好了，如果還不行setTimeout延時跳幀或者把跳幀代碼寫到第二幀。
(一般無法跳幀是MC還未初始化完成就跳幀導致的，這種情況一般是延時跳幀setTimeout就可以了，也有一種情況是跳幀的時候mc還不在舞台上，alpha值為0，visible為false，等原件不能呈現的情況，如果是這種情況那就設置MC的autoReset為false就可以了)
15.使用animateCC項目間粘貼資源的時候，如果有類鏈接，需要重新賦予一遍，否則不會被導出。
16.使用animateCC做遮罩層的時候，遮罩層只能有一個元件，並元件內部不能有元件動畫，不能有超過一幀，否則會被提示 不支持的功能:遮罩中有多幀符號。
17.graphics在使用moveTo lineTo時如果異步畫線需要重新設置樣式
比如：
|
1
2
3
4
5
6
7
|
var
shape =
new
createjs.Shape();
container.addChild(shape);
shape.graphics.setStrokeStyle(2).beginStroke(
"#000000"
);
shape.graphics.moveTo(0,0);
shape.graphics.lineTo(100,100);
shape.graphics.lineTo(200,150);
shape.graphics.lineTo(300,50);
|
這樣是對的 可以只設置一個style然后不停的lineTo下去，但是如果setTimeout或者click后再畫就不行了，比如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
shape =
new
createjs.Shape();
container.addChild(shape);
shape.graphics.setStrokeStyle(2).beginStroke(
"#000000"
);
shape.graphics.moveTo(0,0);
shape.graphics.lineTo(100,100);
shape.graphics.lineTo(200,150);
shape.graphics.lineTo(300,50);
setTimeout(
function
(){
// shape.graphics.lineTo(400,300);//這里直接lineTo雖然顏色不會變但是粗細就變了，不知道是不是createjs的BUG
shape.graphics.setStrokeStyle(2).beginStroke(
"#000000"
);
//這樣重新設置樣式后就沒問題了
shape.graphics.moveTo(300,50);
shape.graphics.lineTo(400,300);
},2000)
|
18.直接使用animateCC發布功能導出sprite圖，圖與圖之間會有1像素間隔，有時候會在項目圖片的邊框上出現底色，
解決辦法：animateCC發布設置-》sprite表-》jpeg設置-》最大大小設置為1 也就是說jpg圖不融合sprite，png沒關系，因為png是透明的，沒有底色。
19.項目圖片模糊，多半是移動端沒有做2倍像素，PC端多半是自適應出問題了，詳細教程可以看：
關於自適應的那點事
20.一段時間點狂點click事件會掉幀，換成mousedown就好了。
21.animateCC軟件中圖片模糊。
右鍵庫里的圖片，把允許平滑關掉（關掉后縮放可能會出現鋸齒，這個是CC的情況，因為原來flash的機制是這樣的，canvas項目導出后是不會有的）
22.在animateCC做補間的時候，先把圖片或者矢量變成影片剪輯再做，不然導出的代碼量會變大，還有可能會出問題。
23.在animateCC遮罩里做補間時，由於animateCC為了兼容，對象都是放在時間軸addTween而不是addChild，所以會出現一大堆矢量代碼，如果有代碼潔癖的，可以把這個功能用代碼寫，而不用animateCC。
24.使用createjs.Ticker.timingMode = createjs.Ticker.RAF會使程序快很多，但是幀頻會變得不可控。使用createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;時注意FPS設置的比預期高一點，比如你要幀頻30就要設置成40。因為RAF的機制一但30到不了他就降級，30的下一級就是20,會造成程序慢很多。
25.animateCC不支持濾鏡緩動，如果要使用濾鏡緩動需要自己寫代碼，比如這樣：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
</
head
>
<
body
>
<
canvas
id
=
"canvas"
width
=
"600"
height
=
"400"
></
canvas
>
<
script
src
=
"createjs-1.0.0.min.js"
></
script
>
<
script
>
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas)//不用stagegl也行就是慢點
// var stage = new createjs.StageGL(canvas)//用stagegl性能會好不少 但是會有背景色 需要自己拿底遮
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000")
shape.graphics.drawRect(0,0,250,120);
shape.graphics.endFill();
stage.addChild(shape);
shape.x = 100;
shape.y = 100;
var blurFilter = new createjs.BlurFilter(5, 5, 1);
shape.filters = [blurFilter];
createjs.Tween.get(blurFilter).to({'blurX':40,'blurY':40},2000)
createjs.Ticker.framerate = 60;
createjs.Ticker.addEventListener("tick",function (){
stage.update();
shape.cache(-40, - 40, 250 + 80, 120 + 80);
})
</
script
>
</
body
>
</
html
>
|
26.stagegl能大幅度提升性能，但是須要避免使用矢量，遮罩，濾鏡，疊加方式等，因為使用這些stagegl須要不停的cache，這樣對性能的消耗非常大（實在要用，使用SpriteSheetBuilder渲染后使用）
27.如果再使用animateCC2018或者蘋果系統使用animate時出現Uncaught ReferenceError: lib is not defined的錯誤，請看這篇文章
animateCC2018及蘋果使用animateCC使用須知（必看）
28.如果顯示對象上的子集過多，會造成createjs的點擊變卡，解決辦法1：新建1個shape來點擊，2：用hitarea定義點擊對象且該對象的子集也不能很多，可以使用shape，3：改用touch事件
29.如果要在animateCC的第一幀上寫代碼，且這個movieclip只有一幀，也需要在第一幀上加this.stop()，不然上面的代碼會不停的調用（createjs1.0版本的bug，2015版本沒有）。
30.之前flash中的元件的name等於他影片剪輯的名稱，但是canvas項目並不是，canvas項目影片剪輯的名稱只是他父對象的一個屬性而已，並不包括名稱，也就是並不能用if(e.target.name==xx)這樣來判斷，也不能用getChildByName來獲取。
31.stagegl中使用cache運行遮罩，濾鏡，疊加模式時，需要套一層container，在container上cache。
32.animateCC中如果使用濾鏡變化（就是濾鏡數值不同，或者從無到有），animateCC是不會導出濾鏡的，這時候很容易讓人有種無法跳幀的錯覺，其實不是無法跳幀，是根本沒有導出有關濾鏡的代碼，這么做的原因是為了保護性能，那怎么解決這個問題呢？很簡單，就是把濾鏡做成一張圖片放進去就好了。
33.想要濾鏡，alpha只在父容器應用而不在子容器應用，把父容器cache一下就好了（容器alpha后子容器的不透明度會疊加，造成整個顯示對象不透明度不同的情況，設置cache可以解決）
34.項目莫名在30幀上不去或者莫名卡的的時候，看看是不是開了省電模式，很多時候關掉省電模式幀頻又能上去。
35.在animateCC中，as3項目的圖片平滑，在html5項目中並不起作用，createjs也沒有直接提供平滑的api，但是我們可以自己做，參考：http://www.ajexoop.com/wordpress/?p=1167
36. var loader = new createjs.LoadQueue(true); 加載大量素材時必須啟用xhr模式，也就是參數里面寫true，否則加載時間過長會報錯。
37.在使用DOMElement的時候，如果dom會超過屏幕本身，請在dom外面加個div容器，並限制它的寬度，不然會出現自適應問題，設置如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
style
>
*{
margin: 0;
padding: 0;
}
body{
overflow-x:hidden;
}
.ui-con{
width: 750px;height:1334px;overflow: hidden;position: absolute;pointer-events: none;
}
.code{
position: absolute;left: -999px;pointer-events: auto;
}
</
style
>
<
div
class
=
"ui-con"
>
<
img
id
=
"code"
src
=
"images/code.png"
class
=
"code"
>
</
div
>
<
canvas
id
=
"canvas"
width
=
"750"
height
=
"1334"
></
canvas
>
<!--上面代碼中img就是需要設置成DOMElement的dom對象，div就是他的容器，css我設置了長寬，使它不超出限制，以防止自適應出問題，除此我還拿掉了他的鼠標響應以防止canvas的鼠標響應失效-->
|
38.如果你要在animateCC中寫代碼，並訪問根容器就訪問這個對象exportRoot，exportRoot相當於as3的root。
39.如果你的顯示對象是用animateCC做的，你可以用mc.nominalBounds.width,mc.nominalBounds.height來訪問長寬，但是只能訪問不能控制，也就是只讀的。
40.操作bitmap時，很多api需要在bitmap的image已經加載完成的情況下使用，所以萬一你出現了與你預期不同的情況，多半是image還沒有加載完成，你可以這樣解決：
|
1
2
3
4
|
var
bitmap =
new
createjs.Bitmap(
"xxx/xx.jpg"
);
bitmap.image.onload =
function
(){
//在這里寫操作邏輯，或者寫好操作邏輯在這里調用
}
|
41.在animateCC里使用組件功能時報jquery的錯，就多刷新保存幾下。
42.animateCC中組件操作代碼和一般對象操作代碼完全不一樣，詳細打開animateCC的代碼片段參閱(其實常用的代碼，代碼片段里都有，代碼片段的位置參考下圖)。
43.如果要操作animateCC元件中子元件的坐標與大小，請設置好這個點（按Q可以設置），這個點相當於代碼中的注冊點regX，regY，createjs的默認注冊點在左上角，而animateCC在中間，這個要記住。還有子元件在animateCC中，坐標是根據左上角來算的，但是發布后代碼是根據注冊點加位置算的坐標，這個很容易搞錯。
44.有部分素材或者動畫顯示不出來？看看是不是打散和資源合並sprite表功能一起用了。如果是選擇其中一個，推薦選擇合並sprite表，然后把打散的資源轉位圖（這里是推薦，具體還要看項目）
45.項目需要加載多個fla的時候，需要區分命名空間，2018只需要區分adobeid（不會弄就不要弄多個fla，放在一個fla中）
46.連續畫圖需要閉合路徑，圓需要額外的重置繪制點，具體做法看下面代碼，詳細解釋看文章：http://www.ajexoop.com/wordpress/?p=477
|
1
2
3
4
|
stage.addEventListener(
"stagemousedown"
,
function
(event){
shape.graphics.drawCircle(event.rawX,event.rawY,10).closePath();
shape.graphics.drawCircle(0,0,0).closePath();
});
|
47.animateCC的canvas項目中，遮罩層上的元件是不能通過代碼用元件名控制的，而是用mask，mask_1這個名字獲取控制（神奇的設定）
48.不要用resize事件來判斷瀏覽器長寬，因為很多設備resize之后瀏覽器長寬變化是會延時的，解決辦法為要不延時判斷，要不一直判斷比如定時器（這個bug不是createjs的坑，是手機瀏覽器的坑）
49.在使用shape繪圖的時候不要再drawXXX中賦值坐標，而是在drawXXX中參數選擇0,0 然后在x y當中賦值坐標。詳細解釋文章：http://www.ajexoop.com/wordpress/?p=1310
50.如果元件要命名，一定要在所有關鍵幀上都命名，並且要命名一模一樣，不然不僅有時候代碼會調用不到，還會出現畫面一閃的bug。
51.animateCC有時候會出現發布后的素材大小和編輯的時候不一致，或者說之前刪掉的素材又出現了。這個bug是animateCC的，至今原因不明，替換素材的時候有幾率產生，估計是animateCC緩存的資源並沒有被替換造成的，如果出現這個bug，你新建一個fla把素材全部考過去重新發布就可以了，如果不確定是不是這個原因，你可以先用這個方法測一下，素材是否恢復。
52.LoadQueue的setMaxConnections方法可以開啟多線程加載，加快加載速度，但是用setMaxConnections開啟多線程加載的時候，必須讓maintainScriptOrder=false，否則多線程還是不會開啟。
53.把顯示對象設置cursor = "pointer"或者直接使用ButtonHelp會自動給canvas的css設置cursor:"pointer",會在移動端造成整個canvas閃一下，設置createjs.Touch.enable(stage) 可以修復這個bug，如果遇到createjs.Touch.enable(stage) 不能設置的時候（比如需要在dom層滾動），把cursor 設置為"auto"，反正移動端不需要手型指針。
54.canvas或者圖片寬高超過4000左右就會出問題，特別是canvas不是說舞台設置不超過4000就沒事，需要計算手機的分辨率。比如你的anCC或canvas設置是720*2800，看似沒有超，但是如果是全面屏手機寬度是1125，自適應后分辨率就會變為1125*4375，就超過了，這也是為什么有些人會出現有些手機不能顯示有些手機可以顯示的bug。那么解決呢？如果圖片超過了就切開來再組合，如果是canvas超過了，需要做長圖效果，就用內部的滑動邏輯（我博客有封裝好的-》MoveControl）
這上面很多坑，本人都是花了很長時間才解決的，你們看完后馬上就能解決，可以省下很多很多時間，所以多看看，最好背下來，特別是紅字部分的！