git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/example_Line.html

   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                 djConfig="parseOnLoad: true, isDebug:false"
  23                 src="../../../dojo/dojo.js"></script>
  24         <script type="text/javascript">
  25                 dojo.require("dojo.parser");
  26                 dojo.require("dojox.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: dojox.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: { end: 300, unit:"px" }
  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>