silk-ball v1.0.4
丝滑球
一个能让元素实现惯性移动、反弹、磁吸效果的插件
安装
npm i silk-ball -S使用
import SilkBall from 'silk-ball'
let silkBall = new SilkBall(el,options);配置
- rangeBody
- magnet
- direction
- margin
- history
- speed
- engine
- cssCubic
- jsCubic
rangeBody
rangeBody:true
该参数决定滑动的元素是否是全屏范围内滑动、反弹，默认为true,否则，在该元素的父元素范围内滑动
magnet
magnet:true
该参数决定是否开启磁吸效果，当惯性速度减至0，默认会贴边，如果你关闭该值的话，当惯性结束时则停止运动。
direction
direction:x
该参数决定的是磁吸的方向，默认为水平方向磁吸，否则就在垂直方向上磁吸贴边。
margin
margin:0
该值规定的是反弹、磁吸与边界的距离，言简意赅就是你想离边界多少还是反弹或者磁吸停止距离边界的距离
history
history:false
该值是决定你是否保留上次小球的停止的位置，不会在小球运动时保存位置。 当你开启磁吸时：保存的位置则是磁吸的位置 关闭磁吸时：位置则是惯性结束时的位置
speed
speed:500
该值决定的是滑动脱手时惯性滑动的速度，不过我不建议你修改该值。当值越大，惯性滑动越快，值为0时：相当于您关闭了惯性滑动
engine
engine:'js'
该值决定你使用那种磁吸方式：
1、css transition
2、js 动画
cssCubic
cssCubic:cubic-bezier(0.21, 1.93, 0.53, 0.64)
取值是贝塞尔曲线，如果使用的引擎是css模式它将决定你磁吸贴边的动画效果
jsCubic
jsCubic:Bounce_easeOut
取值是贝塞尔曲线，如果使用的引擎是js动画模式它将决定你磁吸贴边的动画效果。
取值：Linear、Quad_easeIn、Quad_easeOut、Quad_easeInOut、Cubic_easeIn、Cubic_easeOut、Cubic_easeInOut、Quart_easeIn、Quart_easeOut、Quart_easeInOut、Quint_easeIn、Quint_easeOut、Quint_easeInOut、Sine_easeIn、Sine_easeOut、Sine_easeInOut、Expo_easeIn、Expo_easeOut、Expo_easeInOut、Circ_easeIn、Circ_easeOut、Circ_easeInOut、Bounce_easeIn、Bounce_easeOut、Bounce_easeInOut
您可以试着尝试下。