Javascript onmousemove行为

Question

我有一个画有圆圈的画布。当指针在圆圈内时，我想在画布上显示特定的动画。当指针在圆圈之外时，我希望画布恢复正常。使用运行5秒钟的animate（）创建动画。我用来检查指针跟踪器是否正常工作的代码是：

 if (context.isPointInPath(x, y)){ 
     document.getElementById("Show").innerHTML = 'inside';
    }
 else{
     document.getElementById("Show").innerHTML = 'Not inside';
 }

这似乎工作正常。当指针指向圆形时，我会打印“内部”，当指针位于圆形外部时，“内部”打印。但是，当我添加运行5秒的animate（）函数时：

 if (context.isPointInPath(x, y)){ 
     document.getElementById("Show").innerHTML = 'inside';
     xe = 10; // reset xe again
     animate();
    }
 else{
     context.clearRect(70, 0, 1000, 70);
     document.getElementById("Show").innerHTML = 'Not inside';
 }

整个行为受到影响。最初当指针在画布外面时，我会“不在里面”并且没有动画。但是一旦指针进入圆圈，我就会在“内部”达到毫秒级，动画开始，即使指针位于圆圈内，文本也会变为“不在内部”。指针离开圆圈并再次进入圆圈后，动画不会再次发生。就像指针最初进入圆圈一样，动画开始一次，整个事物都被冻结了。你能帮助我吗？感谢。

BTW动画功能：

var xe = 10;
var speed = 30;
function animate(){ 
reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ;
reqAnimFrame(animate);
if (xe >1000){
    return;
}
else{
    xe +=speed;
}
draw();  // draws a circle with center xe
}

Answer 1

请参阅window.requestAnimationFrame()

animate()中的{p> return导致递归调用，可以通过将其置于function animate(){ if (xe >1000){ return; } else{ xe +=speed; } draw(); // draws a circle with center xe reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; reqAnimFrame(animate); } 条件

之后来避免

    ConnectOptions.Builder connectOptionsBuilder = new ConnectOptions.Builder(mAccessToken);
    Room mRoom = Video.connect(this, connectOptionsBuilder.build(), new Room.Listener() {
                @Override
                public void onConnected(Room room) {

                }

                @Override
                public void onConnectFailure(Room room, TwilioException twilioException) {

                }

                @Override
                public void onDisconnected(Room room, TwilioException twilioException) {
                           String leftParticipantName = room.getName();// name of participant who has left
                           // Here you can end/disconnect your conversation.

                }

                @Override
                public void onParticipantConnected(Room room, Participant participant) {

                }

                @Override
                public void onParticipantDisconnected(Room room, Participant participant) {

                }

                @Override
                public void onRecordingStarted(Room room) {

                }

                @Override
                public void onRecordingStopped(Room room) {

                }
            });