От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это 
И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений.
На этот раз я покажу вам, как очень просто делается анимация элемента — а точнее, его перемещение — вдоль пути SVG! Для этого мы создали небольшую библиотеку, которая позволяет создавать такие эффекты.
Если вы будете следовать этому руководству, вы увидите, как легко создавать слайдеры, в которых элементы перемещаются из одной позиции в другую с помощью нашей библиотеки. Приступим!
Введение в новую библиотеку: PathSlider
Прежде чем перейти к коду, который заставит слайдер работать, давайте рассмотрим, как мы можем использовать библиотеку PathSlider, а также некоторые параметры, которые она предлагает.
Во-первых, наша библиотека зависит от anime.js, поэтому нам нужно будет включить ее в наш проект, прежде чем вы начнете использовать PathSlider. Кроме того, есть некоторые другие небольшие зависимости, которые должны быть приняты во внимание в коде HTML и CSS, чтобы все работало правильно, но мы будем рассматривать их по мере развития нашего слайдера.
Чтобы лучше понять некоторые параметры, предлагаемые библиотекой, предлагаю вам ознакомиться со следующим изображением, а также описанием каждого элемента ниже:
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:
Вы можете увидеть онлайн демо-версию, поэкспериментировать с кодом на Codepen или получить полный код на Github.
Итак, мы разработали простой слайдер с использованием замкнутого пути SVG и ряда параметров, предоставляемых нашей библиотекой. Но это не единственное, что мы можем сделать. В следующем руководстве мы сделаем слайдер немного более продвинутыми и ярким, а также использовать другие параметры, предоставляемые библиотекой.
Мы очень надеемся, что вам понравилась статья, и она окажется полезной вам!
Автор: Luis Manuel
Источник: https://scotch.io/
Редакция: Команда webformyself.