[Dojo-checkins] r771 - tests/animation

[dojo-checkins at dojotoolkit.org]

Author: david
Date: Fri Jun 24 11:26:07 2005
New Revision: 771

Modified:
   tests/animation/test_animation.html
Log:
updated with ever-repeating animation

Modified: tests/animation/test_animation.html
==============================================================================
--- tests/animation/test_animation.html	(original)
+++ tests/animation/test_animation.html	Fri Jun 24 11:26:07 2005
@@ -14,6 +14,15 @@
 				top : 100px;
 				left : 100px;
 			}
+
+			#circ {
+				position : absolute;
+				width : 4px;
+				height : 4px;
+				margin : -2px 0 0 -2px;
+				background : #333;
+				-moz-border-radius : 4px;
+			}
 		</style>
 		<script language="JavaScript" type="text/javascript">
 			// Dojo configuration
@@ -27,6 +36,7 @@
 			dojo.hostenv.loadModule("dojo.animation.*");
 			dojo.hostenv.loadModule("dojo.xml.*");
 			var Line = dojo.math.curves.Line;
+			var Circle = dojo.math.curves.Circle;
 			var Anim = dojo.animation.Animation;
 
 			function init(){
@@ -64,6 +74,16 @@
 						top = e.y + "px";
 					}
 				}
+
+				// repeats forever (4th arg of -1)
+				c = new dojo.animation.Animation(new Circle([500,120], 40), 1000, 0, -1);
+				dojo.event.connect(c, "onAnimate", function(e) {
+					with(document.getElementById("circ").style) {
+						left = e.x + "px";
+						top = e.y + "px";
+					}
+				});
+				c.play(true);
 			}
 
 			dojo.hostenv.modulesLoadedListeners.push(init);
@@ -76,7 +96,9 @@
 		<a href="javascript:a.gotoPercent(35, true)">Goto 35% and play</a> (move animation)
 		<div id="Mover">I'm a mover</div>
 		<div id="Repeat1" onclick="r.play()">I repeat a few times!</div>
-		<div id="Repeat2">I repeat forever!</div>
+		<br />
+		<div id="circ"></div>
+		<a href="javascript:c.playPause()">Play/Pause</a> (circle, repeats forever)
 	</body>
 </html>