許多顏色選擇後，動畫的性能和速度非常緩慢

Question

我製作了一個animation使用html canvas和一個顏色選擇器，您可以在其中更改動畫的兩種顏色，但如果我多次更改顏色，我的動畫播放非常好慢。如何解決這個問題？

var canvas, stage, exportRoot; 
 
var colorArray = ["#f4ed94", "#eef5db", "#c7efcf", "#a9d18e", "#78cbcf",' 
 
    "#5eb3d6", "#bdd7ee", "#af90a9", "#ffc7df", "#ff5a5f", "#e88873", 
 
    "#c4c4c4", "#ffffff", "#6e6460", "#464647"]; 
 

 
function init() { 
 
    canvas = document.getElementById("canvas"); 
 
    handleComplete("", ""); 
 
} 
 

 
    //for Giftbox 
 
    //When Giftbox color change slider is dragged 
 

 
function giftRangeChange(value) { 
 
    var newValue = parseInt(value); 
 
    handleComplete(colorArray[newValue], ""); 
 
} 
 

 
    //When Giftbox color box is clicked 
 

 
function giftColourClick(value) { 
 
    handleComplete(colorArray[value], ""); 
 
    console.log(document.getElementById("gift-range").value); 
 
    document.getElementById("gift-range").value = value; 
 
} 
 

 
    //for ribbon 
 
    //When ribbon color change slider is dragged 
 

 
function ribbonRangeChange(value) { 
 
    var newValue = parseInt(value); 
 
    handleComplete("", colorArray[newValue]); 
 
} 
 

 
    //When ribbon color box is clicked 
 

 
function ribbonColourClick(value) { 
 
    handleComplete("", colorArray[value]); 
 
    document.getElementById("ribbon-range").value = value; 
 
} 
 

 
function handleComplete(box, ribbon) { 
 
    if (box !== "") { 
 
    lib.properties.boxColor = box; 
 
    } 
 
    if (ribbon !== "") { 
 
    lib.properties.ribbonColor = ribbon; 
 
    } 
 

 
    exportRoot = new lib.gifbox(); 
 

 
    stage = new createjs.Stage(canvas); 
 
    stage.addChild(exportRoot); 
 
    stage.enableMouseOver(); 
 

 
    createjs.Ticker.setFPS(lib.properties.fps); 
 
    createjs.Ticker.addEventListener("tick", stage); 
 

 
    (function(isResp, respDim, isScale, scaleType) { 
 
    var lastW, lastH, lastS = 1; 
 
    window.addEventListener('resize', resizeCanvas); 
 
    resizeCanvas(); 
 

 
    function resizeCanvas() { 
 
     var w = lib.properties.width, 
 
     h = lib.properties.height; 
 
     var iw = window.innerWidth, 
 
     ih = window.innerHeight; 
 
     var pRatio = window.devicePixelRatio || 1, 
 
     xRatio = iw/w, 
 
     yRatio = ih/h, 
 
     sRatio = 1; 
 

 
     if (isResp) { 
 
     if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) { 
 
      sRatio = lastS; 
 
     } else if (!isScale) { 
 
      if (iw < w || ih < h) 
 
      sRatio = Math.min(xRatio, yRatio); 
 
     } else if (scaleType == 1) { 
 
      sRatio = Math.min(xRatio, yRatio); 
 
     } else if (scaleType == 2) { 
 
      sRatio = Math.max(xRatio, yRatio); 
 
     } 
 
     } 
 
     canvas.width = w * pRatio * sRatio; 
 
     canvas.height = h * pRatio * sRatio; 
 
     canvas.style.width = w * sRatio + 'px'; 
 
     canvas.style.height = h * sRatio + 'px'; 
 
     stage.scaleX = pRatio * sRatio; 
 
     stage.scaleY = pRatio * sRatio; 
 
     lastW = iw; 
 
     lastH = ih; 
 
     lastS = sRatio; 
 
    } 
 
    })(false, 'both', false, 1); 
 
}

enter link description here

Answer 1

我設法解決這個問題。我剛剛使用removeEventListener編輯了函數handleComplete（box，ribbon），並在清除舞臺之後刪除了以前的顏色值。感謝其他解決方案。

function handleComplete(box, ribbon) { 
 
\t \t \t 
 
       if (box !== "") { 
 
        lib.properties.boxColor = box; 
 
       } 
 
       if (ribbon !== "") { 
 
        lib.properties.ribbonColor = ribbon; 
 
       } 
 
\t \t \t \t 
 
createjs.Ticker.removeEventListener("tick", stage); 
 
       exportRoot = new lib.gifbox(); 
 

 
       stage = new createjs.Stage(canvas); 
 
\t \t \t \t stage.clear(); 
 
\t \t \t  
 
\t \t \t 
 
       stage.addChild(exportRoot); 
 
       stage.enableMouseOver(); 
 
       createjs.Ticker.setFPS(lib.properties.fps); 
 
       createjs.Ticker.addEventListener("tick", stage);