Анимация элементов вдоль SVG-пути: Введение в PathSlider

Анимация элементов вдоль SVG-пути: Введение в PathSlider

От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это :) И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений.

На этот раз я покажу вам, как очень просто делается анимация элемента — а точнее, его перемещение — вдоль пути SVG! Для этого мы создали небольшую библиотеку, которая позволяет создавать такие эффекты.

Анимация элементов вдоль SVG-пути: Введение в PathSlider

Если вы будете следовать этому руководству, вы увидите, как легко создавать слайдеры, в которых элементы перемещаются из одной позиции в другую с помощью нашей библиотеки. Приступим!

Введение в новую библиотеку: PathSlider

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

Во-первых, наша библиотека зависит от anime.js, поэтому нам нужно будет включить ее в наш проект, прежде чем вы начнете использовать PathSlider. Кроме того, есть некоторые другие небольшие зависимости, которые должны быть приняты во внимание в коде HTML и CSS, чтобы все работало правильно, но мы будем рассматривать их по мере развития нашего слайдера.

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

Анимация элементов вдоль SVG-пути: Введение в PathSlider

startLength (float или ‘center’): длина пути для начала позиционирования элементов. Это всегда будет позиция для активного элемента. Выбранный элемент будет перемещен сюда, а все остальные элементы будут перемещаться соответственно.

activeSeparation (float): Расстояние от активного элемента до соседних элементов.

paddingSeparation (float): Отступ от края в начале и в конце пути.

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

За исключением items, все описанные свойства могут быть предоставлены в качестве параметров при инициализации слайдера, что дает нам полную свободу в настройке слайдера под свои задачи. В дополнение к этим существуют и другие доступные параметры, с которыми вы можете ознакомиться в репозитории Github. И теперь мы готовы перейти к коду!

Структура HTML

Наш HTML-код будет довольно простым: просто контейнер (.path-slider), path SVG для перемещения элементов вдоль него и элементы. Важно отметить, что path SVG и элементы должны находиться внутри одного и того же контейнера, чтобы у нас не возникло проблем с позиционированием.

<!-- Контейнер пути слайдера -->
<div class="path-slider"> <!-- SVG-путь для перемещения элементов --> <svg width="460px" height="310px" viewBox="0 0 460 310"> <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path> </svg> <!-- Элементы слайдера --> <a href="#chat" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div> <div class="item__title"><h2>Chat</h2></div> </a> <a href="#alarmclock" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div> <div class="item__title"><h2>Alarm clock</h2></div> </a> <a href="#camera" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div> <div class="item__title"><h2>Camera</h2></div> </a> <a href="#envelope" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div> <div class="item__title"><h2>Envelope</h2></div> </a> <a href="#lightbulb" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div> <div class="item__title"><h2>Light bulb</h2></div> </a>
</div>

Добавление необходимых стилей

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

// Ширина и высота круга
$circle-width: 74px;
$circle-height: 74px; // Стили для элементов слайдера, позиционирующие их абсолютно, в верхнем левом углу контейнера
// Также мы центрируем их (см. отрицательные значения для `left` и `top`)
// Они будут позиционироваться вдоль пути SVG позже с помощью Javascript
.path-slider__item { position: absolute; // Извлекаем элемента из потока, и позволяем библиотеке задать корректную позицию left: - $circle-width / 2; // Половина ширины для центрирования top: - $circle-height / 2; // Половина высоты для центрирования
} // Стили для круга элемента (контейнер icon)
.item__circle { width: $circle-width; // Нужная ширина height: $circle-height; // Нужная высота
} // Стили для выбранного элемента
.path-slider__current-item { .item__circle { background-color: #4DA169; // Изменяем цвет фона круга для выбранного элемента transform: scale(1.5); // Увеличиваем круг для выбранного элемента }

Как всегда, вы можете просмотреть полный код в репозитории Github.

Инициализация слайдера

Чтобы инициализировать слайдер, нам нужны только path и items. При желании мы можем передать объект с options для дополнительной настройки. Таким образом, мы можем заставить наш слайдер работать с помощью простого кода:

// Задаем параметры
var options = { startLength: 0, // Исходное позиционирование элемента слайдера в начале пути SVG duration: 3000, // длительность анимации (используется anime.js) stagger: 15, // задержка перед перемещение элемента, создающая красивый эффект easing: 'easeOutElastic', // функция замедления (используется anime.js) elasticity: 600, // фактор растяжения (используется anime.js) rotate: true // Это значение указывает, что элементы должны перемещаться в соответствии с изгибами пути SVG }; // Инициализация слайдера с использованием пути SVG, items и options
new PathSlider('.path-slider__path', '.path-slider__item', options);

Всего то! Работает, как ожидалось :)

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

Библиотека инициализирует события click для каждого элемента в слайдере, поэтому, если мы нажмем любой из них, он будет выбран (анимирован в базовую позицию). Кроме того, если мы хотим добавить в слайдер другие элементы управления (разбивка на страницы, или кнопки Предыдущая / Следующая), у нас есть ряд полезных функций, которые мы можем вызывать для любого выбранного элемента:

selectPrevItem(): выбирает предыдущий элемент.

selectNextItem(): выбирает следующий элемент.

selectItem(index): выбирает любой элемент, используя соответствующий индекс.

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

Заключение

И это все, что нужно, чтобы получить привлекательный слайдер, показанный на рисунке ниже, в котором элементы перемещаются вдоль пути SVG:

Анимация элементов вдоль SVG-пути: Введение в PathSlider

Вы можете увидеть онлайн демо-версию, поэкспериментировать с кодом на Codepen или получить полный код на Github.

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

Мы очень надеемся, что вам понравилась статья, и она окажется полезной вам!

Автор: Luis Manuel

Источник: https://scotch.io/

Редакция: Команда webformyself.