使用EaselJS与TweenJS时hsdissolve函数异常及TypeError问题排查

我来帮你拆解代码里的问题，这些问题正是导致你遇到TypeError: createjs.Ticker.removeEventListener(...) is undefined以及hsdissolve函数执行不完整的原因：

1. 低级拼写错误导致事件找不到 #

你在hsdissolve和tick函数里把Ticker的标准事件名"tick"写成了"trun"——这可是致命的笔误！

// 错误写法，事件名拼写错误
createjs.Ticker.addEventListener("trun", stage, false);
// 正确写法应该是
createjs.Ticker.addEventListener("tick", stage, false);

同样，tick函数里移除事件的代码也要修正事件名：

// 错误写法
createjs.Ticker.removeEventListener("trun", stage, false);
// 正确写法
createjs.Ticker.removeEventListener("tick", stage, false);

因为Ticker根本不认识"trun"这个事件，当你尝试移除它时自然会抛出未定义错误。

2. 给Text绑定了不存在的"run"事件 #

你给Tneu（Text实例）绑定了"run"事件，但EaselJS里的DisplayObject子类（比如Text、Bitmap）根本不会触发这个事件——这部分逻辑完全走不通：

// 错误写法，Text没有run事件
Tneu.addEventListener("run", function(){
  createjs.Tween.get(Tneu).to({ alpha: 1 }, 1000).call(tick);
});

如果你想让Tneu在hsdissolve执行后直接淡入，直接启动Tween动画就行，不需要绑定这个不存在的事件：

// 正确写法：直接启动淡入动画
createjs.Tween.get(Tneu).to({ alpha: 1 }, 1000).call(tick);

3. Ticker监听冗余，没必要重复绑定 #

你在初始化流程里已经给Ticker绑定了stage的tick事件：

createjs.Ticker.addEventListener("tick", stage, false);

在hsdissolve里再次绑定同一个监听完全是冗余操作，还可能导致重复渲染，建议删掉这行重复代码。

修正后的核心代码片段 #

这里是修正后的hsdissolve和tick函数：

function hsdissolve() {
  // 如果确实需要移除之前的tick监听，用正确的事件名即可
  // createjs.Ticker.removeEventListener("tick", stage, false);
  var Tneu = new createjs.Text("Neu", "36px Arial", "#777");
  Tneu.alpha = 0;
  stage.addChild(Tneu);
  stage.update();
  // 直接启动淡入动画，无需绑定不存在的事件
  createjs.Tween.get(Tneu).to({ alpha: 1 }, 1000).call(tick);
}

function tick() {
  // 移除tick监听（如果业务上需要的话）
  createjs.Ticker.removeEventListener("tick", stage, false);
}

额外小提示 #

• 记得打开浏览器开发者工具（F12）的控制台，这里会显示详细的错误栈，能帮你快速定位拼写、事件绑定这类低级问题。
• EaselJS的Ticker默认会驱动TweenJS的动画，只要你初始化了Ticker，Tween的动画会自动运行，不需要给显示对象额外绑定奇怪的事件~

内容的提问来源于stack exchange，提问作者Orion