如何使用PathSlider库沿SVG路径为元素设置动画

介绍

SVG 的 path 元素可用于为您的网站或 Web 应用程序的前端创建创新动画。 在本教程中，我们将向您展示如何使用 PathSlider 库 设置 HTML、CSS 和 JavaScript 以沿 SVG path 移动元素。 通过遵循整个教程，您将使用此库开发从一个位置移动到另一个位置的滑块。

第 1 步 — 设置 PathSlider 库

在进入代码以使滑块工作之前，让我们看看我们如何使用 PathSlider 库，以及探索它的一些选项。

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

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

这张图描绘了：

• startLength (float or 'center'): 开始定位元素的路径长度。 这将始终是活动项目的位置。 选定的项目将移动到此处，并相应地移动所有其他项目。
• activeSeparation (float)：活动项与相邻项之间的分隔。
• paddingSeparation (float)：路径开头和结尾的填充分隔。
• items：选定的项目被定位后，所有其他项目将被定位在彼此相同的距离，给定剩余空间。

除了 items 之外，这里描述的所有属性都可以在初始化我们的滑块时提供为 options，从而提供完全自由来根据我们的需要自定义滑块。 除了这些，还有其他 options 可用，您可以在 PathSlider Github 存储库 中查阅。

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

第 2 步 - 创建 HTML 结构

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

<!-- 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 添加样式

我们不需要任何样式来使滑块工作，但我们通常希望将项目定位在 path 笔划的中心。 我们还将添加一些其他样式来创建现代前端外观。

在这里，我们将只关注主要部分：

// 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);

在这段代码片段中，我们将所有用到的 options 都注释掉了，方便大家理解每一个的含义。

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

• selectPrevItem()：选择上一项。
• selectNextItem()：选择下一项。
• selectItem(index)：使用对应的index选择任意项目。

这将为您提供如下所示的滑块，其中元素沿 SVG path 移动：

结论

在本教程中，我们使用 PathSlider 库提供的封闭 SVG path 和一些 options 开发了一个基本滑块。 您可以查看现场演示，在Codepen上玩代码，或在Github上获取完整代码。