1 files changed, 80 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_Line.html b/includes/js/dojox/fx/tests/example_Line.html
new file mode 100644
index 0000000..4177e96
--- /dev/null
+++ b/includes/js/dojox/fx/tests/example_Line.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<title>using a dojo._Line and dojo._Animation</title>
+	<style type="text/css">
+	        @import "../../../dojo/resources/dojo.css";
+	        @import "../../../dijit/themes/tundra/tundra.css";
+		@import "../../../dijit/tests/css/dijitTests.css"; 
+		#node {
+			position:absolute;
+			top:100px; left:100px; 
+			width:400px;
+			height:400px; 
+			padding:12px;
+			-moz-border-radius:5pt;
+			overflow:hidden;
+			border:1px solid #333; 
+		}
+	</style>
+	<script type="text/javascript"
+	        djConfig="parseOnLoad: true, isDebug:false"
+	        src="../../../dojo/dojo.js"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.fx.easing");
+		dojo.require("dojox.gfx");
+
+		var surface, shape, line, node; 
+		dojo.addOnLoad(function(){
+			// dojo._Line is just a simple class to hold some numbers, and return a given point
+			// on the line as a percentage, essentially
+			var _line = new dojo._Line(20,75); // a holder for the numbers 20 .. 75
+			node = dojo.byId('node');
+
+			surface = dojox.gfx.createSurface(node,400,400);
+			shape = surface.createCircle({ cx: 200, cy: 200, r: 20 })
+				.setFill([0,0,255])
+				.setStroke({ color:[128,128,128], width: 1});
+			
+			// so we just make a raw _Animation
+			var _anim = new dojo._Animation({
+				// the id of the shape	
+				node: node,
+				// some easing options
+				easing: dojox.fx.easing.easeInOut,
+				// our radius start and end values
+				curve:_line,
+				// call transform on the shape with the values
+				onAnimate: function(){
+					shape.setShape({ r: arguments[0] });
+				},
+				duration:1200 // ms
+				// rate:100 // ms, so duration/rate iterations
+			});
+
+
+			dojo.connect(_anim,"onEnd",function(){
+				dojo.animateProperty({
+					node: node,
+					duration:1000,
+					properties: {
+						left: { end: 300, unit:"px" }
+					},
+					onEnd: function(){
+						dojo.fadeOut({ node: node, duration:3000 }).play();
+					}	
+				}).play(500);
+			});
+			_anim.play(2000);
+		});
+	</script>
+</head>
+<body class="tundra">
+	
+	<h1>an "animateProperty" for dojox.gfx</h1>
+	<div id="node"></div>
+
+</body>
+</html>