Question

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

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按钮控制时间轴不工作

2 个答案: