<html> <head> <style type="text/css"> #Mover { position : absolute; background : #ccc; left : 200px; top : 200px; } #Repeat1 { position : absolute; background : red; top : 100px; left : 100px; } #circ { position : absolute; width : 4px; height : 4px; line-height : 1px; overflow : hidden; margin : -2px 0 0 -2px; background : #333; -moz-border-radius : 4px; } </style> <script language="JavaScript" type="text/javascript"> // Dojo configuration djConfig = { isDebug: true }; </script> <script type="text/javascript" src="../../dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.animation.*"); dojo.require("dojo.html.display"); dojo.require("dojo.event.*"); function init(){ Line = dojo.math.curves.Line; Circle = dojo.math.curves.Circle; Anim = dojo.animation.Animation; var line = new Line([200,200], [400, 20]); a = new Anim(line, 1000, 0); var mover = document.getElementById("Mover"); a.handler = function(e) { switch(e.type) { case "play": dojo.html.setOpacity(mover, 1); break; case "animate": mover.style.left = e.x + "px"; mover.style.top = e.y + "px"; break; case "end": break; } } b = new Anim(new Line([1],[0]), 500, 0); b.onAnimate = function(e) { if(e.x){ dojo.html.setOpacity(mover, e.x); } } q = new dojo.animation.AnimationSequence(); q.add(a, b); r = new Anim(new dojo.math.curves.Bezier([[100,100], [80,80], [200,200], [400,30], [100,100]]), 2000, 0, 3); r.onAnimate = function(e) { with(document.getElementById("Repeat1").style) { left = e.x + "px"; 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.addOnLoad(init); </script> </head> <body> <p>This demo kinda sucks, but you can see what goes on.</p> <a href="javascript:q.playPause()">Play/Pause</a> (sequence) | <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> <br /> <div id="circ"></div> <a href="javascript:c.playPause()">Play/Pause</a> (circle, repeats forever) </body> </html>