IsShowStart и IsShowEnd

В mo.js параметры isShowStart и isShowEnd управляют моментами отображения анимационного объекта относительно жизненного цикла твина или таймлайна. Эти флаги определяют, будет ли элемент автоматически отображён в начале анимации и скрыт в конце, либо останется в DOM/рендер-слое после завершения проигрывания.

Флаг isShowStart отвечает за начальное состояние объекта перед запуском анимации. Когда параметр установлен в true, библиотека гарантирует, что элемент будет видим в момент старта проигрывания.

Внутренне это связано с тем, как mo.js управляет состоянием visibility и opacity через собственный механизм рендера. При включённом isShowStart объект не требует предварительного ручного показа — библиотека сама переводит его в активное состояние.

Ключевые особенности:

  • объект становится видимым до первого кадра анимации;
  • предотвращается ситуация, когда элемент “вспыхивает” с задержкой;
  • удобно использовать для последовательных анимаций в таймлайне;
  • снижает необходимость ручного управления состоянием DOM-элемента.

При значении false объект может оставаться скрытым до тех пор, пока не начнётся фактическое изменение свойств (например, opacity, scale, x, y).

Поведение isShowEnd

isShowEnd управляет финальным состоянием анимации. Этот параметр определяет, останется ли элемент видимым после завершения всех твинов или он будет скрыт автоматически.

При true:

  • элемент сохраняет итоговое состояние после окончания анимации;
  • не происходит автоматического скрытия;
  • удобно для UI-элементов, которые должны оставаться на экране (например, появляющиеся кнопки, индикаторы, подсказки).

При false:

  • mo.js скрывает элемент после завершения анимации;
  • происходит очистка визуального состояния;
  • элемент возвращается в “невидимое” состояние, даже если финальная позиция была рассчитана.

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

Связь с жизненным циклом анимации

mo.js использует событийную модель, где каждый tween или shape проходит стадии:

  1. инициализация
  2. подготовка к старту
  3. активная анимация
  4. завершение

isShowStart вступает в работу на этапе подготовки, до первого кадра. isShowEnd применяется на этапе завершения, когда таймлайн достигает финальной точки.

При работе в составе Timeline поведение становится более предсказуемым, поскольку каждый дочерний tween наследует или переопределяет эти параметры.

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

Взаимодействие с Timeline

В контексте mojs.Timeline параметры isShowStart и isShowEnd приобретают системное значение.

Если таймлайн содержит несколько анимаций:

  • isShowStart: true гарантирует, что все элементы появятся синхронно в момент старта таймлайна;
  • isShowEnd: false позволяет автоматически очищать сцену после завершения всей цепочки.

Однако важно учитывать, что таймлайн не всегда “ждёт” завершения визуального скрытия — он работает по времени, а не по DOM-состоянию. Поэтому возможны ситуации, когда визуально элемент ещё исчезает, а логически таймлайн уже завершён.

При вложенных таймлайнах параметры могут конфликтовать, если верхний уровень управляет видимостью, а внутренний пытается переопределить состояние. В таких случаях приоритет обычно остаётся за ближайшим tween или shape.

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

При создании интерфейсных анимаций эти параметры позволяют контролировать “чистоту сцены”.

Сценарий появления элементов:

const circle = new mojs.Shape({
  shape: 'circle',
  fill: 'cyan',
  radius: 30,
  isShowStart: true,
  isShowEnd: true,
  opacity: { 0: 1 },
  duration: 600
});

circle.play();

В этом случае элемент гарантированно появляется сразу и остаётся видимым после завершения.

Сценарий временного эффекта:

const burst = new mojs.Burst({
  radius: { 0: 100 },
  count: 10,
  children: {
    shape: 'circle',
    fill: 'orange',
    isShowStart: true,
    isShowEnd: false,
    duration: 800
  }
});

burst.play();

Здесь частицы появляются синхронно и автоматически скрываются после завершения эффекта, не оставляя следов в сцене.

Роль в сложных цепочках анимации

При построении многоступенчатых эффектов (например, последовательное появление UI-слоёв) управление видимостью становится критичным.

Типичная проблема без использования этих параметров — накопление “невидимых” элементов в DOM или на canvas-слое, которые продолжают занимать ресурсы.

Использование isShowEnd: false решает это, обеспечивая автоматическую очистку после завершения каждого твина.

В то же время isShowStart предотвращает визуальные разрывы между этапами анимации, особенно при использовании задержек (delay) или сложных таймлайнов.

Влияние на производительность и рендеринг

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

  • уменьшение количества видимых объектов снижает нагрузку на перерисовку;
  • автоматическое скрытие предотвращает лишние отрисовки;
  • корректное управление состоянием уменьшает количество “пустых” кадров.

В сценах с большим количеством Burst и Shape это становится особенно заметно.

Типичные ошибки при использовании

Часто встречающиеся проблемы связаны с неправильным ожиданием поведения флагов:

  • ожидание, что isShowEnd: false удаляет объект из памяти — на самом деле он лишь скрывает его;
  • конфликт между ручным управлением opacity и автоматическим скрытием;
  • использование isShowStart: false без явного управления появлением, что приводит к “невидимым” анимациям;
  • попытки переопределить видимость через CSS вместо внутренних механизмов mo.js.

Также важно учитывать, что в некоторых конфигурациях canvas-рендера скрытие может быть визуальным, но не структурным — объект остаётся в списке анимаций.

Взаимодействие с opacity и трансформациями

isShowStart и isShowEnd не заменяют свойства анимации, такие как opacity, scale или translate. Они работают на уровне управления отображением, тогда как tween-параметры отвечают за динамику изменений.

Конфликт возникает, если:

  • opacity анимируется до 0, но isShowEnd: true оставляет объект видимым логически;
  • scale анимируется в 0, но объект не скрывается, оставаясь в сцене без визуального следа.

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

Использование в цепочках событий

При работе с событиями onStart, onComplete эти параметры часто используются как вспомогательный механизм синхронизации.

isShowStart обеспечивает, что событие onStart не сработает на скрытом объекте. isShowEnd гарантирует, что onComplete не оставит “висящих” элементов после завершения логики.

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

Оглавление