Javascript 使用ajax加载重新加载canvas createjs/easeljs动画会导致分层或显示问题

Javascript 使用ajax加载重新加载canvas createjs/easeljs动画会导致分层或显示问题,javascript,jquery,animation,canvas,createjs,Javascript,Jquery,Animation,Canvas,Createjs,我有一个用createjs创建的画布动画。整个动画脚本(包括init()函数)是通过页面加载上的jquery:$.getScript()加载的 然后运行下面包含的init()和handlecomplete()函数,将动画附加到页面上的html画布元素 var canvas, stage, exportRoot, audio; var tweens = []; function init() { canvas = document.getElementById("canvas"); im

我有一个用createjs创建的画布动画。整个动画脚本(包括init()函数)是通过页面加载上的jquery:$.getScript()加载的

然后运行下面包含的init()和handlecomplete()函数,将动画附加到页面上的html画布元素

var canvas, stage, exportRoot, audio;
var tweens = [];

function init() {
  canvas = document.getElementById("canvas");
  images = images||{};

  if (stage) {
    stage.enableDOMEvents(false);
    stage.removeAllChildren();
    createjs.Ticker.removeAllEventListeners()
    stage.enableDOMEvents(true);
  }
  if (audio ) {
        audio.stop();
  }
  removeTweens();
  exportRoot = null;
  audio = null;
  stage = null;


  var loader = new createjs.LoadQueue(false);
  loader.installPlugin(createjs.Sound);
  loader.addEventListener("fileload", handleFileLoad);
  loader.addEventListener("complete", handleComplete);
  loader.loadManifest(lib.properties.manifest);

}

function handleComplete() {

  exportRoot = new lib.animation2();
  stage = new createjs.Stage(canvas);   
  stage.addChild(exportRoot);
  stage.update();

  stage.canvas.width = 1280;
  stage.canvas.height = 720;
  resizeToFit();
  stage.update();

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

  if (lib.properties.audiovolume) {
    audio = createjs.Sound.play("audio", createjs.Sound.INTERRUPT_EARLY, 0, 0, -1, lib.properties.audiovolume);
  }
  exportRoot.gotoAndPlay(startFrame );
}
我的问题是,当用户进行更改时,我们使用返回更新脚本的相同jquery方法再次加载脚本。然后init()函数正确执行,新动画正确播放,但是我们的动画文本(使用下面的animateText)不会出现在画布上。此函数还与其他函数一起动态加载

检查tween阵列时,将根据需要创建和删除它们,但它们不可见

它们要么在新动画后面分层,要么没有附加到新画布或其他东西

只需刷新页面,即可正确加载新脚本和文本。那么很明显脚本的动态加载中有什么东西

var animateText = function(localString, startX, startY, letterClip, endObject, font, color) {
  var waitAmount = 0;
  var offSetAmount = 20;

  for(var i = 0; i < localString.length; i++){
    var fl_MyInstance = new letterClip();
    fl_MyInstance.localName.text = localString[i];
    if(font != null){
        fl_MyInstance.localName.font = font;
    }
    if(color != null){
        fl_MyInstance.localName.color = color;
    }
    var localX = startX;
    var localY = startY;

    fl_MyInstance.x = startX + offSetAmount;
    var beginX = startX + offSetAmount
    offSetAmount = offSetAmount - 4
    fl_MyInstance.y = startY;
    fl_MyInstance.alpha = 0;
    fl_MyInstance.scaleX = 0.1;
    fl_MyInstance.scaleY = 0.1;
    var bounds = fl_MyInstance.getBounds();
    startX += bounds.width + 0;

    var target = fl_MyInstance;
    var tween = createjs.Tween.get(target, {
        loop: false
    }).wait(waitAmount)
    .to({
        x: localX,
        y: localY,
        alpha: 1,
        scaleX: 1,
        scaleY: 1
    }, 400, createjs.Ease.circOut);

    tween.waitAmount = waitAmount;
    if(endObject == null){
        tween.endObject = {
        x: localX,
        y: localY,
        alpha: 0,
        scaleX: 0.1,
        scaleY: 0.1
        }
    } else {
        tween.endObject = {
            x: localX - endObject.x,
            y: localY - endObject.y,
            alpha: endObject.alpha,
            scaleX: endObject.scaleX,
            scaleY: endObject.scaleY
        }
    }

    tween.targetClip = fl_MyInstance;
    tween.arrayIndex = tweens.length;
    tweens.push(tween);
    waitAmount += 20;

    stage.addChild(fl_MyInstance);
  }
}

var removeTweens = function(){
  for(var i = 0; i<tweens.length; i++){
    if(tweens[i] != null){
        var tween = tweens[i];
        stage.removeChild(tween.targetClip);
        tweens[tween.arrayIndex] = null;
    }
  }
}

var closeTweens = function(){
  for(var i = 0; i<tweens.length; i++){
    if(tweens[i] != null){
        var tween = tweens[i];
        createjs.Tween.get(tween.targetClip, {
            loop: false
        }).wait(tween.waitAmount).to(tween.endObject, 400, createjs.Ease.circOut).call(function(){
            stage.removeChild(tween.targetClip);
            tweens[tween.arrayIndex] = null;
        });
    }
  }
}

var finalTweens = function(){
  for(var i = 0; i<tweens.length; i++){
    if(tweens[i] != null){
        var tween = tweens[i];
        createjs.Tween.get(tween.targetClip, {
            loop: false
        }).to(tween.endObject, 400, createjs.Ease.circOut);
    }
  }
}
var animateText=函数(localString、startX、startY、letterClip、endObject、字体、颜色){
var waitAmount=0;
var offSetAmount=20;
for(var i=0;i