使用方法
在页面中引入 anime.min.js 和 path-slider.js 文件.
- <script src="js/anime.min.js"></script>
- <script src="js/path-slider.js"></script>
html 结构
一个最简单的基于 SVG 路径运动的 js 轮播效果的 HTML 结构如下.
- <div class="container">
- <!-- 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>
- </div>
可以看到有一条 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 事件监听.
更多信息请参考 path-slider.js 插件的 github 地址: https://github.com/lmgonzalves/path-slider
来源: http://www.tuicool.com/articles/nyQJZb2