Управление состоянием

ScrollMagic — это мощная библиотека для создания анимаций и интерактивного поведения на странице, зависящего от скролла. Основная единица управления анимацией в ScrollMagic — сцена (Scene), и управление её состоянием является ключевым аспектом эффективного использования библиотеки.

Основные состояния сцены

Каждая сцена имеет три ключевых состояния, которые определяют её текущее поведение относительно прокрутки страницы:

  1. BEFORE — сцена ещё не активирована, скролл находится выше стартовой позиции сцены.
  2. DURING — сцена активна, скролл находится внутри диапазона триггера.
  3. AFTER — сцена завершила своё активное состояние, скролл находится ниже конечной позиции сцены.

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

Проверка состояния сцены

Метод scene.state() возвращает текущее состояние сцены. Он может использоваться для условного выполнения логики:

if(scene.state() === "DURING") {
    console.log("Сцена активна");
}

Для отслеживания изменений состояния применяется событие change:

scene.on("change", function(event) {
    console.log("Состояние сцены изменилось на:", event.target.state());
});

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

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

ScrollMagic предоставляет методы enable() и disable() для контроля активности сцены. Отключённая сцена (disabled) не реагирует на скролл и не изменяет своё состояние. Пример:

scene.disable(); // сцена перестаёт реагировать на скролл
scene.enable();  // сцена снова активна

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

Управление сценой через прогресс

Состояние сцены тесно связано с её прогрессом. Метод scene.progress() возвращает значение от 0 до 1, отражающее, насколько прокрутка прошла через сцену:

  • 0 — скролл находится в начале сцены (BEFORE).
  • 1 — скролл прошёл полностью через сцену (AFTER).
  • Значения между 0 и 1 соответствуют состоянию DURING.

Пример динамической анимации на основе прогресса:

scene.on("progress", function(event) {
    const progress = event.progress;
    element.style.opacity = progress; // плавное появление элемента
});

События состояния

ScrollMagic предоставляет несколько событий для контроля состояния сцены:

  • enter — срабатывает при входе в сцену (переход в DURING).
  • leave — срабатывает при выходе из сцены (переход в BEFORE или AFTER).
  • start и end — специальные события, срабатывающие при достижении начала или конца сцены.

Пример комбинирования событий:

scene.on("enter", function() {
    element.classList.add("active");
});

scene.on("leave", function() {
    element.classList.remove("active");
});

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

Манипуляции с состоянием вручную

Хотя ScrollMagic автоматически управляет состоянием в зависимости от прокрутки, библиотека позволяет вручную изменять состояние сцены через метод scene.setState(state) (в старых версиях) или использовать методы активации/деактивации. В современном подходе чаще применяется управление через триггер и прогресс, что обеспечивает предсказуемое и отзывчивое поведение.

Сценарии использования управления состоянием

  1. Фиксация элемента на экране С помощью состояния сцены можно управлять фиксацией элемента: когда сцена в состоянии DURING, элемент остаётся закреплённым, после выхода — возвращается в обычное положение.

  2. Запуск анимаций при входе и выходе из сцены Использование событий enter и leave позволяет запускать CSS или JS-анимации точно в момент пересечения триггера.

  3. Условное поведение элементов Проверка состояния сцены через scene.state() позволяет реализовать условные эффекты: например, изменять стиль заголовка, когда сцена активна, и возвращать стиль обратно после выхода.

  4. Синхронизация нескольких сцен Состояние сцены удобно использовать для координации нескольких анимаций на странице. Например, можно запускать вторую сцену только когда первая достигла состояния AFTER.

Резюме ключевых методов и событий

Метод / Событие Назначение
scene.state() Возвращает текущее состояние сцены (BEFORE, DURING, AFTER)
scene.progress() Возвращает прогресс сцены от 0 до 1
scene.enable() / scene.disable() Включение и отключение сцены
scene.on("change", ...) Отслеживание изменения состояния сцены
scene.on("enter", ...) Действие при входе в сцену
scene.on("leave", ...) Действие при выходе из сцены

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

Оглавление