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

Введение. Что это такое?

Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. (базовое определение которое дает чатгпт)

Что из себя представляет

Sprite Sheet — это композиция из множества различных изображений (обычно кадров анимации), объединенных в один файл. Это позволяет управлять анимацией персонажей или элементов интерфейса, изменяя позицию изображения в CSS.

В чем была сложность до появления round и mod в CSS?

Основная сложность заключалась в том чтобы автоматизировать процесс перехода по строкам. Например:

@keyframes sprite {   from { background-position: 0px; }   to { background-position: -8640px; } }

Начальное Положение (from): Анимация начинается с background-position: 0px;. Это означает, что фоновое изображение начнет отображаться с начальной позиции, обычно это левый верхний угол изображения.

Конечное Положение (to): Анимация заканчивается при background-position: -8640px;. Это означает, что фоновое изображение будет сдвигаться по горизонтали на -8640 пикселей от начальной позиции к концу анимации. Такой сдвиг обычно используется для прохождения через различные кадры Sprite Sheet, где каждый кадр представляет различные этапы анимации.

Далее при помощи animation-timing-function: steps(x); где X это количество кадров мы могли производить смещение по кадрам. В зависимости от времени выполнения и частоты кадров в Sprite Sheet можно было наблюдать анимацию изображения. Например:

В данном примере выполнялась анимация только по оси X и приходилось вручную выставлять в @keyframes границы переходов по оси Y, либо нарезать изображение в inline формате.

Что изменилось с выходом Chrome 125?

Были добавлены новые функции:

• CSS-функция round() возвращает округленное число на основе выбранной стратегии округления.

• CSS-функция mod() возвращает модуль, оставшийся при делении первого параметра на второй параметр, аналогично оператору остатка в JavaScript (%). Модуль — это значение, оставшееся после деления одного операнда, делимого, на второй операнд, делитель. Оно всегда принимает знак делителя.

• CSS-функция rem() возвращает остаток, оставшийся при делении первого параметра на второй параметр, аналогично оператору остатка JavaScript (%). Остаток — это значение, оставшееся после деления одного операнда (делимого) на второй операнд (делитель). Оно всегда принимает знак дивиденда.

Что это нам дает?

Теперь мы можем написать анимированные Sprite Sheet с переходами по X и Y координатам на чистом CSS! Давайте начнем с примера который выложен на Codepen. (Если кто то хочет, может сразу перейти по ссылке и сам разобраться что к чему)

Начнем!

Для начала нам нужно определить:

@property --sprite-fs {       syntax: "<integer>"; /* Описывает допустимый синтаксис свойства. */      initial-value: 0;  /* Устанавливает начальное значение свойства. */   inherits: false;  /* Определяет наследования свойства */ }

@property — является частью API-интерфейсов CSS Houdini . Оно позволяет разработчикам явно определять свои свойства, позволяя проверять тип свойства, устанавливать значения по умолчанию и определять @property , может ли свойство наследовать значения или нет. В Chrome со 119 версии.

--sprite-fs — в данном случае является начальной точкой отсчета кадров (сейчас выставлен 0, но можно изменять и начинать анимацию с любого кадра)

Далее, необходимые обязательные переменные:

/* Количество колонок */ --sprite-c: 5; /* Высота Sprite Sheet */ --sprite-h: 345; /* Ширина Sprite Sheet */ --sprite-w: 640; /* Количество кадров */ --sprite-f: 15;

Как вы уже догадались, далее идет несложная математика:

/* Считаем количество кадров (от 0 поэтому, 15 - 1) */ --sprite-fe: calc(var(--sprite-f) - 1); /* Считаем количество строк с округлением до большего целого числа (15/5 = 3) */ --sprite-r: round(up, calc(var(--sprite-f) / var(--sprite-c)), 1); /* Считаем высоту отдельного фрейма (345/3 = 115) */ --sprite-sh: calc(var(--sprite-h) / var(--sprite-r)); /* Данное свойство изменяемое, можно вводить любое значение чтобы изменять высоту спрайта при  отрисовке */ --sprite-th: 100; /* default: var(--sprite-sh) */ /* Aspect ratio для пропорционального изменения ширины (~0.869) */ --sprite-ar: calc(var(--sprite-th) / var(--sprite-sh)); /* Обновленный размер ширины и высоты Sprite Sheet (w: ~556.52, ~h:300) */ --sprite-uh: calc(var(--sprite-h) * var(--sprite-ar)); --sprite-uw: calc(var(--sprite-w) * var(--sprite-ar)); /* Считаем ширину отдельного фрейма (556.52/5 = 111.30) */ --sprite-tw: calc(var(--sprite-uw) / var(--sprite-c));

Далее задаем свойства нашего элемента:

/* Высота блока куда будет выводится анимация */ height: calc(1px * var(--sprite-th));  /* Ширина блока куда будет выводится анимация */ width: calc(1px * var(--sprite-tw)); /* Sprite Sheet */ background-image: var(--sprite-image); /* Итоговый размер background с учетом aspect ratio */ background-size: calc(1px * var(--sprite-uw)) calc(1px * var(--sprite-uh));

А теперь то что стало возможным с введением round и mod:

/* Да, это всё еще CSS) */ /* Расчет текущей строки, определяем выходит ли наше изображение на пределы ширины Sprite Sheet */ /* Определяем шаг по X ((ширина спрайта * текущий кадр) / ширину спрайт листа) */ /* Округляем в меньшую сторону, находим позицию строки Y (0,1,2) умножаем на высоту спрайта для координат */ --row: calc(round(down, calc(calc(var(--sprite-tw) * var(--sprite-fs)) / var(--sprite-uw)), 1) * var(--sprite-th)); /* Расчет текущей колонки */ /* Остаток от деления по X (ширина спрайта * текущий кадр) / ширину спрайт листа */ /* Позволяет определить позицию по X. В нашем примере (0,1,2,3,4)) */ --col: mod(calc(var(--sprite-tw) * var(--sprite-fs)), var(--sprite-uw));

Переводим в px, выставляем background-size:

background-position: calc(-1px * var(--col)) calc(-1px * var(--row));

Анимируем

Тут все очень просто

@keyframes frame {     to {         --sprite-fs: var(--sprite-fe);     } }

Ранее мы задавали @property --sprite-fs, которое обозначало кадр начала анимации, теперь мы задаем to --sprite-fe (индекс последнего кадра) т.е. анимация будет выполняться от 0 до 14 (15 кадров).

Анимируем:

/* animation duration */ --sprite-as: 4s; /* animation direction */ --sprite-ad: normal; /* animation fill mode */ --sprite-af: none; /* animation play state */ --sprite-ap: running; /* animation iteration count */ --sprite-ai: infinite; /* animation timing function */ --sprite-at: linear;  /* одинокий delay в 0s :) */ animation: frame var(--sprite-as) var(--sprite-at) 0s var(--sprite-ai) var(--sprite-ad) var(--sprite-af) var(--sprite-ap);

Результат

P.S.: Первый пост, на платформе. (Пока разбираюсь).

Демо с настройками анимации (правый верхний угол): https://codepen.io/Maseone/pen/oNRxxWX