基于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怎么用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！