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是结束点。
  • xy代表点的坐标系。必须填写。
  • 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})