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

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

Ослабление в CSS

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

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

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

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

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

Поддержка браузера

  • Хром: 113.
  • Край: 113.
  • Фаерфокс: 112.
  • Сафари: 17.2.

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

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

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

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

Визуализация диаграммы линейных(0, 0,25, 1).

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

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

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

Визуализация диаграммы линейной (0, 0,25 75%, 1).

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

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

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

Визуализация диаграммы линейной (0, 0,25 25% 75%, 1).

Создание сложных кривых с помощью линейной()

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

Возьмем эту кривую замедления отскока — тип замедления, который нельзя выразить непосредственно в CSS, определенный с помощью 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() .

Скриншот инструмента генератора линейного замедления.
Скриншот https://linear-easing-generator.netlify.app/ в действии.

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

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

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

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

Снимок экрана редактора `linear()` Chrome DevTools.
Снимок экрана редактора `linear()` Chrome DevTools.

Эта функция DevTools доступна в DevTools, поставляемом с Chrome 114.

Фото Хоуи Мэпсона на Unsplash