基于SVG路径运动的js内容切换插件path-slider怎么用

基于SVG路径运动的js内容切换插件path-slider怎么用，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

path-slider.js是一款基于SVG路径运动的js内容切换轮播插件。该js轮播插件可以根据指定的SVG路径，分布排列多个DOM元素，然后使这些DOM元素在SVG路径上执行轮播动画。

使用方法

在页面中引入anime.min.js和path-slider.js文件。

<script src="js/anime.min.js"></script><script src="js/path-slider.js"></script>

HTML结构

一个最简单的基于SVG路径运动的js轮播效果的HTML结构如下。

<p class="container">    <!-- Path Slider Container -->    <p 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">            <p class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></p>            <p class="item__title"><h3>Chat</h3></p>        </a>        <a href="#alarmclock" class="path-slider__item">            <p class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></p>            <p class="item__title"><h3>Alarm clock</h3></p>        </a>        <a href="#camera" class="path-slider__item">            <p class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></p>            <p class="item__title"><h3>Camera</h3></p>        </a>        <a href="#envelope" class="path-slider__item">            <p class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></p>            <p class="item__title"><h3>Envelope</h3></p>        </a>        <a href="#lightbulb" class="path-slider__item">            <p class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></p>            <p class="item__title"><h3>Light bulb</h3></p>        </a>    </p></p>

可以看到有一条SVG path路径，在路径上有以及5个SVG做成的图案。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。

(function () {    // 设置选项    var options = {        startLength: 0, // 定义开始位置        duration: 3000, // 动画时长        stagger: 15, // 每个动画之间的延迟时间        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    };     // 调用    new PathSlider('.path-slider__path', '.path-slider__item', options); })();

其中，PathSlider()有三个参数，分别表示：

path

• ：SVG路径  

items

• ：DOM元素  

options

• ：配置参数




配置参数

path-slider.js插件常用的配置参数有：

startLength：(float 或 'center') 开始定位元素的路径的长度。

activeSeparation：(float) 当前项与相邻项之间的距离。

paddingSeparation：(float) 在路径的开始和结束处的内间距。

duration、delay、easing和elasticity：这4个参数是anime.js插件的配置参数。

stagger：(ms) 每个项目动画之间的延迟。

begin：(function) 每一项开始动画后的回调函数。

end：(function) 每一项结束动画后的回调函数。

beginAll：(function) 所有项开始动画后的回调函数。

endAll：(function) 所有项结束动画后的回调函数。

blockUntilEnd：(boolean) 默认为false，如果设置为true，你需要等当前动画结束之后，才能选项另外的项。

clickSelection：(boolean) 默认为true，为每一个项添加click事件监听。

看完上述内容，你们掌握基于SVG路径运动的js内容切换插件path-slider怎么用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！