Покадровая перемотка

Библиотека ScrollMagic позволяет связывать прокрутку страницы с анимацией элементов. Покадровая перемотка (frame-by-frame animation) реализуется через управление кадрами анимации в зависимости от текущей позиции скролла. Основной подход заключается в синхронизации прокрутки страницы с изменением состояния элемента, например, последовательностью изображений или анимацией canvas.

Создание сцены ScrollMagic

Для управления покадровой анимацией необходимо создать контроллер и сцену:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#animation-container", // элемент, при котором начинается анимация
    duration: 1000, // длина анимации в пикселях прокрутки
    triggerHook: 0 // момент старта анимации относительно viewport
})
.setPin("#animation-container") // закрепление элемента на время анимации
.addTo(controller);

Пояснения ключевых параметров:

  • triggerElement — DOM-элемент, который инициирует начало сцены.
  • duration — длина сцены в пикселях прокрутки. Для покадровой перемотки этот параметр напрямую влияет на скорость смены кадров.
  • triggerHook — точка запуска сцены относительно видимой части окна. Значение 0 соответствует верхней границе, 1 — нижней.

setPin() закрепляет элемент на экране на протяжении всей сцены, позволяя проигрывать анимацию, не двигая сам элемент.

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

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

var images = [];
for (var i = 1; i <= 60; i++) {
    images.push("frames/frame" + i + ".jpg");
}

var imgElement = document.getElementById("frame-image");

scene.on("progress", function(event) {
    var frameIndex = Math.floor(event.progress * (images.length - 1));
    imgElement.src = images[frameIndex];
});

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

  • event.progress возвращает значение от 0 до 1, соответствующее текущей позиции скролла внутри сцены.
  • Math.floor(event.progress * (images.length - 1)) определяет индекс текущего кадра, плавно изменяя его по мере прокрутки.
  • Все кадры желательно предварительно загружать, чтобы избежать мерцания или задержек при смене изображений.

Использование canvas для покадровой анимации

Анимация через <canvas> позволяет эффективнее управлять большим количеством кадров и изменять их свойства динамически:

var canvas = document.getElementById("animation-canvas");
var context = canvas.getContext("2d");

var frames = [];
for (var i = 1; i <= 100; i++) {
    var img = new Image();
    img.src = "frames/frame" + i + ".png";
    frames.push(img);
}

scene.on("progress", function(event) {
    var index = Math.floor(event.progress * (frames.length - 1));
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(frames[index], 0, 0, canvas.width, canvas.height);
});

Преимущества canvas:

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

Анимация CSS-свойств покадровой перемоткой

Помимо смены изображений, ScrollMagic позволяет управлять CSS-свойствами через прогресс сцены. Это полезно для покадровой анимации с элементами SVG или блоками DOM:

scene.on("progress", function(event) {
    var rotation = event.progress * 360; // вращение элемента
    var scale = 1 + event.progress * 0.5; // масштабирование
    document.getElementById("animated-box").style.transform = 
        "rotate(" + rotation + "deg) scale(" + scale + ")";
});

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

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

Оптимизация покадровой перемотки

  1. Предварительная загрузка кадров — обеспечивает отсутствие задержек и мерцаний.
  2. Canvas вместо DOM — ускоряет работу при большом количестве кадров.
  3. Throttle или requestAnimationFrame — если сцена очень длинная, стоит ограничивать частоту обновления кадра.
  4. Сжатие изображений — уменьшение размера файлов без потери качества визуальной последовательности.

Комбинация с TweenMax/GSAP

ScrollMagic тесно интегрируется с GSAP для плавных анимаций:

var tween = gsap.to("#animated-box", {rotation: 360, duration: 1, ease: "none"});

var scene = new ScrollMagic.Scene({
    triggerElement: "#animation-container",
    duration: 1000
})
.setTween(tween)
.addTo(controller);
  • GSAP управляет интерполяцией между кадрами или свойствами.
  • Плавность анимации не зависит от скорости скролла.
  • Можно комбинировать покадровую анимацию с параллакс-эффектами и другими визуальными эффектами.

Практические рекомендации

  • Разделять сцену на несколько коротких участков при больших анимациях.
  • Использовать setPin только для ключевых элементов, чтобы не перегружать браузер.
  • Проверять производительность на мобильных устройствах: при большом количестве кадров canvas предпочтительнее.
  • Для динамических эффектов сочетать покадровую анимацию с трансформациями CSS и масками.

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

Оглавление