Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

[azTotMD]

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

[metter]

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

[azTotMD]

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

[Fl0k1]

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

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

[Fl0k1]

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

[azTotMD]

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

[POPSuL]

гифе только 256 цветов

Да, но не совсем.
https://habr.com/ru/articles/149728/

[Fl0k1]

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

[azTotMD]

спасибо!

[Fl0k1]

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

[krasilnik_k]

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

[Fl0k1]

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

[Mingun]

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

[Fl0k1]

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