Встроенные функции плавности

Роль easing-функций в анимации

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

Базовая модель анимации опирается на нормализованное время:

  • t = 0 — начало анимации
  • t = 1 — завершение
  • easing(t) → преобразованное значение прогресса

Ключевая идея: easing изменяет не саму анимацию, а распределение прогресса.

Базовые линейные и степенные функции

linear

Линейная функция не искажает прогресс:

linear: t => t

Особенности:

  • равномерная скорость
  • отсутствует ускорение
  • используется как базовый эталон

quad, cubic, quart, quint

Группа степенных функций увеличивает степень кривой:

  • quad — t²
  • cubic — t³
  • quart — t⁴
  • quint — t⁵

Поведение:

  • quad: мягкое ускорение
  • cubic: более выраженная динамика
  • quart/quint: резкое изменение скорости ближе к концу или началу

Типовые формы:

quadIn:  t => t * t
quadOut: t => t * (2 - t)

Обобщённая логика:

  • In — ускорение от нуля
  • Out — замедление к финалу
  • InOut — комбинированное поведение

Классические тригонометрические функции

sine

Основана на синусоиде:

sineIn:  t => 1 - Math.cos((t * Math.PI) / 2)
sineOut: t => Math.sin((t * Math.PI) / 2)

Характеристики:

  • плавное начало и завершение
  • минимальная резкость
  • визуально «естественное» движение

circ (circular)

Функция окружности:

circIn:  t => 1 - Math.sqrt(1 - t * t)
circOut: t => Math.sqrt(1 - (t - 1) * (t - 1))

Особенности:

  • ускорение как у объекта, набирающего инерцию
  • мягкое приближение к конечной точке
  • более выраженная физическая модель по сравнению с sine

Экспоненциальные функции

expo

Экспоненциальное изменение скорости:

expoIn:  t => Math.pow(2, 10 * (t - 1))
expoOut: t => 1 - Math.pow(2, -10 * t)

Поведение:

  • почти незаметное движение в начале
  • резкий скачок ближе к завершению
  • используется для драматичных переходов

Упругие и «физические» функции

elastic

Имитация пружины:

elasticOut: t =>
  Math.sin((-13 * (Math.PI / 2)) * (t + 1)) *
  Math.pow(2, -10 * t) + 1

Свойства:

  • переразгон (overshoot)
  • колебания вокруг цели
  • затухающие вибрации

back

Функция «оттягивания»:

backOut: t => {
  const s = 1.70158
  return (t - 1) * (t - 1) * ((s + 1) * (t - 1) + s) + 1
}

Особенности:

  • движение выходит за предел целевого значения
  • затем возвращается обратно
  • имитирует инерцию и сопротивление

bounce

Модель отскока:

bounceOut: t => {
  if (t < 1 / 2.75) {
    return 7.5625 * t * t
  } else if (t < 2 / 2.75) {
    return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75
  } else if (t < 2.5 / 2.75) {
    return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375
  } else {
    return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375
  }
}

Поведение:

  • серия уменьшающихся отскоков
  • имитация падения объекта на поверхность
  • используется для игровых и UI-эффектов

Комбинированные easing-функции

easeIn, easeOut, easeInOut

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

  • In — ускорение
  • Out — замедление
  • InOut — симметричное поведение

Пример для cubic:

cubicIn: t => t * t * t

cubicOut: t => 1 + (--t) * t * t

cubicInOut: t =>
  t < 0.5
    ? 4 * t * t * t
    : 1 + (--t) * (2 * t) * (2 * t)

Логика InOut:

  • первая половина — ускорение
  • вторая половина — замедление
  • точка перегиба в середине

Step-функции

steps

Дискретная анимация:

steps: (steps, direction = 'end') => t => {
  const scaled = steps * t
  return direction === 'end'
    ? Math.floor(scaled) / steps
    : Math.ceil(scaled) / steps
}

Характеристики:

  • отсутствие плавности
  • скачкообразное изменение
  • используется для пиксельных или UI-эффектов

Математическая структура easing

Все встроенные функции можно привести к общей модели:

f: [0, 1] → [0, 1]

Свойства:

  • f(0) = 0
  • f(1) = 1
  • монотонность (в большинстве случаев)
  • непрерывность (кроме steps)

Исключения:

  • bounce — допускает локальные перегибы
  • elastic — допускает выход за пределы [0,1]

Сравнение классов функций

Поведенческая классификация

  • Линейные: linear
  • Полиномиальные: quad, cubic, quart, quint
  • Тригонометрические: sine, circ
  • Экспоненциальные: expo
  • Физические модели: back, elastic, bounce
  • Дискретные: steps

Визуальная динамика

  • Мягкая: sine, quadInOut
  • Контрастная: cubic, quart
  • Агрессивная: expo
  • Физически реалистичная: bounce, elastic
  • Резкая: steps

Применение в интерфейсной анимации

Перемещение объектов

Для перемещения по координате:

animate({
  from: 0,
  to: 300,
  ease: cubicOut
})

Результат:

  • старт ускоренный
  • остановка плавная

Масштабирование

animate({
  from: 0.5,
  to: 1,
  ease: backOut
})

Особенности:

  • эффект «переразгона»
  • визуальное усиление появления

Появление и исчезновение

animate({
  from: 0,
  to: 1,
  ease: sineInOut
})

Поведение:

  • равномерное восприятие
  • отсутствие резких переходов

Комбинирование easing с физикой

Easing часто используется совместно с:

  • пружинными системами
  • инерционными моделями
  • проскальзыванием (momentum scrolling)

Пример гибридной модели:

  • easing задаёт базовую кривую
  • физический слой добавляет вторичные эффекты

Ограничения встроенных функций

  • отсутствие контекстной адаптации
  • фиксированная форма кривой
  • невозможность динамического изменения поведения во времени
  • ограниченная выразительность без комбинирования

Расширяемость модели easing

Базовая система позволяет создавать пользовательские функции:

const customEase = t =>
  t < 0.5
    ? 2 * t * t
    : -1 + (4 - 2 * t) * t

Принцип:

  • сохранение диапазона [0,1]
  • контроль формы кривой
  • возможность имитации любых физических или художественных эффектов
Оглавление