Анимация элементов SVG с помощью PathSlider

Development, Java | Amber | Комментировать запись

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

1: Настройка библиотеки PathSlider

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

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

Чтобы немного лучше понять некоторые параметры SVG-пути, предлагаем остановиться на них подробнее:

• startLength: длина пути для начала позиционирования элементов. Всегда определяет позицию активного элемента. Выбранный элемент будет перемещен сюда, а все остальные элементы будут перемещены соответствующим образом.
• activeSeparation (с плавающей точкой): разделение между активным элементом и соседними элементами.
• paddingSeparation (с плавающей точкой): разделение заполнения в начале и в конце пути.
• items: после размещения выбранного элемента все остальные элементы будут размещены на одинаковом расстоянии друг от друга с учетом оставшегося пространства.

За исключением items, все свойства, описанные здесь, можно предоставить в качестве опций при инициализации нашего слайдера, что обеспечивает полную свободу его настройки в соответствии с нашими потребностями. Доступны и другие параметры, с которыми вы можете ознакомиться в Github-репозитории PathSlider.

Далее давайте напишем наш HTML-код.

2: Написание структуры HTML

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

<!-- Path Slider Container -->
<div class="path-slider">
    <!-- SVG path to slide the items -->
    <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>
    <!-- Slider items -->
    <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>

Теперь, когда у нас есть базовая структура, давайте стилизуем ее с помощью CSS.

3: Добавление стилей с помощью CSS

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

В этом мануале мы сосредоточимся только на основных компонентах.

// Circle width and height
$circle-width: 74px;
$circle-height: 74px;

// Styles for slider items, positioning them absolutely, in the top left corner of the container
// Also centering them (see negative values for `left` and `top`)
// They will be positioned along the SVG path later with Javascript
.path-slider__item {
  position: absolute;        // Get items out of the flow, and let the library set the correct position
  left: - $circle-width / 2; // Half of the width, for centering purpose
  top: - $circle-height / 2; // Half of the height, for centering purpose
}

// Styles for the item circle (icon container)
.item__circle {
  width: $circle-width;    // Desired width
  height: $circle-height;  // Desired height
}

// Styles for the selected item
.path-slider__current-item {

  .item__circle {
    background-color: #4DA169; // Change circle background-color for selected item
    transform: scale(1.5);     // Scale up circle for selected item
  }
}

Проверить полный код можно в репозитории Github.

Стилизация завершена. Далее мы инициализируем слайдер с помощью JavaScript.

4: Инициализация слайдера с помощью JavaScript

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

// Setting up the options
var options = {
    startLength: 0, // start positioning the slider items at the beginning of the SVG path
    duration: 3000, // animation duration (used by anime.js)
    stagger: 15, // incrementally delays between items, producing a staggering effect
    easing: 'easeOutElastic', // easing function (used by anime.js)
    elasticity: 600, // elasticity factor (used by anime.js)
    rotate: true // This indicates that items should be rotated properly to match the SVG path curve
};

// Initialize the slider using our SVG path, items, and options
new PathSlider('.path-slider__path', '.path-slider__item', options);

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

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

Тогда элементы будут перемещаться вдоль SVG-пути.

Итоги

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

Читайте также: Как использовать SVG-иконки в Vue.js