Need for speed
#frontend #css #animation #stylus

Мы давно знаем, как управлять плавностью анимации в CSS. Но бывают ситуации, когда изинг невозможно реализовать по двум точкам на кривой Безье.

Например, необходимо реализовать поведение стрелки спидометра на чистом CSS. Стрелка разгоняется от начального положения до заданного значения и колеблется вокруг него, постепенно замирая.

Динамика движения стрелки описывается функцией с плавным ростом и затухающими колебаниями возле целевого значения. Построить примерный график такой функции можно на клетчатом листе бумаги, рассчитав ее значения для нескольких ключевых точек. По оси x откладывается время анимации от 0 до 100 %, а по оси y — прогресс движения стрелки от 0 до 1.

Построить интерполированный график и получить промежуточные значения координат поможет сервис кубической интерполяции. Чтобы получить достаточное количество точек установим Step X Output, равный 1. Модифицировать график в интерактивном режиме можно с помощью опции «Интерактивный график JSXGraph».

На основе полученных точек можно произвести расчет ключевых кадров с помощью конструкции цикла в препроцессоре Stylus. Поворот стрелки спидометра изменяется свойством transform: rotate().

Готовую анимацию и код ее исполнения можно увидеть здесь.

💡Чтобы не «зашивать» координаты функции в CSS, можно хранить их в отдельном JSON-файле, а затем импортировать в Stylus: points = json('data.json', { hash: true }).

Проявляем смеCALCу в препроцессорах
#frontend #css #stylus #sass #less

Функция calc() дает возможность проводить математические операции прямо в CSS, причем передавать в нее можно разные единицы измерения. Чтобы использовать все возможности этой функции, необходимо обращаться из нее к переменным.

Чистый CSS позволяет делать это без проблем — обращение к переменной производится путем вызова функции var():

--offset: 16px;
.block {
  width: calc(100% - var(--offset));
}

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

В SASS для вызова из calc() переменную нужно обернуть в #{ }:

$offset: 16px;
.block {
  width: calc(100% - #{$offset});
}

В Less это делается похожим образом, но строка с calc() экранируется:

@offset: 16px;
.block {
  width: ~"calc(100% - @{offset})";
}

В Stylus синтаксис чуть сложнее:

$offset = 16px;
.block {
  width "calc(100% - %s)" % $offset
}

Если необходимо использовать несколько переменных, Stylus позволяет делать так:

$breadth = 100%;
$offset = 16px;
.block {
  width "calc(%s - %s)" % ($breadth $offset)
}