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

Posted 2023-03-05

【中文标题】舞台上的 Adob​​e Animate CC Canvas 鼠标动作滞后且断断续续

【英文标题】：Adobe Animate CC Canvas mouse actions on the stage are laggy and intermittent

【发布时间】：2017-11-03 07:27:52

【问题描述】：

在 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 个像素的空间，这有帮助，但它仍然间歇性地触发。

请提出您的想法和想法。

【参考方案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 足以满足我的需要。

【讨论】：

每 150 毫秒运行一个补间不是一个好方法，在这个例子中，只要鼠标在边界内，每秒就会创建 6 个新的补间，基本上什么都不做。您可以轻松地直接利用画布元素上的本机鼠标事件（mouseover、mouseout），这样会更有效。

@Lanny, (mouseover, mouseout) 甚至比检查 stage.mouseInBounds 的一些补间更昂贵，这些补间可能什么都不做。使用 stage.mouseInBounds 跳过这些燃烧的箍的全部原因是因为在 10 次鼠标悬停之后，体验完全没有响应。也许我的示例可以优化为每次触发一次补间。您的评论“您可以轻松地直接利用画布元素上的本机鼠标事件（鼠标悬停，鼠标移出），这将更有效。”让我相信您没有阅读原始海报问题和/或没有在 Adob​​e Animate 中尝试过。

【参考方案2】：

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

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

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

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

希望有帮助！

【讨论】：

这在理论上很好，但实际上它不起作用。我试过你的建议。问题在于 mouseenter、mouseleave、mouseover 和 mouseout 对画布的负担过重。当资金到位时，唯一能缓解性能下降的就是 stage.mouseInBounds。我很确定这个问题不仅与 Adob​​e Animate 或 createJS 相关，而且与 html5 Canvas 相关。尽管如此，这种情况下的问题正在发生，并且在 Adob​​e Animate 中得到了缓解。