Можно ли сделать в canvas js анимацию без спрайт-листа?

Question

[Anonymous_toaster]

Пробовал такой вариант:

let frames = ["ag (1).png", "ag (2).png", "ag (3).png", "ag (4).png", "ag (5).png", "ag (6).png", "ag (7).png", "ag (1).png" ]
	agent.x+=v
				for (let i = 0; i < frames.length; ++i) {
   
 agentImg.src = frames[i]
await sleep(512)
}

Работает, но ппц как тормозит систему. А спрайт лист делать очень впадлу, и нужно без библиотек и фреймворков. Реально ли сделать анимацию не используя спрайт лист чтоб не тормозил систему?

Answer 1

[Владимир Проскурин]

Анимации в canvas достаточно быстрые, особенно если нет никаких манипуляций типа даунскейла и прочего.
У вас же ошибка в том, что вы во время отрисовки анимации загружаете картинки, еще и ждете загрузку 512 мс. Или я не так понял код.
Нужно предзагрузить в Image все картинки, и после загрузки включать попеременный drawImage на эти картинки.

Собрал на коленке простой пример. Возможно где-то плохо написал, но время позднее, главное суть и демонстрация.

https://codesandbox.io/s/cut-canvas-animation-k6liw8 (кошак на анимации прыгает, я просто не очень удачно гифку на png порезал).

Можно хоть 60 кадров в секунду рисовать (или больше для высокогерцовых мониторов), ничего не должно тормозить.
Для спрайтов тот же самый смысл, только там не меняется картинка, только координаты в drawImage.

Comments

[Anonymous_toaster]

Добавил, чтобы все картинки в массиве появлялись в самом начале. Всё перестало виснуть, но анимация какая то кривая стала (она зависит от keydown). Сейчас посмотрю ваше решение

Answer 2

[rPman]

Не хранить изображения в png, а подготовить видео файл из них (например секунду на кадр), крутить в video, при желании в режиме паузы, переключая по номеру времени currentTime, либо, если нужно именно на canvas, смотреть как это предлагает документация

Comments

[Дмитрий Кузнецов]

Видеофайл для анимации чего-то либо в игре? А вы, месье, знаете толк в извращениях!)

[rPman]

эм, ну допустим когда то давно так даже гонки делали
но да мой косяк

на канвасе рисуют не png а уже заранее прогруженные изображения в Image с помощью drawImage