Коллайдинг элементов
Привет всем! Такой вопрос - набросал такой канвас с двигающимися картинками, хочу добавить немного физики - чтобы при соприкосновении картинки отталкивались друг от друга, как это реализовать, подскажите пожалуйста! И еще один ньюанс, тоже не знаю как сделать, чтобы картинки не выходили за границы экрана, желательно чтобы тоже отталкивались от них, как на старых твишках)) Спасибо!
Сслылка на кодпен - https://codepen.io/kotya_ra/pen/xxJLLqm |
Считать координаты. Проверять на касание и пересечение ( добавить много геометрии)
|
Анимацию надо делать через requestAnimationFrame, а не через setInterval.
$(".dragscroll div.item.move").each(async function () {
Что у вас асинхронного в этой функции? И я бы отказался от jquery. Он способствует неэффективному коду. Каждый раз писать $(this) вроде не трудно. Но это вызов функции. Каждый раз. Которая возвращает один и тот же результат. Зачем? Почему не вызвать один раз и запомнить в переменную? А еще эффективнее делать на чистом js. Неужели
$(this).css("left")
сильно проще писать, чем this.style.left ? А
style = { "left": left + randomw + "px" };
$(this).css(style);
style = { "top": top + randomh + "px" };
$(this).css(style);
лучше, чем
this.style.left = `${left+rendomw}px`;
this.style.top = `${top+rendomh}px`;
И работает быстрее, что не маловажно при анимации, особенно, когда будете считать геометрию. |
Цитата:
джиквери заменил, а вот как переписать setinterval на requestAnimationFrame не понимаю...
window.setInterval(function () {
let min = -200, max = 200;
parent.querySelectorAll('.item.move').forEach(item => {
let randomw = Math.floor(Math.random() * (max - min + 1)) + min;
let randomh = Math.floor(Math.random() * (max - min + 1)) + min;
let left = parseInt(item.style.left);
let top = parseInt(item.style.top);
item.style.left = `${left + randomw}px`;
item.style.top = `${top + randomh}px`;
})
}, 2000);
пробовал, но я никак не пойму принцип работы, как задать задержку, пока картинка дойдет до следующей точки, оно покадрово работает и высчитывает мне следующий шаг каждую миллисекунду, и получается жуть какая то( И еще вопрос - верное ли решение использование абсолютных left right для анимации, или же может лучше использовать translate2d, к примеру, что и как лучше использовать, с учетом того что я хочу еще считать геометрию для взаимодействия между картинками и экраном? Спасибо |
Я не вижу у вас анимации. Просто каждые 2 сек элементы случайным образом меняют свое положение.
Анимация это все-таки плавное движение из точки в точку. Надо для каждого элемента иметь его положение X,Y, скорость движения и направление Vx, Vy. Тогда можно рассчитывать и показывать перемещение элементов с той частотой, с которой экран может это выводить (обычно 60 кадров в сек). |
| Часовой пояс GMT +3, время: 18:12. |