BackwardStart - старт с конца

mo.js поддерживает построение анимаций через декларативные объекты, где ключевую роль играют временные шкалы, направления воспроизведения и управление стартовыми состояниями. Концепция BackwardStart относится к стратегии запуска анимации с конечного состояния, при которой визуальный элемент изначально воспринимается как уже завершивший своё движение и затем «разворачивает» анимацию к начальному состоянию.

Суть BackwardStart

BackwardStart описывает подход, при котором:

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

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

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

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

Логика временной шкалы и направление

В анимационной модели mo.js ключевым элементом является timeline. BackwardStart концептуально связан с:

  • направлением воспроизведения (forward / reverse)
  • установкой прогресса таймлайна на 100% в момент инициализации
  • последующим проигрыванием к 0%

Эквивалентное поведение можно описать через обратное проигрывание:

const timeline = new mojs.Timeline();

timeline.add([
  new mojs.Html({
    el: '.box',
    x: { 300: 0 },
    opacity: { 0: 1 },
    duration: 600,
    easing: 'ease.out'
  })
]);

timeline.playBackward(); // концептуальный BackwardStart

В реальной архитектуре библиотек подобного типа BackwardStart может реализовываться через:

  • reverse playback
  • инверсию ключевых кадров
  • установку прогресса анимации вручную

Поведение объектов при BackwardStart

При использовании обратного старта изменяется интерпретация ключевых параметров:

1. Позиционные значения

Обычная логика:

  • from → to

BackwardStart:

  • объект визуально находится в to
  • затем анимируется к from
new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  x: { 0: 200 },
  duration: 800
});

При BackwardStart интерпретация становится обратной: круг появляется уже с радиусом 50 и координатой 200, после чего «схлопывается» к исходной точке.

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

Особенно выразительно BackwardStart работает с opacity:

  • элемент уже видим
  • затем плавно исчезает или проявляется в обратном направлении
new mojs.Html({
  el: '.panel',
  opacity: { 0: 1 },
  duration: 500
});

При обратном старте пользователь воспринимает эффект как постепенное проявление уже существующего интерфейса.

Использование в timeline-композициях

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

Синхронный обратный старт

const timeline = new mojs.Timeline({ backwardStart: true });

timeline.add([
  new mojs.Shape({
    shape: 'rect',
    x: { 400: 0 },
    duration: 700
  }),
  new mojs.Html({
    el: '.title',
    y: { -50: 0 },
    delay: 100,
    duration: 500
  })
]);

timeline.play();

В таком сценарии:

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

Связь с состояниями интерфейса

BackwardStart часто используется как мост между состояниями UI:

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

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

Комбинация с easing-функциями

При обратном старте easing-функции меняют восприятие движения:

  • ease.out становится ease.in при инверсии
  • bounce-эффекты выглядят как «сжатие»
  • elastic-анимации превращаются в постепенное затухание колебаний
new mojs.Shape({
  shape: 'circle',
  scale: { 1: 0 },
  easing: 'ease.out',
  duration: 900
});

При BackwardStart визуально это воспринимается как медленное появление уже существующего объекта с последующим «закреплением» в исходной форме.

Практика построения интерфейсных сцен

BackwardStart особенно эффективен в сценариях:

Переключение экранов

  • экран уже отрисован
  • анимация возвращает его в скрытое состояние

Анимация отмены действий

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

Прототипирование UI

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

Особенности восприятия движения

BackwardStart изменяет когнитивную модель анимации:

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

Такой эффект особенно полезен при создании интерфейсов, где важна иллюзия контроля времени и состояния сцены.

Оглавление