舞台上的 Adob​​e Animate CC Canvas 鼠标动作滞后且断断续续

Question

在 Adob​​e Animate CC HTML5 Canvas (createJS) 中，我正在尝试做一些非常简单的事情，当广告的整个阶段为 moused over 时触发动画滚动，并在鼠标离开时触发动画滚动舞台。它应该很简单，但事实并非如此。在stage 上使用mouseenter 和mouseleave 是滞后的，只能间歇性地工作。 mouseover 和 mouseout 也是一样。

这是滞后且断断续续的代码：

stage.addEventListener("mouseenter", fl_MouseOverHandler.bind(this));
stage.addEventListener("mouseleave", fl_MouseOutHandler.bind(this));

function fl_MouseOverHandler(){
    this.btnOverAnim.gotoAndPlay("on");
}

function fl_MouseOutHandler(){
    this.btnOverAnim.gotoAndPlay("off");
}

我还在整个舞台大小的按钮上尝试了mouseover 和mouseout，但我遇到了同样的问题。 （同样以这种方式在框架内根本不起作用，并且广告是在框架内提供的）。我将var frequency 设置为90 看看这是否有助于解决滞后问题，但没有。

这是我试过的简单的mouseover / mouseout 代码：

var frequency = 90;
stage.enableMouseOver(frequency);

this.bgCta.addEventListener("mouseover", fl_MouseOverHandler.bind(this));
this.bgCta.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

在createJS website 上显示“您可以使用stage.mouseInBounds 和mouseleave / mouseenter 事件来监控指针是否在画布上。”所以我想知道使用stage.mouseInBounds 是否会有所帮助（但我在任何地方都找不到如何使用它的示例）。但我实际上不认为这会有所帮助，因为我认为这整个问题是关于createJS 没有读取鼠标足够快的地方。

有人知道如何解决这种延迟和间歇性射击吗？解决方法？为什么 createJS 不像纯 js 那样不停地监控mouse events？

另外mouseenter 和mouseleave 在createJS 的舞台上也不能在平板电脑或移动设备上工作，这是一个问题，所以最好在按钮上使用mouseover 和mouseout整个舞台的大小。我确实尝试使用mouseover 和mouseout 并在按钮边缘和广告横幅边缘之间的按钮周围留出3 个像素的空间，这有帮助，但它仍然间歇性地触发。

请提出您的想法和想法。

Answer 1

朋友们，我知道这是 4 年前提出的问题，但 Adob​​e Animate CC V.21 中关于 mouseenter、mouseleave、鼠标悬停和mouseout。滚动/滚动 10 次后，页面变得无响应。我能够在 setInterval 上使用 stage.mouseInBounds 来缓解这种情况。原发帖人找不到例子，所以这是我做的：

// Place this in a keyframe on the timeline where the named cta exists.

setInterval(function(scope){ 
    if(stage.mouseInBounds){
        createjs.Tween.get(scope.cta).to({scaleX:1.1, scaleY:1.1}, 150);
    }
    else{
        createjs.Tween.get(scope.cta).to({scaleX:1, scaleY:1}, 150);
    }

}, 150, this );

确保将 this 作为回调函数的参数传递到 setInterval 函数的末尾，以免失去作用域。我猜这可以修改为在时间轴上使用 gotoAndPlay()，在这种情况下，CreateJS 的内置 tweener 足以满足我的需要。

Answer 2

鼠标悬停检查很昂贵。画布本质上只是一个位图，因此 EaselJS 不能使用来自浏览器的鼠标事件（您只需为整个画布获取一个）。相反，EaselJS 中的鼠标悬停需要将每个元素绘制到 1x1 像素画布上，然后检查填充。这提供了像素完美的检测，但如果您要检查大量内容或检查过于频繁，则成本会很高。

减少你的频率： 看起来您已将 frequency 设置为 90。这确实很高（检查之间为 11 毫秒，这基本上是为了达到 90 fps）。默认值为 10，这比良好的帧速率要慢，但足够快，可以感觉到响应。您可能可以将其降低到 20 左右，以便在没有不必要的高的情况下给您一个活泼的支票。

修改交互性：您可以做的另一件事是准确过滤掉要检查的内容。默认情况下，所有显示对象都会被检查——但你可以通过关闭 off mouseEnabled 任何你不关心的东西（从检查中忽略它们）来减少这种情况，然后关闭 mouseChildren 在您希望将其视为单个对象的容器上（因此像复杂按钮这样的东西只绘制一次，而不是单独绘制其所有内容）。

// Example
myBackground.mouseEnabled = false;
myButton.mouseChildren = false;

希望有帮助！