jQuery.path是一款可以实现元素沿贝兹曲线和弧线运动的jQuery插件。这是一个工具类插件,它提供了一写多维的动画的方法,特别是提供了沿Bezier曲线和圆弧的动画方法。
浏览器兼容
- Chrome
- Firefox 3.5
- Safari 4
- IE 6, 7, 8
使用方法
Bezier(贝兹曲线示例)
下面是沿一条贝兹曲线动画的示例代码。
var bezier_params = { start: { x: 185, y: 185, angle: 10 }, end: { x:540, y:110, angle: -10, length: 0.25 } } $("my_elem").animate({path : new $.path.bezier(bezier_params)})
贝兹曲线由一个开始点,一个结束点和一个控制点组成:
-
start
是开始点。 -
end
是结束点。 -
x
和y
代表点的坐标系。必须填写。 -
angle
是控制点和开始点及结束点连线的角度。可选参数,默认为0。 -
length
是从点到它的控制点的距离和开始点到结束点距离的比例。可选参数,默认为1/3。
Arc(弧线示例)
下面是沿一条贝兹曲弧线动画的示例代码。
var arc_params = { center: [285,185], radius: 100, start: 30, end: 200, dir: -1 } $("my_elem").animate({path : new $.path.arc(arc_params)})
弧线参数:
-
center
是包含开始点和结束点的圆形的中心。 -
radius
是圆形的半径。 -
start
是开始点的角度。0代表“正北”,顺时针方向旋转。 -
end
是结束点的角度。0代表“正北”,顺时针方向旋转。 -
dir
是移动的方向。如果不是从开始点到结束点的动画就需要明确指出该参数,例如:开始点为100,结束点为30,但是你想顺时针运动。
其它路径动画
该插件也提供了一些沿其它路径动画的功能。例如下面是一个沿正弦波运动的动画:
var SineWave = function() { this.css = function(p) { var s = Math.sin(p*20) var x = 500 - p * 300 var y = s * 50 + 150 var o = ((s+2)/4+0.1) return {top: y + "px", left: x + "px", opacity: o} } }; $("my_elem").animate({path : new SineWave})
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!