Сообщение от voraa
|
Анимацию надо делать через 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`;
И работает быстрее, что не маловажно при анимации, особенно, когда будете считать геометрию.
|
https://codepen.io/kotya_ra/pen/xxJLLqm
джиквери заменил, а вот как переписать 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, к примеру, что и как лучше использовать, с учетом того что я хочу еще считать геометрию для взаимодействия между картинками и экраном? Спасибо