用于控制时间轴的多个 ADOBE ANIMATE CC 按钮不起作用

Question

我必须控制 html5 canvas 动画的时间轴。我制作了所有按钮并编辑了所有代码。奇怪的是，所有按钮都执行相同的功能。

this.stop()
//---------------------------------------------------------//
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    this.gotoAndPlay(32);
}

//---------------------------------------------------------//

//---------------------------------------------------------//
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));
}
function fl_MouseClickHandler()
{
    this.gotoAndPlay(212);
}

Answer 1

请阅读function hoisting；函数语句被提升到范围的顶部，因此您的代码等同于

function fl_MouseClickHandler() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandler() {
    this.gotoAndPlay(212);
}

...
this.stop()    
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));

一种解决方案是使用函数表达式：

var that = this;
this.letterA.addEventListener("click", function () { that.gotoAndPlay(32); });

或者如果你坚持使用bind

this.letterA.addEventListener("click", (function () { this.gotoAndPlay(32); }).bind(this));

Answer 2

据我所知，您将同一个函数绑定到两个不同的按钮单击事件。您对同一功能有两个不同的定义。一个很可能被另一个覆盖，因此两个按钮都将调用 fl_MouseClickHandler，后者将调用具有相同时间戳的 gotoAndPlay。

快速修复可能只是更改 fl_MouseClickHandler 的名称：

function fl_MouseClickHandlerA() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandlerB() {
    this.gotoAndPlay(212);
}

this.letterA.addEventListener("click", fl_MouseClickHandlerA.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandlerB.bind(this));

此外，您应该注意如何使用 "this"，因为您的想法可能不在范围之内。

用于控制时间轴的多个 ADOBE ANIMATE CC 按钮不起作用

multiple ADOBE ANIMATE CC buttons to control the timeline not working

html

javascript

animate-cc