Как заставить предмет плавно двигаться

Question

let EL = document.querySelector('.ball');
window.addEventListener('click' , function(event){
    EL.style.left = event.clientX + 'px';
    EL.style.top = event.clientY + 'px';

})

Здравствуйте, вот есть код с помощью которого можна методом клика заставить предмет двигаться на место клика , но как сделать чтобы предмет плавно двигался а не сразу перекидался на место клика ?

Answer 1

Например воспользоваться методом setInterval внутри которого на каждой итерации будет прибавляться нужное количество пикселей к координате, а как только достигнет нужной точки воспользоваться clearInterval для остановки метода setInterval

Еще, для игр, часто используют requestAnimationFrame. Принцип примерно такой же как у setInterval, но гораздо эффективнее, производительнее и менее глючный

Answer 2

Можно воспользоваться CSS3 свойством transition, которое как раз отвечает за поведение анимации.

Например, попробуйте классу .ball прописать:

.ball {
    -webkit-transition: left 0.3s, top 0.3s;
            transition: left 0.3s, top 0.3s;
}

Answer 3

Самый простой вариант добавить свойство transition в css..

let el = document.querySelector('.ball');
el.style.left = 0 + 'px';// чтобы при первом клике не было скачка
el.style.top = 0 + 'px';// чтобы при первом клике не было скачка

document.addEventListener('click', function(event) {
  el.style.left = event.clientX - 25 + 'px';
  el.style.top = event.clientY - 25 + 'px';
})

.ball {
  width: 50px;
  height: 50px;
  background: green;
  border-radius: 50px;
  position: absolute;
  transition: 1s cubic-bezier(.1, .65, .9, 1);
}

<div class='ball'></div>

БЛОГ НА HUSL

Как заставить предмет плавно двигаться

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