Хуки жизненного цикла

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

Типы событий сцен

События в ScrollMagic делятся на несколько категорий, каждая из которых срабатывает в определённый момент:

  1. enter Срабатывает, когда верхняя граница сцены пересекает границу контейнера (обычно viewport).

    scene.on("enter", function(event) {
    console.log("Сцена вошла в видимую область");
});

  2. leave Активируется, когда сцена покидает видимую область.

    scene.on("leave", function(event) {
    console.log("Сцена покинула видимую область");
});

  3. start и end Эти события более специфичны:

    • start срабатывает в момент начала сцены (когда триггер достигает начала).
    • end — в момент завершения сцены.
    scene.on("start", () => console.log("Начало сцены"));
scene.on("end", () => console.log("Конец сцены"));

  4. progress Отслеживает прогресс сцены в процентах. Выдает значение от 0 до 1. Используется для синхронизации анимаций с прокруткой.

    scene.on("progress", function(event) {
    console.log("Прогресс сцены:", event.progress);
});

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

    scene.on("update", function(event) {
    console.log("Обновление сцены", event.scrollPos);
});

Создание и привязка событий

Для активации хуков жизненного цикла необходимо сначала создать контроллер (ScrollMagic.Controller) и сцену (ScrollMagic.Scene):

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",  // Элемент, который запускает сцену
    duration: 500,                // Длина сцены в пикселях
    offset: 100                   // Смещение относительно триггера
})
.addTo(controller);

После создания сцены можно навешивать обработчики событий через метод .on(). Несколько событий можно навешивать на одну сцену одновременно:

scene.on("enter leave progress", function(e) {
    console.log(e.type, e.progress);
});

Практическое применение хуков

Синхронизация анимаций Чаще всего хуки используются для запуска CSS или JS-анимаций. Например, анимация opacity элемента при прокрутке:

scene.on("progress", function(event) {
    var opacity = event.progress;  // Значение от 0 до 1
    document.querySelector("#animateMe").style.opacity = opacity;
});

Добавление и удаление классов Хуки enter и leave удобно применять для управления классами:

scene.on("enter", () => document.querySelector("#box").classList.add("visible"));
scene.on("leave", () => document.querySelector("#box").classList.remove("visible"));

Управление видео и аудио Можно запускать и останавливать воспроизведение медиа по ходу прокрутки:

scene.on("enter", () => document.querySelector("video").play());
scene.on("leave", () => document.querySelector("video").pause());

Продвинутые возможности

Передача параметров в обработчики Объект события содержит полезные данные:

  • event.scrollPos — текущая позиция прокрутки.
  • event.startPos — стартовая позиция сцены.
  • event.endPos — конечная позиция сцены.
  • event.progress — прогресс сцены от 0 до 1.
  • event.type — тип события (enter, leave, progress и т.д.).

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

Объединение с GSAP и другими библиотеками Хуки жизненного цикла идеально интегрируются с анимационными библиотеками. Например, с GSAP:

scene.on("progress", function(event) {
    gsap.to("#ball", { y: event.progress * 300, duration: 0.1 });
});

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

  • Использовать progress только для крупных анимаций, иначе частые вызовы обработчика могут тормозить страницу.
  • Для событий enter и leave логичнее использовать добавление/удаление классов и CSS-переходы, так как это менее ресурсоёмко.
  • Всегда удалять ненужные слушатели через scene.off() после завершения эффекта, чтобы избежать утечек памяти:
scene.off("progress");

Итоговые рекомендации по работе с хуками

  • enter и leave — для одноразовых действий при появлении или уходе сцены.
  • progress — для динамических анимаций, зависящих от прокрутки.
  • update — для отслеживания изменения позиции без привязки к прогрессу.
  • Использовать комбинацию событий для комплексных интерактивных эффектов.
  • Интегрировать с внешними библиотеками (GSAP, Anime.js) для плавных анимаций.

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

Оглавление