@Anonymous_toaster

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

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

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)
}

Работает, но ппц как тормозит систему. А спрайт лист делать очень впадлу, и нужно без библиотек и фреймворков. Реально ли сделать анимацию не используя спрайт лист чтоб не тормозил систему?
  • Вопрос задан
  • 177 просмотров
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Анимации в canvas достаточно быстрые, особенно если нет никаких манипуляций типа даунскейла и прочего.
У вас же ошибка в том, что вы во время отрисовки анимации загружаете картинки, еще и ждете загрузку 512 мс. Или я не так понял код.
Нужно предзагрузить в Image все картинки, и после загрузки включать попеременный drawImage на эти картинки.

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

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

Можно хоть 60 кадров в секунду рисовать (или больше для высокогерцовых мониторов), ничего не должно тормозить.
Для спрайтов тот же самый смысл, только там не меняется картинка, только координаты в drawImage.
Ответ написан
@rPman
Не хранить изображения в png, а подготовить видео файл из них (например секунду на кадр), крутить в video, при желании в режиме паузы, переключая по номеру времени currentTime, либо, если нужно именно на canvas, смотреть как это предлагает документация
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы