Встроенные easing функции

Модель временных функций в системе анимации

В основе системы временных преобразований mo.js лежит параметризация изменения значения анимации во времени через easing-функции. Каждая такая функция определяет характер интерполяции между начальным и конечным состоянием анимационного параметра, преобразуя линейный прогресс t ∈ [0, 1] в нелинейное значение.

Ключевая особенность встроенного набора easing в mo.js заключается в унификации интерфейса: каждая функция представляется как объект с вариантами направлений in, out, inOut, что формирует три основные модели поведения кривой.

Базовый синтаксис применения easing

В конфигурации анимационных сущностей mo.js easing задаётся через параметр easing:

const tween = new mojs.Tween({
  duration: 1000,
  easing: mojs.easing.cubic.out,
  onUpdate(progress) {
    // progress уже модифицирован easing-функцией
  }
});

Допускается использование строкового формата:

easing: 'cubic.out'

Или объектного доступа через пространство имён:

mojs.easing.back.inOut

Структура встроенных easing-групп

В mo.js набор функций заимствует классическую модель Penner easing и расширяет её вариациями направлений. Основные группы включают:

  • Linear
  • Sine
  • Quad
  • Cubic
  • Quart
  • Quint
  • Expo
  • Circ
  • Back
  • Bounce
  • Elastic

Каждая группа определяет форму кривой ускорения и замедления, влияя на визуальную динамику анимации.

Linear

Линейная функция представляет равномерное изменение без ускорений и замедлений. В mo.js она используется как базовая контрольная модель поведения.

easing: mojs.easing.linear.none

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

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

Sine

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

Доступные варианты:

mojs.easing.sin.in
mojs.easing.sin.out
mojs.easing.sin.inOut

Поведение:

  • мягкое начало при in
  • мягкое завершение при out
  • симметричная плавность при inOut

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

Quadratic, Cubic, Quartic, Quintic группы

Эти семейства основаны на степенных функциях и различаются степенью кривой:

  • Quad: t²
  • Cubic: t³
  • Quart: t⁴
  • Quint: t⁵

Quadratic

mojs.easing.quad.in
mojs.easing.quad.out
mojs.easing.quad.inOut

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

Cubic

mojs.easing.cubic.in
mojs.easing.cubic.out
mojs.easing.cubic.inOut

Более выраженная динамика по сравнению с quad, используется для заметных интерфейсных акцентов.

Quart и Quint

mojs.easing.quart.in
mojs.easing.quint.out

Характеризуются резким ускорением и сильным замедлением на краях диапазона.

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

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

Exponential easing

Экспоненциальные функции создают наиболее агрессивные изменения скорости.

mojs.easing.expo.in
mojs.easing.expo.out
mojs.easing.expo.inOut

Характер:

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

Типичное применение связано с эффектами появления и исчезновения элементов.

Circular easing

Круговые функции основаны на геометрии окружности и обеспечивают физически интерпретируемую плавность.

mojs.easing.circ.in
mojs.easing.circ.out
mojs.easing.circ.inOut

Свойства:

  • естественная инерция
  • мягкая деформация скорости
  • визуальная близость к движению объектов в реальном мире

Back easing

Back-функции создают эффект «перелёта» за конечную точку с последующим возвратом.

mojs.easing.back.in
mojs.easing.back.out
mojs.easing.back.inOut

Математически добавляется коэффициент амплитуды overshoot.

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

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

Bounce easing

Bounce имитирует поведение объекта при падении и последующих отскоках.

mojs.easing.bounce.in
mojs.easing.bounce.out
mojs.easing.bounce.inOut

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

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

Наиболее часто применяется в декоративных анимациях и игровых интерфейсах.

Elastic easing

Elastic создаёт эффект упругого колебания вокруг конечной точки.

mojs.easing.elastic.in
mojs.easing.elastic.out
mojs.easing.elastic.inOut

Свойства:

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

Используется для выразительных анимационных акцентов, требующих высокой степени визуальной «живости».

Направления easing: in, out, inOut

Каждая базовая функция в mo.js расширяется тремя модификаторами поведения:

In

Ускорение от нуля к максимальной скорости.

cubic.in

Характеризует постепенное «разгоняющееся» движение.

Out

Замедление к финальной точке.

cubic.out

Наиболее распространённый вариант в интерфейсных переходах.

InOut

Комбинированная модель: ускорение в начале и замедление в конце.

cubic.inOut

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

Комбинации и составные кривые

Внутренний механизм mo.js допускает использование кастомных кривых через cubic-bezier, которые могут сочетаться с предустановленными easing-моделями для построения гибридных эффектов.

easing: 'M0,0 C0.2,0.8 0.2,1 1,1'

Такая форма позволяет точно контролировать ускорение на каждом участке интервала.

Поведение easing в Tween и Shape анимациях

В tween-анимациях easing влияет непосредственно на интерполяцию числовых значений, тогда как в shape-анимациях mo.js он управляет параметрами трансформации:

  • масштабирование
  • прозрачность
  • перемещение
  • деформация пути

Применение одной и той же функции к разным параметрам даёт различный визуальный результат из-за контекста трансформации.

Практические паттерны использования групп easing

Систематизация выбора easing часто строится на функциональных ролях:

  • интерфейсные переходы: quad.out, cubic.out, sin.out
  • акцентные появления: expo.out, back.out
  • физические эффекты: bounce.out, elastic.out
  • технические анимации: linear.none
  • мягкие переходы: sin.inOut, circ.inOut

Особенности интерполяции значений

Все easing-функции mo.js работают в нормализованном диапазоне времени t ∈ [0,1]. Результирующее значение не обязательно линейно связано с исходной функцией времени, что позволяет:

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

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

Поведение сложных easing в цепочках анимаций

При последовательных анимациях (timeline) easing может накладываться на каждый сегмент отдельно. Это формирует сложные кривые движения, где итоговая динамика определяется композицией нескольких функций.

Пример логики:

  • первый сегмент: expo.out
  • второй сегмент: sin.inOut
  • третий сегмент: back.in

Результирующее движение приобретает многослойную динамическую структуру.

Оглавление