wangdaping
/
wp


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojoClass detail information</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"
	        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 100..300
			console.log(_line,_line.getValue(0.5 /* Float: 0..1 */)); // should return 200

			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>animateProperty for dojox.gfx</h1>
	<div id="node"></div>

</body>
</html>