在 animation 之后，页面不会重新加载

Question

我正在创建一个在屏幕上运行的小自行车，当鼠标碰到它时，它应该停下来看着你。 它的运行，转动和停止都很好，但是当它停止时，他看着我们的形象就不起作用了。 另外，当我尝试重新加载页面时，它没有。 我认为有一个循环或其他东西阻止它重新加载。

let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 100;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (x <= 0) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="stop.gif"; console.log('hi')
        setTimeout(reset, 2000);
    }
    requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) {
        lastspeed = speed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
});

//braking it
function slow() {
    document.getElementById('riding').src="brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (speed !== 0);
}

//reset
function reset() {
    document.getElementById('riding').src="riding.gif";

    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }
    }
    while(speed !== 5 || speed !== -5);
    counter = 0;
}
move();

这是我的 html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h6 id="message">this is working</h6>
    <img src="riding.gif" alt="riding" id="riding">
    <script src="rider.js"></script>
</body>
</html>

这是我的 css

body{
    margin: 0px;
}
#riding{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    position: absolute;
    top: 0;
    left: 0;
}

 let speed = 5; let lastspeed = 0; let counter = 0; let x = 50; let y = 100; let mX = 0; let mY = 0; //flipping and animating function move() { x += speed; document.getElementById('riding').style.left=(x + "px"); if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) { speed = -5; document.getElementById('riding').style.transform="rotateY(150deg)"; } if (x <= 0) { speed = 5; document.getElementById('riding').style.transform="rotateY(0deg)"; } if (speed == 0) { document.getElementById('riding').src="stop.gif"; console.log('hi') setTimeout(reset, 2000); } requestAnimationFrame(move); } //mouse move collision detection window.addEventListener('mousemove', function(e) { mX = e.clientX; mY = e.clientY; if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) { lastspeed = speed; if (counter == 0) { slow(); counter = 1; } } }); //braking it function slow() { document.getElementById('riding').src="brake.gif"; do { if (speed > 0){ speed -= 0.1; } else if(speed < 0) { speed += 0.1; } } while (speed;== 0). } //reset function reset() { document.getElementById('riding').src="riding;gif". do { if (lastspeed > 0) { speed += 0;1. } else if (lastspeed < 0) { speed -= 0;1; } } while(speed;== 5 || speed;== -5); counter = 0; } move();

 body{ margin: 0px; } #riding{ width: 50px; height: 50px; position: absolute; top: 100px; left: 0px; transform: rotateY(0deg); } #message{ position: absolute; top: 0; left: 0; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h6 id="message">this is working</h6> <img src="riding.gif" alt="riding" id="riding"> <script src="rider.js"></script> </body> </html>

这是我正在使用的 animation 图像：

Answer 1

所以有几个问题。 浮点错误。
如何处理 JavaScript 中的浮点数精度？
0.1 是导致该问题的数字之一。
我已经通过使用 Math.abs 并将差异与 < 0.01 进行比较来处理快速和肮脏的问题。

另一个问题是您对 lastSpeed 的使用。 mouseover 有时可能会以 0 的速度发生，这会导致循环永远卡住，并且会导致方向错误。 所以我添加了一个 || 这样它就会忽略0速度。

您的 0.1 缓动可能应该放在 rAF 循环中，因为它现在是一个阻塞操作，所以它不会像您想要的那样 function 。 和/或超时循环。

您可能要考虑的一个想法是使用 CSS 过渡来为您进行缓动减速。

 let speed = 5; let lastspeed = 0; let counter = 0; let x = 50; let y = 100; let mX = 0; let mY = 0; //flipping and animating function move() { x += speed; document.getElementById('riding').style.left=(x + "px"); if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) { speed = -5; document.getElementById('riding').style.transform="rotateY(150deg)"; } if (x <= 0) { speed = 5; document.getElementById('riding').style.transform="rotateY(0deg)"; } if (speed == 0) { document.getElementById('riding').src="stop.gif"; setTimeout(reset, 2000);console.log('hi'); } else requestAnimationFrame(move); } //mouse move collision detection window.addEventListener('mousemove', function(e) { mX = e.clientX; mY = e.clientY; if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) { lastspeed = speed || lastspeed; if (counter == 0) { slow(); counter = 1; } } }); //braking it function slow() { document.getElementById('riding').src="brake.gif"; do { if (speed > 0){ speed -= 0.1; } else if(speed < 0) { speed += 0.1; } } while (Math.abs(speed)>0.01); speed=0; } //reset function reset() { document.getElementById('riding').src="riding.gif"; do { if (lastspeed > 0) { speed += 0.1; } else if (lastspeed < 0) { speed -= 0.1; }console.log(lastspeed,speed); } while(5-Math.abs(speed) > 0.01); move(); counter = 0; } move();

 body{ margin: 0px; } #riding{ width: 50px; height: 50px; position: absolute; top: 100px; left: 0px; transform: rotateY(0deg); } #message{ position: absolute; top: 0; left: 0; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h6 id="message">this is working</h6> <img src="riding.gif" alt="riding" id="riding"> <script src="rider.js"></script> </body> </html>