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