其他代码
贝兹曲线和弧线运动jQuery插件
PetitQ
jQuery.path 是一款可以实现元素沿贝兹曲线和弧线运动的 jQuery 插件。这是一个工具类插件，它提供了一写多维的动画的方法，特别是提供了沿 Bezier 曲线和圆弧的动画方法。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})
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
