Событие update

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

Когда вызывается update

Событие update триггерится при любом изменении параметров, влияющих на расчёт позиции сцены:

  • изменение позиции прокрутки (scroll position)
  • изменение размеров окна браузера
  • обновление контейнера прокрутки
  • вызов метода .update() вручную
  • изменение параметров сцены (например, duration, offset, triggerHook)

Важно понимать: update вызывается даже если сцена не активирована, но её расчётные параметры изменились.

Сигнатура обработчика

При подписке на событие используется стандартный синтаксис:

scene.on("update", function (event) {
    // обработка
});

Объект event содержит полезные данные:

  • event.startPos — позиция начала сцены
  • event.endPos — позиция конца сцены
  • event.scrollPos — текущая позиция прокрутки

Практическое значение

Событие update используется для:

1. Отслеживания геометрии сцены

Позволяет получать актуальные значения начала и конца сцены:

scene.on("update", function (event) {
    console.log("Start:", event.startPos);
    console.log("End:", event.endPos);
});

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

2. Синхронизации с внешними вычислениями

Можно использовать update для синхронизации данных с другими системами:

scene.on("update", function (event) {
    let progress = (event.scrollPos - event.startPos) / (event.endPos - event.startPos);
    console.log("Progress:", progress);
});

3. Отладки поведения сцены

Событие помогает понять, как ScrollMagic вычисляет позиции:

scene.on("update", function (event) {
    console.table(event);
});

Отличие от других событий

update vs progress

  • update — вызывается при пересчёте параметров сцены
  • progress — вызывается при изменении прогресса сцены (0 → 1)

update vs enter/leave

  • update не означает изменение состояния сцены
  • enter и leave сигнализируют о входе/выходе сцены из активной области

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

Частота вызова

Событие может вызываться очень часто, особенно при прокрутке. Это требует осторожности:

  • избегать тяжёлых вычислений
  • использовать throttle или debounce при необходимости

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

Неправильное использование может привести к падению FPS:

scene.on("update", function (event) {
    // плохо: сложные DOM-операции
});

Оптимизированный вариант:

let lastUpdate = 0;

scene.on("update", function (event) {
    const now = Date.now();
    if (now - lastUpdate > 100) {
        lastUpdate = now;
        // лёгкие операции
    }
});

Связь с контроллером

Событие update тесно связано с объектом Controller:

const controller = new ScrollMagic.Controller();

Контроллер управляет:

  • глобальным состоянием прокрутки
  • триггером обновлений сцен
  • вызовом update при изменениях

Ручной вызов обновления

В некоторых случаях требуется явно инициировать обновление:

scene.update(true);

Параметр true указывает на немедленный пересчёт, что вызовет событие update.

Работа с динамическим контентом

При изменении DOM после инициализации:

window.addEventListener("resize", function () {
    scene.update();
});

Или:

controller.update(true);

Это гарантирует корректный пересчёт позиций сцены.

Частые ошибки

Игнорирование частоты вызова

Обработчик update не должен содержать:

  • тяжёлых вычислений
  • частых DOM-изменений
  • синхронных запросов

Непонимание роли события

update не сообщает:

  • активна ли сцена
  • изменился ли прогресс

Для этого используются:

  • progress
  • enter
  • leave

Использование вместо progress

// неэффективно
scene.on("update", function (event) {
    // попытка отслеживать прогресс
});

Правильный подход:

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

Комбинирование с другими событиями

Часто используется связка:

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

Это даёт полную картину поведения сцены.

Глубокое понимание механики

Событие update отражает внутреннюю работу ScrollMagic:

  1. Контроллер отслеживает прокрутку
  2. При изменении инициируется пересчёт сцен
  3. Для каждой сцены вызывается update
  4. Затем, при необходимости, вызываются другие события (enter, progress, leave)

Таким образом, update — это низкоуровневое событие, отражающее сам факт перерасчёта, а не логическое состояние сцены.

Использование в сложных интерфейсах

В крупных проектах событие применяется для:

  • синхронизации с кастомными анимациями
  • адаптации к responsive-дизайну
  • интеграции с canvas/WebGL
  • мониторинга состояния сцены

Пример:

scene.on("update", function (event) {
    externalRenderer.updateCamera(event.scrollPos);
});

Вывод ключевых характеристик

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

Событие update служит фундаментальным инструментом для тонкой настройки поведения сцен и понимания внутренней логики работы ScrollMagic.

Оглавление