| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>using a dojo._Line and dojo.Animation</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 8 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 9 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 10 | #node { |
|---|
| 11 | position:absolute; |
|---|
| 12 | top:100px; left:100px; |
|---|
| 13 | width:400px; |
|---|
| 14 | height:400px; |
|---|
| 15 | padding:12px; |
|---|
| 16 | -moz-border-radius:5pt; |
|---|
| 17 | overflow:hidden; |
|---|
| 18 | border:1px solid #333; |
|---|
| 19 | } |
|---|
| 20 | </style> |
|---|
| 21 | <script type="text/javascript" |
|---|
| 22 | data-dojo-config="parseOnLoad: true, isDebug:false" |
|---|
| 23 | src="../../../dojo/dojo.js"></script> |
|---|
| 24 | <script type="text/javascript"> |
|---|
| 25 | dojo.require("dojo.parser"); |
|---|
| 26 | dojo.require("dojo.fx.easing"); |
|---|
| 27 | dojo.require("dojox.gfx"); |
|---|
| 28 | |
|---|
| 29 | var surface, shape, line, node; |
|---|
| 30 | dojo.addOnLoad(function(){ |
|---|
| 31 | // dojo._Line is just a simple class to hold some numbers, and return a given point |
|---|
| 32 | // on the line as a percentage, essentially |
|---|
| 33 | var _line = new dojo._Line(20,75); // a holder for the numbers 20 .. 75 |
|---|
| 34 | node = dojo.byId('node'); |
|---|
| 35 | |
|---|
| 36 | surface = dojox.gfx.createSurface(node,400,400); |
|---|
| 37 | shape = surface.createCircle({ cx: 200, cy: 200, r: 20 }) |
|---|
| 38 | .setFill([0,0,255]) |
|---|
| 39 | .setStroke({ color:[128,128,128], width: 1}); |
|---|
| 40 | |
|---|
| 41 | // so we just make a raw Animation |
|---|
| 42 | var _anim = new dojo.Animation({ |
|---|
| 43 | // the id of the shape |
|---|
| 44 | node: node, |
|---|
| 45 | // some easing options |
|---|
| 46 | easing: dojo.fx.easing.easeInOut, |
|---|
| 47 | // our radius start and end values |
|---|
| 48 | curve:_line, |
|---|
| 49 | // call transform on the shape with the values |
|---|
| 50 | onAnimate: function(){ |
|---|
| 51 | shape.setShape({ r: arguments[0] }); |
|---|
| 52 | }, |
|---|
| 53 | duration:1200 // ms |
|---|
| 54 | // rate:100 // ms, so duration/rate iterations |
|---|
| 55 | }); |
|---|
| 56 | |
|---|
| 57 | |
|---|
| 58 | dojo.connect(_anim,"onEnd",function(){ |
|---|
| 59 | dojo.animateProperty({ |
|---|
| 60 | node: node, |
|---|
| 61 | duration:1000, |
|---|
| 62 | properties: { |
|---|
| 63 | left:300 |
|---|
| 64 | }, |
|---|
| 65 | onEnd: function(){ |
|---|
| 66 | dojo.fadeOut({ node: node, duration:3000 }).play(); |
|---|
| 67 | } |
|---|
| 68 | }).play(500); |
|---|
| 69 | }); |
|---|
| 70 | _anim.play(2000); |
|---|
| 71 | }); |
|---|
| 72 | </script> |
|---|
| 73 | </head> |
|---|
| 74 | <body class="tundra"> |
|---|
| 75 | |
|---|
| 76 | <h1>an "animateProperty" for dojox.gfx</h1> |
|---|
| 77 | <div id="node"></div> |
|---|
| 78 | |
|---|
| 79 | </body> |
|---|
| 80 | </html> |
|---|
