在 animation 之后，頁面不會重新加載
[英]after an animation, page will not reload
問題描述
我正在創建一個在屏幕上運行的小自行車，當鼠標碰到它時，它應該停下來看着你。 它的運行，轉動和停止都很好，但是當它停止時，他看着我們的形象就不起作用了。 另外，當我嘗試重新加載頁面時，它沒有。 我認為有一個循環或其他東西阻止它重新加載。
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 圖像：
1 個解決方案
解決方案1
2 已采納 2020-05-05 03:23:06
所以有幾個問題。 浮點錯誤。
如何處理 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>
頁面重新加載后如何取消css animation？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.