转载

实现元素沿贝兹曲线和弧线运动的jQuery插件

简要教程

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})

来源：jQuery之家

原文 http://www.html5cn.org/article-9241-1.html

正文到此结束