Как сделать этот ход длиннее без пауз

Question

У меня есть этот код, который отлично работает, если я хочу переместить один блок, но когда я буду удерживать клавишу нажатой, анимация будет работать, но с этими паузами. Я понял, что умножение скорости и расстояния будет работать, но я понятия не имею, как добавить это «живое» в анимацию. Вы можете дать мне какой-то совет?

var Xpos = 0;
var Ypos = 0;
var spd = 250;
var dstnc = 100;

$(document).keydown(function(e) {
  if (e.keyCode == 87) {
    $('#movThs').animate({
      top: -dstnc + Ypos + 'px'
    }, spd);
    Ypos = Ypos - dstnc;
  }
  if (e.keyCode == 68) {
    $('#movThs').animate({
      left: dstnc + Xpos + 'px'
    }, spd);
    Xpos = Xpos + dstnc;
  }
  if (e.keyCode == 83) {
    $('#movThs').animate({
      top: dstnc + Ypos + 'px'
    }, spd);
    Ypos = Ypos + dstnc;
  }
  if (e.keyCode == 65) {
    $('#movThs').animate({
      left: -dstnc + Xpos + 'px'
    }, spd);
    Xpos = Xpos - dstnc;
  }
});

#movThs {
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 90%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="movThs"></div>

Answer 1

Я не уверен в точном поведении замедления, которое вы будете реализовывать sh, но один удобный совет для того, чтобы сделать вещи более плавными, это stop() перед повторной анимацией.

Это заканчивается недискретным позиционированием; с помощью stop () вы можете остаться между двумя позициями, что может быть не тем, что вы хотите. Что он делает, так это предотвращает наращивание анимационных очередей (не жертвуя исходной плавностью).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #movThs {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 90%;
  }
</style>

<div id="movThs"></div>
<script>
  var Xpos = 0;
  var Ypos = 0;
  var spd = 250;
  var dstnc = 100;

  $(document).keydown(function(e) {
    if (e.keyCode == 87) {
      $('#movThs').stop().animate({
        top: -dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos - dstnc;
    }
    if (e.keyCode == 68) {
      $('#movThs').stop().animate({
        left: dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos + dstnc;
    }
    if (e.keyCode == 83) {
      $('#movThs').stop().animate({
        top: dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos + dstnc;
    }
    if (e.keyCode == 65) {
      $('#movThs').stop().animate({
        left: -dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos - dstnc;
    }
  });
</script>

Answer 2

Если вы рассматриваете не использование JQuery, а чистый JS, я бы посоветовал сделать попытку ниже фрагмента.

С уважением

document.addEventListener("DOMContentLoaded", () => {
if (document.animationInitialized) {
    return;
}

document.animationInitialized = true;

const movThs = document.getElementById("movThs");
const UP = "W".charCodeAt(0);
const DOWN = "S".charCodeAt(0);
const RIGHT = "D".charCodeAt(0);
const LEFT = "A".charCodeAt(0);
const XMAX = 50;
const YMAX = 50;

let x = 0;
let y = 0;
let ax = 0;
let ay = 0;
let cx = 0;
let cy = 0;

function clamp(v, min, max) {
    return v < min ? min : v > max ? max : v;
}

window.requestAnimationFrame(function onAnimation() {
    if (!x) {
        if (ax) {
            ax += -Math.sign(ax);
        }
    } else {
        ax += x;
        ax = clamp(ax, -XMAX, XMAX);
    }
    cx += ax / 100;

    if (!y) {
        if (ay) {
            ay += -Math.sign(ay);
        }
    } else {
        ay += y;
        ay = clamp(ay, -YMAX, YMAX);
    }
    cy += ay / 100;

    movThs.style.transform = `translate3d(${cx}rem,${cy}rem,0)`

    window.requestAnimationFrame(onAnimation);
});

document.addEventListener("keydown", (event) => {
    switch (event.which) {
        case UP:
            y = -1;
            break;
        case LEFT:
            x = -1;
            break;
        case RIGHT:
            x = 1;
            break;
        case DOWN:
            y = 1;
            break;
    }
}, false);

document.addEventListener("keyup", (event) => {
    switch (event.which) {
        case UP:
        case DOWN:
            y = 0;
            break;
        case LEFT:
        case RIGHT:
            x = 0;
            break;
    }
}, false);

});

if (document.readyState === "complete") {
document.dispatchEvent(new Event("DOMContentLoaded"));
}

#movThs {
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 90%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="movThs"></div>

Answer 3

Переменная spd - это действительно время, необходимое для завершения операции

Переменная dstnc - это расстояние, пройденное за указанное время для операции

Мой ответ ниже, имеет spd, который действительно пора сделать операцию до 10 миллисекунд

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #movThs {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 90%;
  }
</style>

<div id="movThs"></div>
<script>
  var Xpos = 0;
  var Ypos = 0;
  var spd = 10; //the amount of time it takes (milliseconds)
  var dstnc = 100; //the distance to travel (pixels)

  $(document).keydown(function(e) {
    if (e.keyCode == 87) {
      $('#movThs').animate({
        top: -dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos - dstnc;
    }
    if (e.keyCode == 68) {
      $('#movThs').animate({
        left: dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos + dstnc;
    }
    if (e.keyCode == 83) {
      $('#movThs').animate({
        top: dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos + dstnc;
    }
    if (e.keyCode == 65) {
      $('#movThs').animate({
        left: -dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos - dstnc;
    }
  });
</script>