http://www.portoenorte.pt/plugins/jquery/plugins/jquery.path.js

1/*
2 * jQuery css bezier animation support -- Jonah Fox
3 * version 0.0.1
4 * Released under the MIT license.
5 */
6/*
7  var path = $.path.bezier({
8    start: {x:10, y:10, angle: 20, length: 0.3},
9    end:   {x:20, y:30, angle: -20, length: 0.2}
10  })
11  $("myobj").animate({path: path}, duration)
12
13*/
14
15;(function($){
16
17  $.path = {};
18
19  var V = {
20    rotate: function(p, degrees) {
21      var radians = degrees * Math.PI / 180,
22        c = Math.cos(radians),
23        s = Math.sin(radians);
24      return [c*p[0] - s*p[1], s*p[0] + c*p[1]];
25    },
26    scale: function(p, n) {
27      return [n*p[0], n*p[1]];
28    },
29    add: function(a, b) {
30      return [a[0]+b[0], a[1]+b[1]];
31    },
32    minus: function(a, b) {
33      return [a[0]-b[0], a[1]-b[1]];
34    }
35  };
36
37  $.path.bezier = function( params, rotate ) {
38    params.start = $.extend( {angle: 0, length: 0.3333}, params.start );
39    params.end = $.extend( {angle: 0, length: 0.3333}, params.end );
40
41    this.p1 = [params.start.x, params.start.y];
42    this.p4 = [params.end.x, params.end.y];
43
44    var v14 = V.minus( this.p4, this.p1 ),
45      v12 = V.scale( v14, params.start.length ),
46      v41 = V.scale( v14, -1 ),
47      v43 = V.scale( v41, params.end.length );
48
49    v12 = V.rotate( v12, params.start.angle );
50    this.p2 = V.add( this.p1, v12 );
51
52    v43 = V.rotate(v43, params.end.angle );
53    this.p3 = V.add( this.p4, v43 );
54
55    this.f1 = function(t) { return (t*t*t); };
56    this.f2 = function(t) { return (3*t*t*(1-t)); };
57    this.f3 = function(t) { return (3*t*(1-t)*(1-t)); };
58    this.f4 = function(t) { return ((1-t)*(1-t)*(1-t)); };
59
60    /* p from 0 to 1 */
61    this.css = function(p) {
62      var f1 = this.f1(p), f2 = this.f2(p), f3 = this.f3(p), f4=this.f4(p), css = {};
63      if (rotate) {
64        css.prevX = this.x;
65        css.prevY = this.y;
66      }
67      css.x = this.x = ( this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4 +.5 )|0;
68      css.y = this.y = ( this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4 +.5 )|0;
69      css.left = css.x + "px";
70      css.top = css.y + "px";
71      return css;
72    };
73  };
74
75  $.path.arc = function(params, rotate) {
76    for ( var i in params ) {
77      this[i] = params[i];
78    }
79
80    this.dir = this.dir || 1;
81
82    while ( this.start > this.end && this.dir > 0 ) {
83      this.start -= 360;
84    }
85
86    while ( this.start < this.end && this.dir < 0 ) {
87      this.start += 360;
88    }
89
90    this.css = function(p) {
91      var a = ( this.start * (p ) + this.end * (1-(p )) ) * Math.PI / 180,
92        css = {};
93
94      if (rotate) {
95        css.prevX = this.x;
96        css.prevY = this.y;
97      }
98      css.x = this.x = ( Math.sin(a) * this.radius + this.center[0] +.5 )|0;
99      css.y = this.y = ( Math.cos(a) * this.radius + this.center[1] +.5 )|0;
100      css.left = css.x + "px";
101      css.top = css.y + "px";
102      return css;
103    };
104  };
105
106  $.fx.step.path = function(fx) {
107    var css = fx.end.css( 1 - fx.pos );
108    if ( css.prevX != null ) {
109      $.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );
110    }
111    fx.elem.style.top = css.top;
112    fx.elem.style.left = css.left;
113  };
114
115})(jQuery);