Почему моя анимационная рамка ускоряется в конце при использовании условия? ⇐ Html

[Anonymous]

Я хотел бы построить простую игру с НЛО, которая пересекает окно, и это может быть целью для танка. Ниже приведен код для создания НЛО, пересекающего экран окна. Я использую класс для этого и устанавливаю временные жесткие условия для поддержания работы анимации, работающей только тогда, когда НЛО находится в диапазоне экранов. Однако с этим условием в конце анимации НЛО внезапно ускоряется. Не могу понять, почему? Может ли кто-нибудь объяснить, почему это происходит?

Код: Выделить всё

class flying_ufo {

constructor(name) {
this.name = name;
this.ufo = document.querySelector('.ufo');
this.angle = 0;
this.x = 0;
this.y = 0;
this.rotate = 0;
this.start = undefined;
this.lastTimestamp = undefined;
this.animate = this.animate.bind(this);
this.scale = window.innerWidth / 50;
}

animate(timestamp) {
if (this.start === undefined) {
this.start = timestamp;
this.lastTimestamp = timestamp;
}

const delta = (timestamp - this.lastTimestamp) / 1000;
this.lastTimestamp = timestamp;

const speedX = 100;
const speedY = 20;

this.x += speedX * delta;
this.y -= speedY * delta;

this.degreeValue = window.innerWidth > 900 ? 0.002 : 0.02;
this.rotate -= ((window.innerWidth) * delta) * this.degreeValue;

this.ufo.style.transform = `translate(${this.x}px, ${this.y / 2}px) rotate(${this.rotate}deg)`;

const isInView = this.x = 0 &&
this.y / 2 < window.innerHeight / 2 &&
this.y / 2 + window.innerHeight > 0;

// if (isInView) {
requestAnimationFrame(this.animate);
// }
}

init_ufo() {

requestAnimationFrame(this.animate);
}

}

const my_ufo = new flying_ufo('name1');
my_ufo.init_ufo();< /code>
html,
body {
position: relative;
margin: 0;
padding: 0;
height: 100%;
background: radial-gradient(circle at center, #1c1c3c, #0b0b16);
overflow: hidden;
}

.ufo {
width: 110px;
position: absolute;
top: 50%;
filter: drop-shadow(0 0 15px #6cf3ff);
transition: transform 0.3s ease-in-out;
will-change: transform;
}< /code>

[img]https://images.rawpixel.com/image_png_1300/cHJpdmF0ZS9zdGF0aWMvZmlsZXMvd2Vic2l0ZS8yMDIyLTA1L2ZydWZvX2FsaWVuX3NreV8xMTk0MzIwLWltYWdlLWpvYjgwMy0wMi5wbmc.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -condition