如何使用 PathSlider 库为 SVG 路径上的元素制作动画

简介

SVG 的 "路径 "元素可用于为网站或网络应用程序的前端创建新颖的动画。在本教程中，我们将向您展示如何使用 PathSlider库设置 HTML、CSS 和 JavaScript，以便沿 SVG路径移动元素。按照整个教程，您将使用该库开发出从一个位置移动到另一个位置的滑块。

路径滑块基本演示](https://cdn.scotch.io/12350/77WkGdLTbee8e9moqotw_path-slider.gif)

第 1 步 - 设置 `PathSlider` 库

在开始使用代码让滑块工作之前，让我们先看看如何使用 PathSlider 库，并探索它的一些选项。

首先，我们的库依赖于 anime.js，因此在开始使用 PathSlider 之前，我们需要在项目中包含它。此外，在 HTML 和 CSS 代码中还必须考虑其他一些小要求，以便一切工作正常，但我们在开发滑块时会看到这些要求。

为了更好地理解该库提供的一些选项，请看下图，图中显示了 SVG 路径的部分内容和图示参数的名称：

路径滑块选项

该图描述了

startLength (float 或 'center')：开始定位元素的路径长度。这将始终是活动项目的位置。被选中的项目将移动到这里，同时也会相应地移动所有其他项目。
activeSeparation （浮点)：活动项目与相邻项目之间的间隔。
paddingSeparation （浮点数)：路径开始和结束时的填充分隔。
items：在选中的项目定位后，所有其他项目将根据剩余空间以相同距离定位。

除了 "项目 "之外，这里描述的所有属性都可以在初始化滑块时作为 "选项 "提供，因此我们可以完全自由地根据自己的需要定制滑块。除此以外，您还可以在 PathSlider Github 代码库中查阅其他可用的选项。

接下来，让我们编写 HTML 代码。

第 2 步 - 创建 HTML 结构

我们的 HTML 代码将包括一个容器 (.path-slider)、用于在其中滑动项目的 SVGpath，以及项目。值得注意的是，SVG path和项目应位于同一容器内，这样可以避免定位问题。

 1<!-- Path Slider Container -->
 2<div class="path-slider">
 3    <!-- SVG path to slide the items -->
 4    <svg width="460px" height="310px" viewBox="0 0 460 310">
 5        <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>
 6    </svg>
 7    <!-- Slider items -->
 8    <a href="#chat" class="path-slider__item">
 9        <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div>
10        <div class="item__title"><h2>Chat</h2></div>
11    </a>
12    <a href="#alarmclock" class="path-slider__item">
13        <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div>
14        <div class="item__title"><h2>Alarm clock</h2></div>
15    </a>
16    <a href="#camera" class="path-slider__item">
17        <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div>
18        <div class="item__title"><h2>Camera</h2></div>
19    </a>
20    <a href="#envelope" class="path-slider__item">
21        <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div>
22        <div class="item__title"><h2>Envelope</h2></div>
23    </a>
24    <a href="#lightbulb" class="path-slider__item">
25        <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div>
26        <div class="item__title"><h2>Light bulb</h2></div>
27    </a>
28</div>

现在我们有了基本结构，让我们用 CSS 为其设计样式。

第 3 步 - 使用 CSS 添加样式

我们不需要任何样式就可以使用滑块，但我们通常希望将项目置于 "路径 "笔画的中心。我们还将添加一些其他样式，以创建现代的前端外观。

在此，我们只集中讨论主要部分：

 1// Circle width and height
 2$circle-width: 74px;
 3$circle-height: 74px;
 4
 5// Styles for slider items, positioning them absolutely, in the top left corner of the container
 6// Also centering them (see negative values for `left` and `top`)
 7// They will be positioned along the SVG path later with Javascript
 8.path-slider__item {
 9  position: absolute;        // Get items out of the flow, and let the library set the correct position
10  left: - $circle-width / 2; // Half of the width, for centering purpose
11  top: - $circle-height / 2; // Half of the height, for centering purpose
12}
13
14// Styles for the item circle (icon container)
15.item__circle {
16  width: $circle-width;    // Desired width
17  height: $circle-height;  // Desired height
18}
19
20// Styles for the selected item
21.path-slider__current-item {
22
23  .item__circle {
24    background-color: #4DA169; // Change circle background-color for selected item
25    transform: scale(1.5);     // Scale up circle for selected item
26  }
27}

您可以在 Github 代码库中查看完整代码。

现在，样式设计已经完成。接下来，让我们用 JavaScript 初始化滑块。

第 4 步 - 使用 JavaScript 初始化滑块

要初始化滑块，我们只需要 path 和 items。此外，我们还可以传递一个包含 "选项 "的对象，用于自定义。因此，我们只需这样一段代码就能让滑块按需工作：

 1// Setting up the options
 2var options = {
 3    startLength: 0, // start positioning the slider items at the beginning of the SVG path
 4    duration: 3000, // animation duration (used by anime.js)
 5    stagger: 15, // incrementally delays between items, producing a staggering effect
 6    easing: 'easeOutElastic', // easing function (used by anime.js)
 7    elasticity: 600, // elasticity factor (used by anime.js)
 8    rotate: true // This indicates that items should be rotated properly to match the SVG path curve
 9};
10
11// Initialize the slider using our SVG path, items, and options
12new PathSlider('.path-slider__path', '.path-slider__item', options);

在此代码片段中，我们注释了所有使用的 "选项"，以便您了解每个选项的含义。

该库将为滑块中的每个项目初始化 "点击 "事件，因此，如果我们点击其中任何一个项目，它就会被选中（以动画形式移动到主位置)。如果我们想在滑块中添加更多控件（例如某种分页或上一个和下一个按钮)，我们可以调用一些有用的函数来选择任何项目：

selectPrevItem()：选择前一个项目。
selectNextItem()：选择下一个项目。
selectItem(index)：使用相应的 index 选择任何项目。

这样就会出现类似下面的滑块，其中的元素会沿着 SVG 路径移动：