Зависимые сцены

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

Основы зависимых сцен

Зависимая сцена — это сцена, которая инициализируется или управляется на основании состояния другой сцены. В ScrollMagic это реализуется через события, методы управления сценами и синхронизацию по времени или позиции скролла.

Основные сценарии использования зависимых сцен:

  • Синхронизация анимаций: одна сцена запускает анимацию другой сцены.
  • Условная активация: сцена становится активной только после завершения другой сцены.
  • Последовательное выполнение: сцены идут по цепочке, создавая каскадный эффект.

Создание зависимой сцены через события

ScrollMagic позволяет подписываться на события сцен с помощью метода .on(). Ключевые события:

  • enter — триггер при входе сцены в зону видимости.
  • leave — триггер при выходе сцены из зоны видимости.
  • start и end — срабатывают при достижении начала или конца сцены.
  • progress — срабатывает при изменении прогресса сцены от 0 до 1.

Пример зависимости сцены B от сцены A:

var controller = new ScrollMagic.Controller();

var sceneA = new ScrollMagic.Scene({
  triggerElement: "#sectionA",
  duration: 500
})
.setPin("#sectionA")
.addTo(controller);

var sceneB = new ScrollMagic.Scene({
  triggerElement: "#sectionB",
  duration: 300
})
.setTween("#sectionB", {opacity: 1})
.addTo(controller);

sceneA.on("enter", function () {
  sceneB.enable(); // активируем сцену B только после входа в сцену A
});

sceneB.disable(); // изначально сцена B отключена

В этом примере сцена B не активна, пока сцена A не войдёт в зону видимости, что позволяет контролировать последовательность событий.

Использование progress для динамических зависимостей

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

sceneA.on("progress", function (event) {
  var progress = event.progress;
  sceneB.duration(progress * 500); // динамически меняем длительность сцены B
});

Здесь сцена B адаптируется к прогрессу сцены A, создавая плавную зависимость между анимациями.

Цепочка зависимых сцен

Для сложных интерфейсов часто используется цепочка сцен, где каждая следующая зависит от предыдущей:

var scenes = [];

for (var i = 0; i < 5; i++) {
  var scene = new ScrollMagic.Scene({
    triggerElement: "#section" + i,
    duration: 200
  })
  .setTween("#section" + i, {y: "-50%", opacity: 1})
  .addTo(controller);

  scenes.push(scene);
  
  if(i > 0) {
    scenes[i-1].on("leave", function() {
      scene.enable();
    });
    scene.disable();
  }
}
  • Сцена включается только после выхода предыдущей сцены, обеспечивая последовательное появление блоков.
  • Такая конструкция позволяет создавать многоступенчатые анимации без конфликтов между сценами.

Методы управления зависимыми сценами

ScrollMagic предоставляет несколько методов, которые упрощают работу с зависимостями:

  • scene.enable() / scene.disable() — включение и отключение сцены.
  • scene.destroy(true) — удаление сцены с контроллера и очистка ресурсов.
  • scene.setTween() — динамическое изменение анимации в зависимости от другой сцены.
  • scene.triggerHook() — установка точки триггера, что позволяет синхронизировать сцены по позиции скролла.

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

sceneA.on("enter", function () {
  sceneB.setTween("#sectionB", {scale: 1.2, opacity: 1});
  sceneB.enable();
});

Особенности производительности

При создании зависимых сцен важно учитывать:

  • Количество сцен: большое количество активных зависимых сцен может снижать FPS при прокрутке.
  • Оптимизация анимаций: использовать CSS-свойства, поддерживаемые GPU (transform, opacity) вместо top или left.
  • Отключение сцен: отключать сцены, которые временно не нужны, с помощью disable() для уменьшения нагрузки на контроллер.

Советы по организации зависимых сцен

  1. Группировка по логике: сцены, которые связаны, должны быть объединены в массивы или объекты для удобного управления.
  2. Использование прогресс-колбэков: для плавной синхронизации нескольких сцен.
  3. Избегать циклических зависимостей: сцена A не должна зависеть от сцены B, которая уже зависит от сцены A, иначе возникнут ошибки в управлении.
  4. Контроллеры: иногда имеет смысл использовать несколько контроллеров для отдельных блоков, чтобы избежать глобальной перегрузки.

Итоговые ключевые моменты

  • Зависимые сцены управляются через события, методы enable/disable и прогресс.
  • Они позволяют создавать последовательные, синхронизированные и динамичные анимации.
  • При построении сложных интерфейсов важно оптимизировать сцены и избегать циклических зависимостей.
  • ScrollMagic даёт полную гибкость, позволяя сцены включать, настраивать или разрушать на лету в зависимости от состояния других сцен.
Оглавление