Анимации и переходы

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

Параметры анимации шага

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

  • scrollTo – объект или булевое значение, определяющее автоматическую прокрутку к элементу. Например:
scrollTo: { beh * avior: 'smooth', block: 'center' }
  • attachTo – объект с указанием селектора и позиции тултипа относительно элемента. При изменении позиции тултипа можно создавать эффект смещения или «вылазки»:
attachTo: { element: '#button', on: 'bottom' }
  • classes – CSS-классы, применяемые к шагу. Через них можно добавить пользовательские анимации с использованием CSS-переходов и keyframes.
classes: 'shepherd-theme-arrows fade-in'

Использование CSS-анимаций

Shepherd.js позволяет полностью контролировать визуальные эффекты через CSS. Можно определить fade-in, slide, scale и другие переходы для появления и скрытия шагов.

.shepherd-theme-arrows.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

Для скрытия шага можно использовать CSS-анимацию fadeOut и применять её через событие before-hide:

step.on('before-hide', () => {
  step.el.classList.add('fade-out');
});

Переход между шагами

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

  • show – вызывается при отображении шага, здесь можно запускать анимацию появления.
  • hide – вызывается при скрытии шага, идеально для анимаций выхода.
  • complete – используется для финализации анимаций перед переходом к следующему шагу.

Пример плавного перехода между шагами:

tour.addStep({
  id: 'step1',
  text: 'Это первый шаг',
  attachTo: { element: '#start', on: 'top' },
  classes: 'fade-slide'
});

tour.addStep({
  id: 'step2',
  text: 'Это второй шаг',
  attachTo: { element: '#next', on: 'right' },
  beforeShowPromise: () => new Promise(resolve => {
    setTimeout(resolve, 300); // пауза перед показом второго шага
  })
});

Интеграция с сторонними библиотеками анимаций

Shepherd.js совместим с библиотеками вроде GSAP или Anime.js, что позволяет создавать сложные переходы и эффекты:

step.on('show', () => {
  gsap.from(step.el, { opacity: 0, y: -20, duration: 0.5 });
});

step.on('hide', () => {
  gsap.to(step.el, { opacity: 0, y: 20, duration: 0.5 });
});

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

Контроль скорости и синхронизация анимаций

  • Длительность анимации задается через CSS или библиотеку анимаций.
  • Задержка между шагами настраивается через beforeShowPromise или delay.
  • События жизненного цикла (show, hide) позволяют синхронизировать несколько анимаций одновременно, например, изменение позиции и плавное появление текста.
step.on('show', () => {
  gsap.to(step.el, { opacity: 1, x: 0, duration: 0.6 });
  gsap.to('#highlight', { scale: 1.2, duration: 0.6 });
});

Анимация прокрутки страницы

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

scrollTo: {
  beh * avior: 'smooth',
  block: 'center',
  inline: 'nearest'
}

Для более сложных случаев интегрируют сторонние анимации прокрутки через GSAP ScrollToPlugin или аналогичные решения.

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

  • Ограничивать количество одновременно активных анимаций.
  • Для мобильных устройств использовать лёгкие CSS-переходы вместо тяжелых JS-анимаций.
  • Предварительно кэшировать элементы DOM, к которым будут применяться анимации, чтобы избежать лишних пересчетов стилей.

Итоговая структура анимированного шага

  1. Настройка attachTo для позиции тултипа.
  2. Определение CSS-классов для визуальных эффектов.
  3. Настройка событий жизненного цикла (show, hide, before-hide) для запуска анимаций.
  4. Использование сторонних библиотек для сложных переходов.
  5. Контроль скорости, задержек и синхронизации анимаций между шагами.

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

Оглавление