许多颜色选择后，动画的表现和速度非常慢

Performance and speed of animation is very slow after many colours selection

本文关键字：速度 非常 选择 颜色 动画 许多      更新时间：2023-09-26

我用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);
}

输入链接描述

我设法解决了这个问题。我只是使用removeEventListener编辑了函数handleccomplete (box, ribbon)，然后清除了舞台，所以我删除了以前的颜色值。谢谢你的其他解决方案。

function handleComplete(box, ribbon) {
			
                if (box !== "") {
                    lib.properties.boxColor = box;
                }
                if (ribbon !== "") {
                    lib.properties.ribbonColor = ribbon;
                }
				
createjs.Ticker.removeEventListener("tick", stage);
                exportRoot = new lib.gifbox();
                stage = new createjs.Stage(canvas);
				stage.clear();
			   
			 
                stage.addChild(exportRoot);
                stage.enableMouseOver();
                createjs.Ticker.setFPS(lib.properties.fps);
                createjs.Ticker.addEventListener("tick", stage);

相关文章：