Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

Дата публикации: 2018-04-04

Анимация других элементов вдоль SVG-пути с использованием JavaScript

От автора: в предыдущей статье мы представили новую библиотеку, с помощью которой делается анимация элементов сайта вдоль SVG-пути — PathSlider. Кроме того, мы реализовали использование этой библиотеки и разработали простой слайдер. В этом руководстве мы рассмотрим еще два примера, иллюстрирующих возможности нашей библиотеки и SVG-пути.

Например, мы разработаем еще один слайдер с использованием замкнутого SVG-пути, как в предыдущем руководстве, но с некоторыми дополнительными эффектами:

Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

See the Pen <a href='//codepen.io/lmgonzalves/pen/bvpLyW/'>Path Slider Advanced Elastic</a> by lmgonzalves (<a href='//codepen.io/lmgonzalves'>@lmgonzalves</a>) on <a href='//codepen.io'>CodePen</a>.<br />

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

Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

See the Pen <a href='//codepen.io/lmgonzalves/pen/EEKEaM/'>Path Slider Advanced Images</a> by lmgonzalves (<a href='//codepen.io/lmgonzalves'>@lmgonzalves</a>) on <a href='//codepen.io'>CodePen</a>.<br />

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

Структура HTML

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

<!-- Контейнер слайдера -->
<div class="path-slider">
    <!-- Элементы  слайдера -->
    <a href="#" class="path-slider__item path-slider__item--1"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--2"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--3"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--4"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--5"><div class="item__circle"></div></a>
</div>

</div>

Как вы можете видеть, на этот раз мы не определили SVG-путь в HTML-коде. Это связано с тем, что мы будем генерировать его из кода Javascript, что позволит увеличить гибкость, адаптируя SVG-путь к размерам экрана.

Добавление стилей

Поскольку на этот раз наш слайдер будет полноэкранным, мы должны добавить некоторые необходимые стили:

// Слайдер будет полноэкранным
// `background-image` будет задаваться с помощью Javascript
.path-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
}

// Нам также нужен этот дополнительный элемент (генерируемый через Javascript) чтобы выводить изображения плавно
.path-slider__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
}

// Слайдер будет полноэкранным

// `background-image` будет задаваться с помощью Javascript

.path-slider {

position: relative;

width: 100%;

height: 100%;

background-position: center;

}

// Нам также нужен этот дополнительный элемент (генерируемый через Javascript) чтобы выводить изображения плавно

.path-slider__background {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-position: center;

}

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

// Определение изображений

.path-slider__item--1 .item__circle {
  background-image: url("../images/img1.jpg");
}

// ... Остальные определения `background-image` для каждого элемента

// Определение изображений

.path-slider__item--1 .item__circle {

background-image: url("../images/img1.jpg");

}

// ... Остальные определения `background-image` для каждого элемента

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

Задействуем Javascript

Первое, что мы сделаем, это вставим элемент path, который нам нужен, чтобы перемещать элементы слайдера вдоль него:

// Создаем элементы SVG и path и вставляем их в DOM

var svgNS = '//www.w3.org/2000/svg';
var svgEl = document.createElementNS(svgNS, 'svg');

var pathEl = document.createElementNS(svgNS, 'path');
// Функция `getSinPath` возвращает `path` в формате String
pathEl.setAttribute('d', getSinPath());
pathEl.setAttribute('class', 'path-slider__path');

svgEl.appendChild(pathEl);
document.body.appendChild(svgEl);

// Создаем элементы SVG и path и вставляем их в DOM

var svgNS = '//www.w3.org/2000/svg';

var svgEl = document.createElementNS(svgNS, 'svg');

var pathEl = document.createElementNS(svgNS, 'path');

// Функция `getSinPath` возвращает `path` в формате String

pathEl.setAttribute('d', getSinPath());

pathEl.setAttribute('class', 'path-slider__path');

svgEl.appendChild(pathEl);

document.body.appendChild(svgEl);

Как вы могли заметить, мы создали path, используя функцию getSinPath, которая отвечает за возврат path в формате String с учетом размеров экрана и некоторых других параметров. Мы разместили эту функцию в отдельном файле для лучшей организации — вы можете увидеть ее реализацию, а также краткое описание доступных параметров в репозитории Github.

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

// Изменение `background-image`
// Сначала сохраняем вычисляемое значение `background` каждого элемента, как оно определено в CSS
// Когда элемент выбирается, `background` устанавливается соответственно

var items = document.querySelectorAll('.path-slider__item');
var images = [];
for (var j = 0; j < items.length; j++) {
    images.push(getComputedStyle(items[j].querySelector('.item__circle')).getPropertyValue('background-image'));
}

var imgAnimation;
var lastIndex;
var setImage = function (index) {
    if (imgAnimation) {
        imgAnimation.pause();
        sliderContainer.style['background-image'] = images[lastIndex];
        sliderContainerBackground.style['opacity'] = 0;
    }
    lastIndex = index;
    sliderContainerBackground.style['background-image'] = images[index];
    imgAnimation = anime({
        targets: sliderContainerBackground,
        opacity: 1,
        easing: 'linear'
    });
};

// Изменение `background-image`

// Сначала сохраняем вычисляемое значение `background` каждого элемента, как оно определено в CSS

// Когда элемент выбирается, `background` устанавливается соответственно

var items = document.querySelectorAll('.path-slider__item');

var images = [];

for (var j = 0; j < items.length; j++) {

images.push(getComputedStyle(items[j].querySelector('.item__circle')).getPropertyValue('background-image'));

}

var imgAnimation;

var lastIndex;

var setImage = function (index) {

if (imgAnimation) {

imgAnimation.pause();

sliderContainer.style['background-image'] = images[lastIndex];

sliderContainerBackground.style['opacity'] = 0;

}

lastIndex = index;

sliderContainerBackground.style['background-image'] = images[index];

imgAnimation = anime({

targets: sliderContainerBackground,

opacity: 1,

easing: 'linear'

});

};

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

var sliderContainer = document.querySelector('.path-slider');
var sliderContainerBackground = document.createElement('div');
sliderContainerBackground.setAttribute('class', 'path-slider__background');
setImage(0);
sliderContainer.appendChild(sliderContainerBackground);

var sliderContainer = document.querySelector('.path-slider');

var sliderContainerBackground = document.createElement('div');

sliderContainerBackground.setAttribute('class', 'path-slider__background');

setImage(0);

sliderContainer.appendChild(sliderContainerBackground);

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

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

var options = {
    startLength: 'center',
    paddingSeparation: 100,
    easing: 'easeOutCubic',
    begin: function (params) {
        // Когда элемент выбирается, тогда мы устанавливаем `background` соответственно
        if (params.selected) {
            setImage(params.index);
        }
    }
};

var slider = new PathSlider(pathEl, '.path-slider__item', options);

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

var options = {

startLength: 'center',

paddingSeparation: 100,

easing: 'easeOutCubic',

begin: function (params) {

// Когда элемент выбирается, тогда мы устанавливаем `background` соответственно

if (params.selected) {

setImage(params.index);

}

};

var slider = new PathSlider(pathEl, '.path-slider__item', options);

Как мы объяснили в предыдущем руководстве, по умолчанию библиотека PathSlider добавляет прослушиватели событий для событий click, поэтому нам не о чем беспокоиться. Все, что нам нужно сделать, это правильно переключить изображения, используя функцию setImage.

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

// Пересоздаем `path` и обновляем позицию элементов при событии `resize` (адаптивное поведение)

window.addEventListener('resize', function() {
    pathEl.setAttribute('d', getSinPath());
    slider.updatePositions();
});

// Пересоздаем `path` и обновляем позицию элементов при событии `resize` (адаптивное поведение)

window.addEventListener('resize', function() {

pathEl.setAttribute('d', getSinPath());

slider.updatePositions();

});

Таким образом, наш слайдер будет отлично смотреться в любых размерах экрана 🙂

Заключение

И все готово! Мы снова реализовали возможности, предлагаемые SVG-путями для разработки красивых и функциональных компонентов. Вы можете просмотреть демо-версии здесь:

Demo Elastic

Demo Images

Поэкспериментируйте с кодом на CodePen:

CodePen Elastic

CodePen Images

или скачайте полный код на Github.

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

Автор: Luis Manuel

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

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

Метки: svg