Permalink
Browse files

added README

  • Loading branch information...
1 parent 2faad86 commit 5cae60680161a882a86ef959e444ada1e23f118a @weepy committed Sep 22, 2009
Showing with 139 additions and 24 deletions.
  1. +91 −0 README.markdown
  2. +48 −24 test/test.html
View
@@ -0,0 +1,91 @@
+jQuery.path
+========
+
+Provides animation along bezier and circular arcs.
+
+The animation engine in jQuery is focussed on single dimensional animation - hence it's difficult to animate two variables along a path.
+
+This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.
+
+Bezier
+---
+
+Example: animate along a bezier path
+
+<pre>
+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)})
+</pre>
+
+Bezier curves are made form a start point, an end point each with a control point
+
+* start is starting point
+* end is the final point
+* x,y indicate the coordinates at that point. Required
+* angle is the angle of the control point from the line joining the start and end. Optional, default is 0
+* length is the distance from the point to it's control point as a ratio of the distance from start to end. Optional, default is 1/3
+
+Arc
+---
+
+Exampe: animate along an arc
+
+<pre>
+
+var arc_params = {
+ center: [285,185],
+ radius: 100,
+ start: 30,
+ end: 200,
+ dir: -1
+ }
+
+$("my_elem").animate({path : new $.path.arc(arc_params)})
+</pre>
+
+* center is the coords of the centre of an imaginary circle that contains the start and end point
+* radius is the radius of this circle
+* start is the angle of the start point. 0 is "North", measured clockwise
+* end is the angle of the start point. 0 is "North", measured clockwise
+* dir is the direction to move in. Only required if not obvious from start and end (e.g. if start is 100, end is 30, but you want to animate clockwise)
+
+Other Paths
+----
+
+It is trivial to create other paths, or even animate other parameters. E.g:
+
+<code>
+
+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})
+</code>
+
+Links
+----
+
+* Demo at http://weepy.github.com/jquery.path
+* Source at http://github.com/weepy/jquery.path
+* Issue Tracker at http://github.com/weepy/jquery.path/issues
+
View
@@ -1,5 +1,3 @@
-
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src='../jquery.path.js'></script>
<link type="text/css" rel="stylesheet" media="screen" href="http://weepy.github.com/style.css"/>
@@ -9,7 +7,7 @@
<style>
#arc { position: relative; width: 600px; height: 300px; }
#bezier { position: relative; width: 600px; height: 300px; }
-
+#sine { position: relative; width: 600px; height: 300px; }
.pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
.dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
a { cursor: pointer;}
@@ -19,10 +17,21 @@
<script>
+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}
+ }
+};
+
+
$().ready(function() {
- var Paths = {"arc":[], "bezier":[]}
+ var Paths = {"arc":[], "bezier":[], "sine": []}
var path_fns = {
arc: function(i) {
@@ -40,36 +49,42 @@
start: { x:185, y:185, angle: i*20 * x},
end: {x:540,y:110, angle: i*10, length: i / 4.0}
})
+ },
+ sine : function() {
+ return new SineWave
}
}
for(var type in Paths) {
for(var i=0; i<10; i++ ) {
-
+ if(type == "sine" && i != 9)
+ continue
+
var path = path_fns[type](i)
Paths[type].push(path)
var css = {
"backgroundColor": (i%2) ? "red" : "yellow",
- width: 20*i,
- height: 20*i,
- "-moz-border-radius": 10*i,
- "-webkit-border-radius": 10*i,
- marginLeft: -10*i, // offset the div, so center is at origin
- marginTop: -10*i
+ width: 20*(1+i),
+ height: 20*(1+i),
+ "-moz-border-radius": 10*(1+i),
+ "-webkit-border-radius": 10*(1+i),
+ marginLeft: -10*(1+i), // offset the div, so center is at origin
+ marginTop: -10*(1+i)
}
var $$ = $("<span class=pixel></span>").css(css)
// initialize to start
$$.css(path.css(1))
- $("#" + type).append($$)
+ $("#" + type).append($$)
}
}
+
$(".start").click(function() {
var i =0;
var type = $(this).closest("div").attr("id")
@@ -81,19 +96,19 @@
})
- $(".plot").click(function() {
-
- var $$ = $("<div>")
- var type = $(this).closest("div").attr("id")
-
- for(var t=0; t<1;t+= 0.01) {
- for(var i in Paths[type]) {
- var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
- $$.append(d)
- }
+ $(".plot").click(function() {
+
+ var $$ = $("<div>")
+ var type = $(this).closest("div").attr("id")
+
+ for(var t=0; t<1;t+= 0.01) {
+ for(var i in Paths[type]) {
+ var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
+ $$.append(d)
}
- $("#" + type ).append($$)
- })
+ }
+ $("#" + type ).append($$)
+ })
})
@@ -117,6 +132,15 @@
<p><a class=plot >Plot</a> </p>
</div>
+
+ <h2>custom path: sine wave</h2>
+ <div id=sine>
+ <p><a class=start >Start</a> </p>
+ <p><a class=plot >Plot</a> </p>
+ </div>
+
+
+
<h2>links</h2>
<ul>
<li><a href='http://github.com/weepy/jquery.path/raw/master/jquery.path.js'>Javascript file</a></li>

0 comments on commit 5cae606

Please sign in to comment.