Метод progress

Метод progress является одним из ключевых инструментов управления прогрессом сцены в библиотеке ScrollMagic. Он позволяет получать текущее значение прогресса сцены или устанавливать его программно. Прогресс сцены — это число от 0 до 1, где 0 соответствует начальному положению сцены на экране, а 1 — завершению сцены.

Синтаксис

scene.progress([value])

  • value (необязательный) — число от 0 до 1, которое задаёт текущий прогресс сцены.

  • Возвращаемое значение:

    • Если value не передан, метод возвращает текущий прогресс сцены.
    • Если value передан, метод устанавливает прогресс сцены и возвращает объект сцены для цепочки вызовов.

Получение прогресса

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

var currentProgress = scene.progress();
console.log(currentProgress); // 0.5 — если сцена пройдена на 50%

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

Установка прогресса

Метод progress позволяет программно управлять состоянием сцены, задавая точное значение прогресса.

scene.progress(0.75); // Сцена считается пройденной на 75%

При установке значения прогресса ScrollMagic автоматически обновляет все связанные с сценой triggerEvents, tween-анимации и внутренние состояния.

Особенности установки:

  1. Автоматический вызов событий: при изменении прогресса срабатывают события enter, leave, start, end, если заданные условия сцены выполнены.
  2. Цепочка вызовов: метод возвращает объект сцены, что позволяет писать компактный код:
scene.progress(0.5).setClassToggle("#element", "active");
  1. Прямое управление анимацией: если сцена связана с TweenMax/TweenLite, прогресс напрямую влияет на текущий кадр анимации.

Интеграция с анимациями

Одна из самых сильных сторон progress — возможность синхронизации прокрутки с анимациями.

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

var scene = new ScrollMagic.Scene({
    duration: 500
})
.setTween(tween)
.addTo(controller);

// Получение прогресса для кастомной логики
scene.on("progress", function(event) {
    console.log("Прогресс анимации: ", event.progress);
});

Здесь event.progress соответствует текущему прогрессу сцены и может использоваться для изменения свойств DOM или вызова других функций.

Ограничения и особенности

  • Значение прогресса ограничено 0–1, любые переданные числа за пределами диапазона автоматически нормализуются.
  • Прогресс сцены не зависит от длины страницы напрямую, он рассчитывается относительно duration сцены.
  • Изменение прогресса вручную не прокручивает страницу, оно только изменяет внутренние состояния сцены и привязанные анимации.

Примеры использования

Пример 1. Программное управление прогрессом

var scene = new ScrollMagic.Scene({duration: 300});
scene.addTo(controller);

// Установить прогресс на 50%
scene.progress(0.5);

Пример 2. Получение прогресса для динамического эффекта

scene.on("progress", function(e) {
    var opacity = e.progress; // 0 -> 1
    document.querySelector("#fade").style.opacity = opacity;
});

Пример 3. Связь с TweenMax/TweenLite

var tween = TweenMax.to("#box", 1, {x: 300, rotation: 180});

scene.setTween(tween);

scene.on("progress", function(e) {
    console.log("Синхронизация анимации: ", e.progress);
});

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

Оглавление