Adobe Animate CC Canvas Mausaktionen auf der Bühne sind lückig und intermittierend

Question

In Adobe Animate CC HTML5 Canvas (createJS), ich versuche, etwas sehr einfaches zu tun, um einen animierten Rollover auszulösen, wenn die gesamte Phase einer Anzeige moused over ist und einen animierten Rollout auszulösen, wenn die Maus die Bühne verlässt. Es sollte sehr einfach sein, aber das ist es nicht. Die Verwendung von mouseenter und mouseleave auf der stage ist verzögert und funktioniert nur zeitweise. Es ist das gleiche mit mouseover und mouseout.

Hier ist der Code, der laggy und intermittierender ist:

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"); 
} 

Ich habe auch versucht mouseover und mouseout auf die gesamte Größe der Bühne Taste und ich habe das gleiche Problem. (Dies funktioniert auch nicht innerhalb eines Frames und die Anzeige wird in einem Frame geschaltet). Ich legte den var frequency Weg bis zu 90, um zu sehen, ob das mit der Verzögerung helfen würde, tat es nicht.

Das war der einfache mouseover/mouseout Code, den ich versuchte: „Sie überwachen können, ob der Zeiger über die Leinwand unter Verwendung stage.mouseInBounds UND die mouseleave/mouseenter Ereignisse ist“

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

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

Auf den createJS website es sagt Ich frage mich also, ob die Verwendung von stage.mouseInBounds helfen wird (aber ich kann nirgendwo ein Beispiel finden, wie man es benutzt). Aber ich glaube eigentlich nicht, dass es helfen wird, weil ich denke, dass das ganze Problem ungefähr createJS ist, nicht lesend, wo die Maus schnell genug ist.

Kann jemand diese Lagginess und intermittierende Zündung beheben? Eine Arbeit herum? Warum überwacht createJS die mouse events nicht ständig wie reine js?

Auch mouseenter und mouseleave auf der Bühne in createJS funktionieren nicht auf Tablets oder Mobile und das ist ein Problem, so wäre es besser, dies zu tun mit mouseover und mouseout auf Knopfdruck die gesamte Größe der Bühne. Ich habe versucht, mouseover und mouseout und 3 Pixel Abstand um den Knopf zwischen dem Rand des Knopfes und der Kante des Werbebanners, dies half, aber es war immer noch intermittierend.

Ihre Gedanken und Ideen bitte.

Answer 1

Mouseover-Prüfungen sind teuer. Ein Canvas ist im Grunde nur eine Bitmap, also kann EaselJS keine Mausereignisse aus dem Browser verwenden (Sie erhalten nur einen für den gesamten Canvas). Stattdessen erfordert mouseover in EaselJS, dass jedes Element zu einem 1x1-Pixel-Canvas gezeichnet und dann auf Füllung überprüft wird. Dies ergibt eine pixelgenaue Erkennung, ist jedoch kostspielig, wenn Sie entweder viel Inhalt prüfen oder zu oft prüfen.

Reduzieren Sie Ihre Frequenz: Es sieht aus wie Sie eingestellt haben, die frequency bis 90. Das ist wirklich hoch (11 ms zwischen den Prüfungen, die im Grunde 90 fps zu erreichen versucht). Der Standardwert ist 10, was langsamer ist als eine gute Framerate, aber schnell genug, um schnell zu reagieren. Sie können es wahrscheinlich auf 20 oder so reduzieren, um Ihnen einen peppigen Check zu geben, ohne dass es unnötig hoch ist.

Interaktivität ändern: Eine andere Sache, die Sie tun können, ist genau herauszufiltern, was überprüft wird.Standardmäßig werden alle Anzeigeobjekte überprüft, aber Sie können dies reduzieren, indem Sie vonmouseEnabled auf alles, was Sie nicht kümmern (auslassen von der Prüfung), und von auf Container, die Sie behandeln möchten, drehen als ein einzelnes Objekt (so etwas wie eine komplexe Schaltfläche wird einmal gezeichnet, anstatt dass alle Inhalte einzeln gezeichnet werden).

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

Hoffe, dass hilft!