Очередь анимации в цикличном requestAnimationFrame

[voraa]

<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]

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

[voraa]

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

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

[Raadsert]

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

[voraa]

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

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

[Raadsert]

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

[voraa]

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

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

[Raadsert]

На чем? (с 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]

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

[voraa]

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