Как стать автором
Обновить

Комментарии 14

не знал о такой технологии, а чем это лучше гифок? И какие браузеры такое поддерживают?

Предположу, что даст выигрыш при дизайне с большим кол-вом отдельных мелких анимаций. Получается, что можно всё запихнуть в один файл.

вроде когда много мелких анимаций, выгоднее как раз гифки. Допустим, карта из анимированных квадратиков. По мере открывания новых квадратиков - подгружаются новые гифки. Те которые игрок уже видел - кэшируются брауезром и догружать не надо. С другой стороны, какие-то редкие, которые есть шанс, что и не понадобятся во время игровой сессии не будут висеть в памяти.

GIF-анимация состоит из серии кадров, упакованных в один файл. Этот формат поддерживает простую анимацию с ограниченным количеством цветов (до 256) и может включать прозрачные области.

В анимации с GIF вы ограничены возможностями формата, включая скорость анимации и порядок кадров, заданные при создании GIF.

Так же размер, если взять анимацию сундука из примера (128px/114px) в gif формате его размер будет равен ~22.8kb, а размер спрайт листа ~3.43kb, а это простая анимация на 15 кадров

Вот это не очень понятно, почему так. Интуитивно кажется, что разница только в управляющей информации: в гифке задержка между кадрами вшита, а в спрайтлисте управляется внешним кодом. Но графическая то часть одинаковая (а с учетом того, что в гифе только 256 цветов, вроде должна быть и меньше). А картинка и должна основной вес иметь.

Этим можно управлять (останавливать, воспроизводить, хотя гифками тоже можно), и начинать с определенного кадра анимацию и т.д. В основном используется в играх где "файловая графика" (Герои 3 например), чтобы все изображения хранить в одном файле а потом уже многократно резать и использовать. Поддерживается в chrome 125 версии, safari 15.4 и firefox 118

спасибо!

*тайловая графика

Поддерживается в chrome 125 версии, safari 15.4 и firefox 118

Если точнее то @property ещё не завезли в firefox, а вот функции mod и round со 118 уже есть

Пока что кажется, что весь сыр-бор только из-за того, что чем-то не нравятся «однострочные» атласы. Нет, я не спорю, наличие функций round() и mod() в CSS может оказаться полезным, но вот пример их применения какой-то… надуманный.

В моем профиле на codepen добавляю ещё примеры, с анимацией текста, маски для эффекта загрузки картинки. Как соберу достаточно разных вариаций, опишу ещё примеры

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации