Управление массивами сцен

В ScrollMagic сцена (Scene) является основной единицей, которая связывает прокрутку с действиями на странице. Управление массивами сцен позволяет эффективно структурировать сложные анимации, особенно когда количество интерактивных элементов велико. Работа с массивами сцен подразумевает создание, настройку и синхронное управление группой сцен, что повышает читаемость кода и упрощает масштабирование проектов.

Создание массива сцен

Чаще всего массив сцен формируется динамически, используя циклы или функции генерации. Стандартная практика заключается в том, чтобы хранить все сцены в одном массиве для удобного доступа и управления:

// Массив для хранения сцен
const scenes = [];

// Создание нескольких сцен через цикл
const triggers = document.querySelectorAll('.trigger');
triggers.forEach((trigger, index) => {
    const scene = new ScrollMagic.Scene({
        triggerElement: trigger,
        duration: 200,
        offset: 50 * index
    })
    .setClassToggle(trigger, 'active')
    .addTo(controller);

    scenes.push(scene);
});

Ключевые моменты:

  • Все сцены хранятся в одном массиве scenes.
  • Использование циклов позволяет автоматически создавать сцены для множества элементов.
  • Настройки duration и offset могут быть динамическими, зависящими от индекса элемента.

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

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

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

// Отключение всех сцен
scenes.forEach(scene => scene.enabled(false));

// Включение всех сцен
scenes.forEach(scene => scene.enabled(true));

Метод .enabled() позволяет временно приостанавливать обработку сцены без её удаления из контроллера.

Удаление сцен

Для удаления всех сцен из контроллера и освобождения ресурсов используется метод .remove():

scenes.forEach(scene => scene.remove());
scenes.length = 0; // очистка массива

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

События сцены (enter, leave, start, end) можно назначать индивидуально или массово:

scenes.forEach(scene => {
    scene.on('enter', function(event) {
        console.log('Сцена активирована:', event.target.triggerElement());
    });
});

Важно: Использование единого обработчика для массива сцен упрощает поддержку и уменьшает дублирование кода.

Динамическое обновление сцен

Иногда требуется изменить параметры сцен после их создания, например, при изменении размера окна:

window.addEventListener('resize', () => {
    scenes.forEach((scene, index) => {
        scene.duration(200 + index * 50); // изменение продолжительности
        scene.offset(30 * index);        // изменение смещения
        scene.refresh();                  // обновление состояния
    });
});

Метод .refresh() пересчитывает позиции триггеров и длительность, что критично для адаптивного дизайна.

Групповые анимации

Использование массивов сцен позволяет синхронизировать анимации нескольких элементов:

scenes.forEach((scene, index) => {
    scene.on('enter', () => {
        gsap.to(scene.triggerElement(), {
            opacity: 1,
            x: index * 50,
            duration: 1
        });
    });
});

Особенности:

  • Каждая сцена может инициировать анимацию отдельного элемента.
  • Использование индекса позволяет создавать каскадные эффекты.
  • Интеграция с библиотекой GSAP расширяет возможности ScrollMagic по управлению сложными анимациями.

Фильтрация и выбор сцен

Массив сцен может содержать сотни объектов. Для выборочной работы применяются методы фильтрации и поиска:

const activeScenes = scenes.filter(scene => scene.enabled());

activeScenes.forEach(scene => {
    scene.setClassToggle(scene.triggerElement(), 'highlight');
});

Такой подход удобен для выборочного включения анимаций или применения специальных эффектов.

Иерархическое управление сценами

Для больших проектов сцены можно группировать по категориям:

const headerScenes = [];
const sectionScenes = [];

document.querySelectorAll('.header-trigger').forEach(el => {
    headerScenes.push(new ScrollMagic.Scene({ triggerElement: el }).addTo(controller));
});

document.querySelectorAll('.section-trigger').forEach(el => {
    sectionScenes.push(new ScrollMagic.Scene({ triggerElement: el }).addTo(controller));
});

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

Рекомендации по оптимизации

  • Хранение сцен в массиве облегчает массовое управление, но важно очищать неиспользуемые сцены для экономии ресурсов.
  • Для динамически добавляемого контента создавать сцены через функции генерации.
  • Для сложных анимаций интегрировать ScrollMagic с GSAP или другими анимационными библиотеками для расширенной функциональности.
  • Использование фильтрации и группирования сцен повышает читаемость кода и упрощает масштабирование.

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

Оглавление