Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Очередь анимации в цикличном requestAnimationFrame (https://javascript.ru/forum/misc/85608-ochered-animacii-v-ciklichnom-requestanimationframe.html)

voraa 10.11.2023 16:14

<div id="moved" style="position: absolute;width:30px;height: 30px;background: red;"></div>
    <br>
    <input type="button" onclick="but1()" value="кнопка 1"> <br>
    
    <script type="text/javascript">
let nclick = 0;
const animparams = [
	[800 , 100 , 3000],
	[-750 , 10 , 200],
	[150 , -60 , 2000],
	[-200 , -50 , 1000]
];
let animPromise = Promise.resolve();

function but1 (){
    const element = document.getElementById("moved");
   
    animPromise = animPromise.then (() => animateMove( element , ...animparams[(nclick++) % 4]));
}



function animateMove ( element , x , y , time = 1000){
	
    const startX = element.offsetLeft;
    const startY = element.offsetTop;
    const startTime = performance.now();
    return new Promise ( (resolve) => {
		const animate = function (timenow){
			let EA = (timenow - startTime) / time;
			if (EA > 1) EA = 1;
			element.style.left = startX + (x * EA) + "px";
			element.style.top = startY + (y * EA) + "px";
			if (EA == 1) {
				resolve()
			} else {
				requestAnimationFrame(animate );
			}
		};
		animate(startTime);
    })
}

</script>

Жмите когда хотите и сколько хотите.
Можно и нормальную очередь сделать, хотя бы самую простую с помощью массива и операций push/shift. Добавлять в нее параметры следующей анимации и когда предыдущая закончится вытаскивать следующую. Ту главное принцип - ловить окончание анимации с помощью Promise.

Raadsert 11.11.2023 17:04

Интересно. А вы не знаете почему это так работает? Ведь возвращение данных в then сохраняет эти данные для следующего then, а при возврате новых данных они просто заменятся. Но если возвращать промисы, то создаётся некое подобие очереди. Как так?

voraa 11.11.2023 18:16

Цитата:

Сообщение от Raadsert
Но если возвращать промисы, то создаётся некое подобие очереди. Как так?

Именно так. Создается очередь из промисов. Когда исполняется один, начинает работать следущий (then всегда возвращает промис, но не тот же самый, к которому он применялся, а тот, который возвращает его функция)
Содается цепочка
anim1.then(()=>anim2).then(()=>anim3).... .then(()=>animN)

Raadsert 11.11.2023 20:51

Вы ещё упоминали, что у threejs есть свои средства реализации подобного. А какие? Насколько я понимаю, реализовать способ с промисами, в непрерывном цикле - не получиться.

voraa 11.11.2023 21:26

Цитата:

Сообщение от Raadsert
Вы ещё упоминали, что у threejs есть свои средства реализации подобного

Я сказал только что есть, раз они это как то реализуют. Я с ним не работал.

Raadsert 12.11.2023 00:59

А есть предположения как такое может реализоваться в непрерывном цикле?

voraa 12.11.2023 09:36

Цитата:

Сообщение от Raadsert
А есть предположения как такое может реализоваться в непрерывном цикле?

На чем? (с threejs я не работал)
Что "такое"?

Raadsert 13.11.2023 12:04

Цитата:

Сообщение от voraa (Сообщение 553997)
На чем? (с threejs я не работал)
Что "такое"?

"Такое" - очередь как в промисах.
На обычном JS, как пример ваш код для цикличной анимации:

let tbeg;
let tlast;
 
function animate(t) {
	tbeg ??= t;
	tlast ?? = t
	const dtbeg = t - tbeg; // прошло от начала анимации
	const dtlast = t - tlast; // прошло от прошлой анимации
    render();  // расчет и внесение изменений с учетом dtbeg и/или dtlast
    tlast = t;
    if (какое то условие окончания) return;  // Завершить анимацию?
    requestAnimationFrame(animate);
    
}
 
function render() {
    // код для анимации каких ни будь элементов
}

animate(performance.now())


Понятное дело мы можем запускать его только когда нужна анимация. Но давайте предположи что его нельзя прервать (так работает threejs), как бы вы тогда добавили подобную (как в промисах) очередь?

Rise 13.11.2023 15:29

Raadsert,
Используй tween/tweening, напиши свой класс или возьми готовый tween.js, там ты сможешь chain-ы делать.

voraa 13.11.2023 16:58

Я не понимаю, о чем вы спрашиваете (и не знаю, как в threejs).
Есть непрерывный цикл в браузере. Выполняется таск(обработка событий), потом микротаски, потом снова таск, снова микротоски и так далее.... Когда подходит время обновления экрана (с частотой ~16,6 ms или 8.3 ms) между микротасками и таском вклинивается рендер - обновление экрана. Это непрерывный цикл. Его нельзя прервать.
Если мне нужна анимация, я с помощью requestAnimationFrame задаю функцию, которая будет вызвана перед рендером. Эта функция снова может вызвать requestAnimationFrame, задав себя, что бы быть вызванной перед следующим рендером, если нужно. Так задается конкретная анимация.
Если мне нужно несколько одновременных анимаций, я могу несколько раз вызвать requestAnimationFrame и задать несколько функций, реализующих анимации. И все они будут вызываться перед рендером.
Если нужно ждать, когда одна анимация закончится, что бы что то сделать, например, запустить следующую, можно организовать возврат промиса.
Это основы.
Что конкретно вас интересует, я так и не могу понять.


Часовой пояс GMT +3, время: 18:31.