Движение по направлению угла

Question

Есть такой код

let wW = $(window).width(),
    wH = $(window).height(),
    mS = 50; // длина "движения" блока (px)
    
function Start() {
  let pX = Math.floor(Math.random() * wW),
      pY = Math.floor(Math.random() * wH),
      dR = Math.floor(Math.random() * 360);
  
  $('.el').css({
    'left': pX+'px',
    'top': pY+'px',
    'transform': `rotate(${dR}deg)`
  });
  
} Start();

.el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
}

.el::after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}

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

<div class="el"></div>

Данный код задаёт рандомную позицию и угол поворота элемента.

Вопрос заключается в следующем:

Как заставить блок двигаться на n-ое количество пикселей (переменная mS) относительно заданного направления (переменная dR)?

Answer 1

В CSS можно добавлять несколько трансформаций. Например, transfom: translateX(10px) rotate(10deg) translateY(5px); - трансформации будут выполнены по очереди.

Я приведу довольно топорный пример, то вот как-то так:

let wW = $(window).width(),
  wH = $(window).height(),
  mS = 50; // длина "движения" блока (px)

function Start() {
  // Тут я исправил чтоб квадрат не спавнился близко к краям
  let pX = 100 + Math.floor(Math.random() * (wW - 200)),
    pY = 100 + Math.floor(Math.random() * (wH - 200)),
    dR = Math.floor(Math.random() * 360);

  $('.el').css({
    'left': pX + 'px',
    'top': pY + 'px',
    'transform': `rotate(${dR}deg)`
  });

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px)`
    });
  }, 1000);

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg)`
    });
  }, 2000);

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg) translateY(${mS}px)`
    });
  }, 3000);

}
Start();

.el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
  transition: transform 0.5s;
}

.el::after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}

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

<div class="el"></div>

Answer 2

Если нужно только один раз сделать движение, то можно и без цикла. И аккуратнее с чёрточкой посередине, из за неё я 20 минут просидел не понимая почему квадрат не так поворачивается )

const angle = Math.random() * Math.PI*2
const dist = 100
el.style.setProperty('--rz', angle + 'rad')


const x = Math.cos(angle) * dist
const y = Math.sin(angle) * dist

setTimeout(() => {
  el.style.setProperty('--tx', x + 'px')
  el.style.setProperty('--ty', y + 'px')
}, 0)

#el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transition: 1s;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rz));
}

#el::after {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: black;
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translate(0, -50%);
}

<div id="el" style="--rz: 0deg; --tx: 0px; --ty: 0px"></div>

БЛОГ НА HUSL

Движение по направлению угла

Ответы (2 шт):