Cubic bezier

В системах анимации на базе Motion One кривые временной функции определяют то, как изменяется скорость значения во времени. Cubic Bézier используется как основной механизм задания easing-функций, позволяя точно контролировать ускорение и замедление анимации без необходимости писать собственные функции интерполяции.

Cubic Bézier-кривая задаётся четырьмя точками:

  • P0 — всегда фиксирована в (0, 0)
  • P1 — первая контрольная точка
  • P2 — вторая контрольная точка
  • P3 — всегда фиксирована в (1, 1)

Функция описывает изменение прогресса анимации t во времени через параметрическое уравнение:

B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t)t^2 P_2 + t^3 P_3

В контексте easing-кривых используется не вся геометрия, а проекция X (время) → Y (прогресс). Именно поэтому cubic-bezier в анимациях — это функция преобразования временной оси в нелинейное изменение значения.

Формат cubic-bezier в Motion One

В Motion One cubic-bezier задаётся через массив из четырёх чисел:

import { animate } from "motion";

animate(
  ".box",
  { x: 300 },
  {
    easing: [0.25, 0.1, 0.25, 1]
  }
);

Параметры:

  • x1 — первая контрольная точка по оси X
  • y1 — первая контрольная точка по оси Y
  • x2 — вторая контрольная точка по оси X
  • y2 — вторая контрольная точка по оси Y

Эти значения определяют форму кривой, которая влияет на распределение скорости.

Как интерпретировать контрольные точки

Контрольные точки не задают саму траекторию движения объекта. Они управляют тем, как быстро происходит прогресс анимации.

  • Ось X — время (0 → 1)
  • Ось Y — прогресс (0 → 1)

Поведение кривой

  • Если контрольные точки ближе к (0, 0), ускорение происходит резко в начале
  • Если ближе к (1, 1), замедление происходит в конце
  • Если точки смещены вверх, возникает эффект «переразгона»
  • Если точки ниже диагонали, появляется «провал» скорости

Стандартные кривые

В Motion One часто используются предустановленные значения cubic-bezier:

ease

easing: [0.25, 0.1, 0.25, 1]

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

ease-in

easing: [0.42, 0, 1, 1]

Поведение: медленный старт с постепенным ускорением.

ease-out

easing: [0, 0, 0.58, 1]

Поведение: быстрое начало с плавным торможением.

ease-in-out

easing: [0.42, 0, 0.58, 1]

Поведение: сочетание ускорения в начале и замедления в конце.

Влияние cubic-bezier на ощущение анимации

Cubic-bezier напрямую влияет на субъективное восприятие интерфейса:

  • Резкие кривые создают ощущение «механичности»
  • Плавные кривые формируют «естественное движение»
  • Ассиметричные кривые создают эффект инерции

В UI-анимациях Motion One позволяет точно балансировать между скоростью и мягкостью переходов.

Построение собственной кривой

Контрольные точки можно подбирать вручную:

animate(
  ".card",
  { opacity: 1, y: 0 },
  {
    easing: [0.2, 0.8, 0.2, 1]
  }
);

Такой вариант создаёт эффект мягкого «всплытия», где движение сначала замедлено, затем ускоряется и снова замедляется.

Типовые паттерны поведения кривых

Резкое появление

easing: [0.12, 0, 0.39, 0]

Используется для мгновенных интерфейсных переключений.

Эластичное замедление

easing: [0.34, 1.56, 0.64, 1]

Создаёт эффект инерции и «перелёта» конечной точки.

Линейное движение

easing: [0, 0, 1, 1]

Используется в технических или синхронных анимациях без выразительности.

Связь cubic-bezier и времени анимации

Cubic-bezier не изменяет длительность анимации, но перераспределяет её внутри временного интервала.

Если представить анимацию длительностью 1000ms:

  • первые 200ms могут содержать 80% движения
  • оставшиеся 800ms — лишь плавное завершение

Или наоборот — медленный старт с резким финалом.

Практическое влияние на производительность восприятия

В системах интерфейсной анимации Motion One cubic-bezier используется для:

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

Комбинирование cubic-bezier с keyframes

animate(
  ".element",
  {
    scale: [0.8, 1.2, 1],
    opacity: [0, 1]
  },
  {
    duration: 800,
    easing: [0.22, 1, 0.36, 1]
  }
);

В таком случае easing влияет на всю последовательность keyframes, распределяя скорость между точками интерполяции.

Ограничения cubic-bezier

Несмотря на гибкость, cubic-bezier имеет особенности:

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

В таких случаях используются физические модели анимации, но cubic-bezier остаётся стандартом для интерфейсных переходов благодаря предсказуемости и простоте настройки в Motion One

Оглавление