14.02.2023, 15:51
|
|
Интересующийся
|
|
Регистрация: 13.02.2023
Сообщений: 10
|
|
|
рони,
Я думал об этом, а потом подумал в чем разница?)) если не сложно можете объяснить почему предпочтительнее использовать left и top
|
|
14.02.2023, 16:49
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
движение по периметру
Im_Ilya,
как-то так ... (два раза не жмакать, дождитесь окончания)
<!DOCTYPE html>
<html>
<head>
<style>
#red {
position: fixed;
width: 25px;
height: 25px;
background-color: red;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
body {
height: 100%;
}
</style>
</head>
<body>
<div id="red"></div>
<button id="start">Start</button>
<script>
let box = document.getElementById(`red`);
let delay = 10; //скорость
let coords = box.getBoundingClientRect();
let {
left: x,
top: y
} = coords;
let l = 0,
t = 0;
function edge() {
if (l == 0 && t > -2 * y && t <= 0) {
box.style.top = `${--t}px`;
setTimeout(edge, delay);
} else
if (l < 2 * x && t <= -2 * y) {
box.style.left = `${++l}px`;
setTimeout(edge, delay);
} else if (l >= 2 * x && t < 2 * y) {
box.style.top = `${++t}px`;
setTimeout(edge, delay);
} else if (l > 0 && t >= 2 * y) {
box.style.left = `${--l}px`;
setTimeout(edge, delay);
} else if (l <= 0 && t > 0) {
box.style.top = `${--t}px`;
t > 0 && setTimeout(edge, delay);
}
}
const start = document.getElementById('start')
start.addEventListener('click', edge)
</script>
</body>
</html>
Последний раз редактировалось рони, 14.02.2023 в 16:57.
|
|
14.02.2023, 16:56
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
Сообщение от Im_Ilya
|
|
ведь логически то все верно.
|
Нет.
У вас если coords2.y != 0, то всегда будет срабатывать первое условие
if(coords2.y!=0)
до условия
if(coords2.y!=windowHeight-box.offsetHeight)
дело не дойдет.
А какой смысл, двигаясь вверх, менять bottom, а двигаясь вниз - менять top очень трудно представить. |
|
15.02.2023, 12:35
|
|
Интересующийся
|
|
Регистрация: 13.02.2023
Сообщений: 10
|
|
|
рони,
voraa,
Спасибо большое, благодаря вам я разобрался. Сейчас отредактирую свою функцию.
|
|
15.02.2023, 12:51
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
Сообщение от Im_Ilya
|
|
Сейчас отредактирую свою функцию.
|
Только не делайте анимацию, через timeout.
Вы ставите delay = 10. Но если у монитора частота обновления экрана 60гц, то не будет через 10мс экран обновляться. Все равно будет через 1000/60 = 16.7 мс. Из за этого движение будет дерганным и не равномерным.
А requestAnimationFrame для этого и создана, что бы синхронизировать обновления страницы с частотой обновления экрана.
Последний раз редактировалось voraa, 15.02.2023 в 12:54.
|
|
15.02.2023, 13:07
|
|
Интересующийся
|
|
Регистрация: 13.02.2023
Сообщений: 10
|
|
|
voraa,
Хорошо. Спасибо за совет. Я почитал про эту функцию когда ваш пример разбирал, только единственное я не понял из вашего примера что за переменные NowT и LastT?
|
|
15.02.2023, 13:18
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
В функцию, которая вызывается requestAnimationFrame передается параметр - время (Это некоторое время от окончания загрузки страницы). Зная время предыдущего вызова функции по requestAnimationFrame и текущего, мы можем определить какое время прошло между вызовами. Это же не всегда четко 16.7. Иногда и больше - браузер сам это решает.
LastT - время предыдущего вызова
NowT - время текущего вызова
Зная время между вызовами (const dt = nowT - lastT )и скорость (speed) с которой должен перемещаться элемент, можно высчитать на какое расстояние он должен сместиться между этими двумя вызовами.
const d = speed * dt / 1000;
|
|
15.02.2023, 13:39
|
|
Интересующийся
|
|
Регистрация: 13.02.2023
Сообщений: 10
|
|
|
voraa,
Круто! Сам бы я не догадался, не тот уровень пока что)) Но все приходит с опытом
|
|
18.02.2023, 21:43
|
|
Интересующийся
|
|
Регистрация: 13.02.2023
Сообщений: 10
|
|
|
voraa,
Подскажите еще, откуда передается параметр nowT? Я не могу сообразить
|
|
18.02.2023, 22:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от Im_Ilya
|
|
параметр nowT?
|
https://developer.mozilla.org/ru/doc...AnimationFrame
|
Цитата:
|
|
Callback методу передаётся один аргумент, DOMHighResTimeStamp, который содержит текущее время (количество миллисекунд, прошедших с момента time origin).
|
время прошедшее от создания страницы. |
|
|
|
