JS canvas недо-анимации как пофиксить?

Question

[Anonymous_toaster]

Есть такой скрипт для анимации ходьбы перса

for (let i = 0; i < frames.length; ++i) {
   
 agentImg.src = frames[i]
await sleep(512)
}

frames это массив с каждым кадром анимации.
В принципе, все работает, но если нажимать кнопку, то все норм, но если держать, то переменная i создается всё заново и заново, и кадры выбираются на рандом, и это портит анимацию.

Comments

[twobomb]

флаг

[Anonymous_toaster]

twobomb, чего?

[twobomb]

Anonymous_toaster, проигрывания

[Anonymous_toaster]

twobomb, загуглил, понял что это, но не понял как это использовать

[twobomb]

Anonymous_toaster, как хотите, может что-то типа такого

if(isPlay)
    return;
isPlay = true;
for (let i = 0; i < frames.length; ++i) {   
 agentImg.src = frames[i]
await sleep(512)
}
isPlay = false;

[Anonymous_toaster]

twobomb, хорошая мысль, сейчас попробую

[Anonymous_toaster]

twobomb, Не получается, проверка сверху видимо срабатавыает после установление значения true и анимация в принципе не происходит

[Anonymous_toaster]

twobomb, я ещё пробовал проверять typeof значение i, и если не равно то ретурн, но не получается

[twobomb]

Anonymous_toaster, Как она может срабатаывать после установления true если true устанавливается после проверки?
Я же надеюсь вы создали переменную isPlay где-то за пределами функции и иниализировали её значением false?

[Anonymous_toaster]

twobomb, А, нет, анимация есть, но что с этим, что без, не работает

[Anonymous_toaster]

twobomb, Ну, так явно лучше, спасибо

[twobomb]

Anonymous_toaster, Так она не работает или так явно лучше

[Anonymous_toaster]

twobomb, кадры идут по порядку, но почему то анимация ускоряется при зажатии

[Anonymous_toaster]

а, нет не попорядку. Но что-то явно стало лучше

[twobomb]

Anonymous_toaster, Мне эти цифры на белом фоне и три строчки вашего кода вообще не о чём не говорят

[Александр]

Используйте requestAnimationFrame. Создаете переменную, которая будет описывать длительность одного кадра в миллисекундах. RAF при каждом вызове передает время. Для вычисления текущего кадра используете формулу:

Math.floor(время / длительность_кадра) % количество_кадров

. Если на словах не понятно - утром сделаю демку.

[Anonymous_toaster]

Александр, более менее понятно, но лучше сделайте демку, вдруг ещё что-то будет, что я упускаю. requestAnimationFrame будет обновлять анимацию каждую секунду, а надо чтоб он на кейапе отключался

[Anonymous_toaster]

twobomb, цифры это номер кадра, их всего 7

[Anonymous_toaster]

Anonymous_toaster, ну я вроде сделал ровно чтоб шли кадры, но он все равно подглючивает, а точнее как-то неплавно двигается и при зажатии анимация явно ускоряется

Answer 1

[Александр]

Нашёл старую демку: https://codesandbox.io/s/qna-q-1246030-gl6m9q. Там иной подход, но есть анимация при нажатых клавишах.

Демка под зацикленную анимацию

Comments

[Anonymous_toaster]

У меня тут сделано по другому, без спрайт листа, но спасибо

[Александр]

Anonymous_toaster, мысль та же, загружаете все картинки промисами, ждёте при помощи Promise.all и будете не по координатам изображения рисовать, а по индексу массива.

[Anonymous_toaster]

Александр, блин, для меня это слишком умно, ладно, разберусь как нибудь, спасибо

[Anonymous_toaster]

Александр, мне флаги помогли, но все равно, анимация по какой-то причине ускоряется, видно не соблюдая комнаду sleep

[Anonymous_toaster]

Anonymous_toaster,кажись начало доходить

[Anonymous_toaster]

Александр, Не пойму, а промисов должно быть несколько или один? который при успехе возвращает массив

[Александр]

Anonymous_toaster, Несколько: 1 на ожидание всех, и N на загрузку изображений.

const loadImageBitmap = (url) => fetch(url)
	.then(response => response.blob())
	.then(createImageBitmap);

const images = ['1.png', '2.png', '3.png'];

Promise.all(images.map((url) => loadImageBitmap(url)))
	.then((imageBitmaps) => {
		console.log(imageBitmaps);
	});

или

const loadImage = (url) => new Promise((resolve) => {
	const image = new Image();
	image.addEventListener('load', () => resolve(image));
	image.src = url;
});

const images = ['1.png', '2.png', '3.png'];

Promise.all(images.map((url) => loadImageBitmap(url)))
	.then((loadedImages) => {
		console.log(loadedImages);
	});

[Anonymous_toaster]

Александр, а как задать значение игроку чтоб оно стало из массива? через .src не получается, задавать переменной игрока с классом image тоже нет

[Anonymous_toaster]

Александр, А, всё, нашел как, но ничего особо не изменилось, анимация будто ускоряется сама

[Anonymous_toaster]

Александр https://vk.com/im?z=video612594034_456239054%2Fd3e... видео

[Александр]

Anonymous_toaster, используйте canvas и RAF. Использую циклы и async/await будет сложно сделать что-то.

[Александр]

Anonymous_toaster, Почитайте "Сюрреализм на JavaScript" bakhirev-biz.1gb.ru

[Anonymous_toaster]

Александр, нашёл то что надо, написано что картинки не успевают прогружаться, но разными способами прогружая их, не получается то что надо

[Александр]

Anonymous_toaster, поэтому используют canvas и загружают картинки один раз, после чего просто рисуют их на canvas.

[Anonymous_toaster]

Александр, У меня всё на канве и сделано, и я пробовал по разному грузить, то же самое что и на видео

[Anonymous_toaster]

Александр, всё рисуется на канве, raf тоже используется, но объекту игрока задается новое изображение которое перерисовывает его

[Александр]

Anonymous_toaster, тогда код оформляйте куда-нибудь.

[Anonymous_toaster]

Александр, ладно, спасибо за помощь и потраченное вами время