Жизненный цикл сцены

ScrollMagic организует анимацию и взаимодействие с прокруткой вокруг сцен (Scene). Сцена представляет собой область, на которой происходит триггер событий и анимаций. Понимание жизненного цикла сцены критично для корректного использования библиотеки и управления её поведением.

Жизненный цикл сцены можно разделить на несколько ключевых этапов:

1. Инициализация сцены

Сцена создается через конструктор ScrollMagic.Scene():

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300,
    offset: 50,
    triggerHook: 0.5
});

Ключевые параметры:

  • triggerElement — элемент, который запускает сцену.
  • duration — длина сцены в пикселях или функция, возвращающая длину.
  • offset — смещение начала сцены относительно триггера.
  • triggerHook — позиция на экране, при которой срабатывает сцена (0 — верх, 1 — низ).

На этапе инициализации сцена существует в памяти, но не привязана к контроллеру и не отслеживает прокрутку.

2. Добавление сцены в контроллер

Чтобы сцена начала реагировать на скролл, её необходимо добавить в ScrollMagic.Controller:

var controller = new ScrollMagic.Controller();
controller.addScene(scene);

Добавление в контроллер запускает внутренние процессы:

  • Расчет позиции триггера.
  • Подписка на события прокрутки.
  • Активация внутренних флагов состояния сцены (enabled, progress).

С этого момента сцена становится «живой» и готова реагировать на скролл пользователя.

3. Отслеживание прогресса сцены

Сцена поддерживает динамическое отслеживание прогресса:

scene.on("progress", function (event) {
    console.log(event.progress);
});

Параметр progress изменяется от 0 до 1 в зависимости от прокрутки:

  • 0 — сцена ещё не активирована.
  • 0.5 — сцена наполовину пройдена.
  • 1 — сцена полностью завершена.

Прогресс может быть использован для привязки анимаций через TweenMax или GSAP:

var tween = TweenMax.to("#box", 1, {x: 500});
scene.setTween(tween);

4. Активация и деактивация сцены

Сцена может находиться в двух основных состояниях:

  • Inactive — прокрутка ещё не достигла триггера (progress = 0).
  • Active — сцена в процессе прокрутки или полностью завершена (0 < progress <= 1).

События жизненного цикла для активации:

scene.on("enter", function(event) {
    console.log("Сцена активирована");
});
scene.on("leave", function(event) {
    console.log("Сцена покинута");
});
  • enter срабатывает, когда прокрутка достигает триггера.
  • leave срабатывает, когда прокрутка выходит за пределы сцены.

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

5. Управление длительностью и динамическим смещением

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

scene.duration(function() {
    return document.querySelector("#content").offsetHeight;
});

Важные моменты:

  • Изменение duration в процессе работы сцены автоматически пересчитывает прогресс.
  • offset позволяет сдвинуть начало сцены относительно триггер-элемента.
  • Любые изменения параметров сцены после добавления в контроллер требуют вызова scene.refresh() для пересчета позиции.

6. Деактивация и удаление сцены

Сцена может быть отключена или удалена:

scene.destroy(true); // полностью удаляет сцену и все слушатели

Параметр true очищает DOM от привязанных стилей и событий. Также можно временно отключить сцену без удаления:

scene.enabled(false);
  • Сцена перестает реагировать на скролл.
  • Прогресс фиксируется на текущем значении.
  • Можно повторно включить через scene.enabled(true).

7. Полезные методы жизненного цикла

  • scene.setTween(tween) — привязка анимации.
  • scene.setPin(element, {pushFollowers: true}) — закрепление элемента.
  • scene.addIndicators() — вывод визуальных индикаторов для отладки.
  • scene.refresh() — пересчет позиции и длины сцены.
  • scene.remove() — удаление сцены из контроллера без уничтожения объекта.

Эти методы позволяют полностью управлять сценой на всех этапах её жизненного цикла.

8. Рекомендации по управлению жизненным циклом

  • Всегда создавать сцены перед добавлением в контроллер.
  • Для динамических страниц пересчитывать duration и вызывать refresh() после изменений DOM.
  • Использовать события enter и leave для синхронизации сложных анимаций.
  • Деструктурировать сцены через destroy(true) при переходах между страницами, чтобы избежать утечек памяти.

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

Оглавление