Кубические кривые Безье

Кубическая кривая Безье — это параметрическая кривая, которая определяется четырьмя точками управления: P₀, P₁, P₂, P₃. Она является расширением квадратичных кривых Безье и позволяет более гибко управлять формой траектории. Формула кубической кривой Безье записывается следующим образом:

[ 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, t ]

где:

t — параметр, изменяющийся от 0 до 1,
P₀ — начальная точка кривой,
P₁, P₂ — управляющие точки, определяющие форму кривой,
P₃ — конечная точка кривой.

Кривая проходит через точки P₀ и P₃, а точки P₁ и P₂ влияют на направление и «натяжение» кривой, не находясь на самой траектории.

Свойства кубических кривых Безье

Линейность по контрольным точкам Любое изменение координат одной из контрольных точек изменяет кривую пропорционально. Это позволяет создавать динамические анимации с плавным переходом форм.
Инвариантность относительно преобразований Кривые Безье сохраняют форму при масштабировании, повороте или переносе всех точек управления.
Гладкость Кубическая кривая Безье имеет непрерывную первую и вторую производную. Это обеспечивает плавность анимаций без резких изломов.
Композиция кривых Несколько кубических кривых можно соединять в одну траекторию, обеспечивая непрерывность и гладкость. При этом важно согласовывать концы кривых, чтобы избежать скачков в скорости движения.

Интерполяция и производные

Для анализа движения вдоль кривой используется производная по параметру t:

[ B’(t) = 3(1-t)^2 (P_1 - P_0) + 6(1-t)t (P_2 - P_1) + 3 t^2 (P_3 - P_2)]

Свойства производной:

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

Вторая производная:

[ B’’(t) = 6(1-t)(P_2 - 2P_1 + P_0) + 6t (P_3 - 2P_2 + P_1)]

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

Применение в AOS (Animate on Scroll)

В библиотеке AOS кубические кривые Безье используются для создания плавных переходов элементов при прокрутке страницы. В частности, при настройке параметра easing можно указать кастомную кривую:

AOS.init({
  duration: 1200,
  easing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
});

Пояснение параметров:

Четыре числа в функции cubic-bezier(x1, y1, x2, y2) соответствуют координатам управляющих точек, задающих форму кривой,
Первый и последний аргументы обычно фиксированы в 0 и 1, чтобы кривая начиналась и заканчивалась на границах анимации,
Изменение внутренних координат позволяет создавать эффекты ускорения, замедления, «отскока» и «мягкого старта/остановки».

Практические примеры кубических кривых

Линейное ускорение и замедление (ease-in-out)

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

Резкий старт и плавное завершение (ease-out)

transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

Мягкий старт с ускорением (ease-in)

transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

Каждый из этих вариантов можно применять к элементам с анимацией при скролле через AOS, обеспечивая уникальные визуальные эффекты без дополнительного JavaScript.

Инструменты для визуализации

Для настройки кривых удобно использовать онлайн-инструменты, такие как cubic-bezier.com, которые позволяют интерактивно изменять контрольные точки и сразу видеть результат. Это ускоряет подбор параметров анимации, особенно при сложных интерфейсах с множеством анимируемых элементов.