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

ScrollMagic предоставляет гибкий способ управления анимациями на основе прокрутки страницы. Одним из мощных инструментов в современном фронтенде является <canvas> — элемент HTML5, позволяющий рендерить 2D и 3D графику напрямую в браузере. Интеграция ScrollMagic с canvas открывает возможности для создания сложных интерактивных эффектов, от динамических визуализаций до анимаций, управляемых скроллом.

Взаимодействие ScrollMagic с canvas строится на двух ключевых принципах:

  1. События прокрутки – ScrollMagic позволяет отслеживать момент попадания элемента в зону видимости и процент прокрутки сцены. Эти данные используются для управления рендерингом на canvas.
  2. Рендеринг через requestAnimationFrame – canvas анимации должны обновляться синхронно с кадрами браузера. ScrollMagic служит источником состояния прокрутки, а requestAnimationFrame — инструментом плавного обновления кадров.

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

Простейший пример интеграции начинается с инициализации контроллера и сцены:

// Создание контроллера ScrollMagic
const controller = new ScrollMagic.Controller();

// Выбор canvas и контекста
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");

// Настройка сцены
const scene = new ScrollMagic.Scene({
    duration: 1000, // Длина сцены в пикселях прокрутки
    triggerElement: "#trigger", // Элемент, при котором начинается сцена
    triggerHook: 0.5 // Процент видимости, где сцена активируется
})
.addTo(controller);

// Событие обновления сцены
scene.on("progress", function(event) {
    const progress = event.progress; // Значение от 0 до 1
    draw(progress); // Передача прогресса в функцию рендеринга
});

Функция рендеринга на canvas

Ключевой элемент интеграции — использование прогресса сцены для анимации элементов на canvas. Ниже пример плавного движения круга по оси X:

function draw(progress) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const x = progress * canvas.width;
    const y = canvas.height / 2;
    const radius = 50;

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = "#3498db";
    ctx.fill();
    ctx.closePath();
}

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

  • event.progress изменяется от 0 до 1, что позволяет создавать синхронные анимации.
  • clearRect используется для очистки предыдущего кадра, предотвращая наложение.

Интерактивные эффекты с использованием multiple scenes

ScrollMagic позволяет создавать несколько сцен, каждая из которых управляет разными аспектами canvas:

const scene2 = new ScrollMagic.Scene({
    duration: 500,
    triggerElement: "#trigger2",
    triggerHook: 0.7
})
.addTo(controller);

scene2.on("progress", function(event) {
    const scale = 1 + event.progress;
    drawCircle(scale);
});

function drawCircle(scale) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 50 * scale, 0, Math.PI * 2);
    ctx.fillStyle = "#e74c3c";
    ctx.fill();
    ctx.closePath();
}

Таким образом, можно комбинировать несколько анимаций одновременно: перемещение, масштабирование, вращение, изменение цвета, формируя полноценные интерактивные истории.

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

Для сложных эффектов часто используют сторонние библиотеки, интегрируемые с ScrollMagic:

  • GSAP (GreenSock Animation Platform) — синхронизация с canvas через timeline. Пример:
const tl = gsap.timeline({
    scrollTrigger: {
        trigger: "#trigger",
        start: "top center",
        end: "bottom center",
        scrub: true
    }
});

tl.to({}, {duration: 1, onUpdate: () => drawCircle(tl.progress())});
  • PixiJS — для WebGL-рендеринга с высокой производительностью:
const app = new PIXI.Application({ width: 800, height: 600, view: canvas });
const circle = new PIXI.Graphics();
circle.beginFill(0x3498db);
circle.drawCircle(0, 0, 50);
circle.endFill();
app.stage.addChild(circle);

scene.on("progress", event => {
    circle.x = event.progress * canvas.width;
});

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

  1. Минимизация перерисовки – обновлять canvas только при изменении прогресса.
  2. Использование offscreen canvas – для тяжелых сцен можно предварительно рендерить кадры.
  3. requestAnimationFrame – синхронизирует анимацию с частотой кадров браузера, избегая лагов.

Работа с изображениями и спрайтами

Canvas часто используется для анимации спрайтов. ScrollMagic позволяет изменять индекс кадра спрайта в зависимости от прокрутки:

const sprite = new Image();
sprite.src = "sprite.png";
const frames = 10;

scene.on("progress", function(event) {
    const frame = Math.floor(event.progress * (frames - 1));
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(sprite, frame * 100, 0, 100, 100, 50, 50, 100, 100);
});

Так можно создать эффект «скролл-анимации», где каждая прокрутка страницы соответствует новому кадру анимации.

Ключевые моменты интеграции

  • Сцена ScrollMagic → источник данных о прокрутке.
  • Canvas → рендеринг и визуализация состояния сцены.
  • requestAnimationFrame → плавная отрисовка и синхронизация с кадрами браузера.
  • Библиотеки типа GSAP или PixiJS → упрощение сложной графики и анимаций.
  • Оптимизация производительности — критично при больших сценах и спрайтовых анимациях.

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

Оглавление