| New file |
|---|
| 0,0 → 1,82 |
|---|
| <!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> |