Elastic и bounce

Пружинящие (elastic) и отскакивающие (bounce) кривые смягчения относятся к нелинейным easing-функциям, имитирующим физическое поведение упругих тел. В контексте анимационной библиотеки mo.js эти типы easing применяются для придания движениям инерции, колебаний и эффекта реального столкновения с поверхностью.

Обе категории основаны на моделировании динамики системы с потерей или сохранением энергии, но отличаются характером затухания и частотой колебаний.

Математическая и поведенческая модель easing

Elastic-поведение описывается функцией, в которой присутствует экспоненциальное затухание и синусоидальные колебания:

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

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

В mo.js обе модели реализованы как готовые easing-строки, которые применяются к tween-анимациям.

Elastic easing в mo.js

Elastic easing применяется, когда требуется эффект «резинового» движения, например:

  • появление элементов с переразгоном
  • масштабирование UI-объектов с упругим возвратом
  • анимация трансформаций (scale, translate)

Основные варианты:

  • elastic.out
  • elastic.in
  • elastic.inout

Пример использования elastic.out

const tween = new mojs.Tween({
  duration: 1200,
  onUpdate: function (progress) {
    const eased = mojs.easing.elastic.out(progress);
    console.log(eased);
  }
});

В mo.js easing можно применять напрямую через строковое обозначение в параметрах анимации:

const animation = new mojs.Html({
  el: '.box',
  scale: { 0: 1 },
  duration: 1000,
  easing: 'elastic.out'
});

animation.play();

Поведение elastic.out

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

elastic.in

Обратная логика:

  • медленный старт с колебаниями
  • ускорение к финалу
  • эффект «натяжения перед отпусканием»

Bounce easing в mo.js

Bounce easing моделирует падение объекта под действием силы тяжести с последующей потерей энергии при каждом отскоке.

Варианты:

  • bounce.out
  • bounce.in
  • bounce.inout

Пример bounce.out

const animation = new mojs.Html({
  el: '.ball',
  y: { -300: 0 },
  duration: 1200,
  easing: 'bounce.out'
});

animation.play();

Поведение bounce.out

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

Сравнение elastic и bounce

Elastic и bounce часто визуально схожи, но различаются физической моделью:

Elastic:

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

Bounce:

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

Внутренняя реализация easing в mo.js

mo.js использует набор предопределённых easing-функций, реализованных через математические выражения. Elastic и bounce относятся к расширенным easing-кривым, не линейно интерполирующим значения.

Упрощённо поведение можно представить так:

progress -> easingFunction(progress) -> transformedProgress

Где:

  • progress ∈ [0, 1]
  • easingFunction изменяет распределение скорости
  • transformedProgress используется для вычисления свойств анимации

Применение в Html-анимациях mo.js

Elastic и bounce наиболее часто применяются в классе mojs.Html, так как он работает с DOM-элементами и позволяет анимировать:

  • transform (scale, translate, rotate)
  • opacity
  • фильтры

Elastic при появлении UI-элементов

new mojs.Html({
  el: '.modal',
  scale: { 0: 1 },
  opacity: { 0: 1 },
  duration: 800,
  easing: 'elastic.out'
}).play();

Эффект:

  • резкое появление
  • переразгон масштаба
  • мягкое возвращение к нормальному размеру

Bounce для вертикальных движений

new mojs.Html({
  el: '.notification',
  y: { -200: 0 },
  duration: 1000,
  easing: 'bounce.out'
}).play();

Эффект:

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

Комбинирование elastic и bounce с другими параметрами

Easing-функции в mo.js могут сочетаться с:

  • задержками (delay)
  • последовательными tween-цепочками
  • stagger-анимациями
  • burst-эффектами

Последовательная анимация с elastic и bounce

const step1 = new mojs.Html({
  el: '.card',
  scale: { 0: 1.2 },
  duration: 600,
  easing: 'elastic.out'
});

const step2 = new mojs.Html({
  el: '.card',
  scale: { 1.2: 1 },
  duration: 400,
  easing: 'bounce.out'
});

step1.then(step2).play();

Поведение:

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

Частые ошибки при использовании elastic и bounce

Неправильное применение приводит к визуальной перегрузке:

  • одновременное использование bounce и elastic на одном свойстве
  • применение bounce к scale вместо position
  • слишком большая длительность, размывающая эффект колебаний
  • отсутствие ограничения амплитуды в UI-компонентах

Производительность и особенности рендеринга

Elastic и bounce не требуют дополнительных ресурсов по сравнению с линейными easing, однако визуально сложные колебания могут:

  • увеличивать количество repaint в браузере
  • создавать ощущение «перегруженного интерфейса» при массовом применении
  • конфликтовать с CSS transitions при одновременном использовании

mo.js выполняет расчёт easing на стороне JavaScript, после чего передаёт значения в DOM через requestAnimationFrame цикл.

Практическая модель выбора между elastic и bounce

Elastic применяется при необходимости:

  • имитации упругих материалов
  • UI-эффектов с «живым» поведением
  • масштабных трансформаций

Bounce применяется при необходимости:

  • симуляции гравитации
  • движения по вертикали
  • падений и столкновений

Разделение этих моделей повышает предсказуемость интерфейса и снижает визуальный шум.

Оглавление