Создавайте сложные кривые анимации в CSS с помощью функции плавности Linear().

Представляем функцию linear() , функцию сглаживания в CSS, которая выполняет линейную интерполяцию между точками, позволяя воссоздать эффекты отскока и пружинения.

Bramus

Сглаживание в CSS

При анимации или переходе элементов в CSS скорость изменения значения контролируется функцией сглаживания, использующей свойства animation-timing-function и transition-timing-function .

В CSS доступно несколько ключевых слов в качестве предустановок, а именно linear , ease , ease-in , ease-out и ease-in-out . Для создания собственных кривых сглаживания используйте функцию cubic-bezier() или подход, основанный на шагах, используя функцию steps() .

При правильном использовании сглаживание придает анимированному элементу ощущение веса, создавая впечатление, что он набирает скорость.

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

Введение в linear()

Новый способ определения сглаживания в CSS — использование функции linear() . Эта функция принимает несколько точек сглаживания, разделенных запятыми. Каждая точка сглаживания представляет собой число от 0 до 1. Между точками сглаживания интерполяция выполняется линейным образом, что и объясняет название функции.

animation-timing-function: linear(0, 0.25, 1);

Эти точки остановки по умолчанию расположены на равном расстоянии друг от друга. В приведенном выше фрагменте это означает, что выходное значение 0.25 будет использоваться на отметке 50%.

Визуально график для linear(0, 0.25, 1) выглядит следующим образом:

Если вы не хотите, чтобы остановки были равномерно распределены, вы можете дополнительно указать длину остановки . При передаче одного значения в качестве длины остановки вы определяете ее начальную точку:

animation-timing-function: linear(0, 0.25 75%, 1);

В данном случае выходное значение 0.25 не будет использоваться на отметке 50% , но будет использоваться на 75% .

При указании двух значений в качестве длины остановки вы определяете как начальную, так и конечную точку:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

В течение периода от 25% до 75% времени будет использоваться выходное значение 0,25.

Создавайте сложные кривые

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

Take this bounce easing curve, a type of easing that cannot be expressed directly in CSS, defined using JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Хотя сам код, возможно, мало что вам скажет, визуализация может многое дать. Вот результат, представленный в виде синей кривой:

Кривую можно упростить, добавив к ней несколько остановок. Здесь каждая зеленая точка обозначает остановку:

При передаче в linear() получается кривая, которая чем-то похожа на исходную, но имеет несколько более шероховатые края.

Сравните зелёный анимированный прямоугольник с синим, и вы заметите, что он не такой плавный.

Но если добавить достаточное количество точек остановки, можно довольно точно аппроксимировать исходную кривую. Вот обновлённая версия:

Просто удвоив количество остановок, вы уже получите плавный результат.

Код, используемый для анимации, выглядит следующим образом:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Инструмент для помощи

Создание такого списка остановок вручную было бы очень трудоемким процессом. К счастью, Джейк и Адам разработали инструмент, который поможет вам преобразовать кривую сглаживания в ее linear() аналог .

Инструмент принимает на вход функцию сглаживания JavaScript или кривую SVG и выводит упрощенную кривую с помощью linear() . Используйте ползунки для управления количеством остановок и их точностью.

В правом верхнем углу вы также можете выбрать один из предустановленных режимов: «Пружина», «Упругость», «Простая эластичность» или «Усиленное сглаживание в стиле Material Design».

Поддержка инструментов разработчика

В инструментах разработчика доступна функция визуализации и редактирования результата функции linear() . Щелкните значок, чтобы отобразить интерактивную всплывающую подсказку, позволяющую перетаскивать точки остановки.

Эта функция инструментов разработчика доступна в Chrome начиная с версии 114.