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

})

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

1

3 ответа 3

1

Самый простой вариант добавить свойство 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>

0

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

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

0

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

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

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.