svg 动画沿路径_使用JavaScript沿SVG路径制作更多元素的动画（第2部分）

最新推荐文章于 2024-07-31 18:05:40 发布

culiu9261

最新推荐文章于 2024-07-31 18:05:40 发布

阅读量822

点赞数

文章标签： java html vue python javascript ViewUI

原文链接：https://scotch.io/tutorials/animating-more-elements-along-svg-paths-with-javascript-part-2909

版权

本文介绍如何使用SVG路径和JavaScript创建全屏响应式的图像滑块动画。通过自动生成SVG路径并结合弹性效果，实现了更具吸引力的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg 动画沿路径

In a previous tutorial we introduced a new library that allows us to animate elements along a SVG path called PathSlider. In addition, we put into practice the use of this library and developed a simple slider, with a minimum of effort. In this tutorial we will see two more examples that illustrate the potentialities of our library and the SVG paths in general.

在先前的教程中，我们引入了一个新的库，该库允许我们沿称为PathSlider的SVG path设置元素的动画。另外，我们将这个库的使用付诸实践，并开发了一个简单的滑块，而只需花费很少的精力。在本教程中，我们将看到另外两个示例，它们大体上说明了我们的库和SVG路径的潜力。

For example, we have developed another slider using a closed SVG path as in the previous tutorial, but with some extra elastic effects:

例如，我们使用上一个教程中的封闭SVG path开发了另一个滑块，但具有一些额外的弹性效果：

We also wanted to do something a little more original, and we created a full screen and responsive slider of images, using this time an open SVG path, generated automatically with Javascript:

我们还想做一些更原始的事情，我们创建了一个全屏的图像响应式滑块，这次使用一个开放的SVG path ，该path使用Javascript自动生成的：

As you can see, the first of these sliders is very similar to the one in the previous tutorial, we have only added some elastic effects to give it a special touch. So in this tutorial we will focus on developing the slider of images. However, the code of this first slider can also be found in the Github repository.

如您所见，这些滑块中的第一个与上一教程非常相似，我们仅添加了一些弹性效果以使其具有特殊的触感。因此，在本教程中，我们将专注于开发图像滑块。但是，第一个滑块的代码也可以在Github存储库中找到。

So, let's start developing this interesting images slider!

因此，让我们开始开发这个有趣的图像滑块！

HTML结构 ( HTML Structure )

The HTML code for our images slider will be even simpler than the one used for the other two sliders. Let's see:

我们图像滑块HTML代码甚至比其他两个滑块更简单。让我们来看看：

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

As you can see, this time we have not defined the SVG path in our HTML code. That is because we will generate it from the Javascript code, something that will allow us greater flexibility, adapting the SVG path to the dimensions of the screen.

如您所见，这次我们没有在HTML代码中定义SVG path 。那是因为我们将从Javascript代码生成它，这将使我们具有更大的灵活性，从而使SVG path适应屏幕的尺寸。

添加样式 ( Adding Styles )

As this time our slider will be full screen, we must add some necessary styles:

由于这次我们的滑块将变为全屏显示，因此我们必须添加一些必要的样式：

// This slider will be full screen
// The `background-image` will be set using Javascript
.path-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
}

// We also need this extra element (generated with Javascript) to fade the images smoothly
.path-slider__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
}

And the images corresponding to each of the elements of the slider have been defined in this way:

并以这种方式定义了与滑块的每个元素相对应的图像：

// Defining images

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

// ... More `background-image` definitions for each item

Please note that we have not emphasized the styles needed for the elements to be centered on the SVG path, and the other general styles used. If you have any doubts about it you can take a look at the previous tutorial, and of course you can also see the full code in the Github repository.

请注意，我们没有强调元素以SVG path为中心所需的样式，以及所使用的其他常规样式。如果对此有任何疑问，可以看一下以前的教程，当然，您也可以在Github存储库中看到完整的代码。

So let's see how to bring our slider to life!

因此，让我们看看如何使我们的滑块栩栩如生！

使其与Javascript一起使用 ( Get it working with Javascript )

The first thing we will do is insert the SVG path element that we need to move the slider items through it:

我们要做的第一件事是插入需要在其中移动滑块项的SVG path元素：

// Creating SVG and path elements and insert to DOM

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

var pathEl = document.createElementNS(svgNS, 'path');
// The `getSinPath` function return the `path` in String format
pathEl.setAttribute('d', getSinPath());
pathEl.setAttribute('class', 'path-slider__path');

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

As you may have noticed, we have generated the path using the getSinPath function, which is responsible for returning the path in String format taking into account the dimensions of the screen and some other parameters. We have decoupled this function in a separate file for a better organization, and you can see its implementation, as well as a brief description of the available options, in the Github repository.

您可能已经注意到，我们使用getSinPath函数生成了path ，该函数负责考虑屏幕尺寸和其他一些参数，以String格式返回路径。我们已将此功能解耦到一个单独的文件中，以实现更好的组织，并且您可以在Github存储库中查看其实现以及可用选项的简要说明。

Now let's see the code for getting the images of the slider items that we have defined in the CSS code, and also the code needed to smoothly switch the images every time we select an item:

现在，让我们看一下获取在CSS代码中定义的滑块项目的图像的代码，以及每次选择项目时平滑切换图像所需的代码：

// Changing `background-image`
// Firstly, saving the computed `background` of each item, as these are defined in CSS
// When item is selected, the `background` is set accordingly

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'
    });
};

Then we need to add the extra element needed to fade the images smoothly, and also set the image for the initial current item (the first one):

然后，我们需要添加使图像平滑褪色所需的额外元素，并为初始当前项目（第一个）设置图像：

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

And having all the above ready, we can initialize our slider with this simple piece of code:

并准备好上述所有内容之后，我们可以使用以下简单的代码初始化滑块：

// Initializing the slider

var options = {
    startLength: 'center',
    paddingSeparation: 100,
    easing: 'easeOutCubic',
    begin: function (params) {
        // Item get selected, then set the `background` accordingly
        if (params.selected) {
            setImage(params.index);
        }
    }
};

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

As we explained in the previous tutorial, by default the PathSlider library adds event listeners for click events, so we don't have to worry about that. All we have to do is to switch the images properly, using the setImage function.

正如我们在上一教程中所解释的那样，默认情况下， PathSlider库为click事件添加了事件侦听器，因此我们不必为此担心。我们要做的就是使用setImage函数正确切换图像。

Finally, to get the path adapting to the dimensions of the screen, thus achieving a responsive behavior, we just have to regenerate the SVG path and update items position on resize event:

最后，要使path适应屏幕尺寸，从而实现响应行为，我们只需要重新生成SVG path并在resize事件上更新项目位置即可：

// Regenerate the SVG `path` and update items position on `resize` event (responsive behavior)

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