git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/dtl/demos/demo_Animation.html

   1 <html>
   2         <head>
   3                 <title>Testing dojox.dtl using animation to change attributes</title>
   4                 <script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script>
   5                 <script>
   6                         dojo.require("dijit._Widget");
   7                         dojo.require("dojox.dtl._HtmlTemplated");
   8
   9                         dojo.declare("demo.Animation", [dijit._Widget, dojox.dtl._HtmlTemplated],
  10                         {
  11                                 buffer: 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering
  12                                 templatePath: dojo.moduleUrl("dojox.dtl.demos.templates", "animation.html"),
  13                                 constructor: function(props, node){
  14                                         console.debug("constructor");
  15                                         this.x = 0;
  16                                         this.y = 0;
  17                                 },
  18                                 postCreate: function(){
  19                                         var anim = new dojo._Animation({
  20                                                 curve: [0, 300],
  21                                                 rate: 10,
  22                                                 duration: 5000,
  23                                                 easing: dojo._defaultEasing
  24                                         });
  25                                         dojo.connect(anim, "onAnimate", this, "_reDraw");
  26                                         anim.play();
  27                                 },
  28                                 _reDraw: function(obj){
  29                                         this.x = obj;
  30                                         this.y = Math.sqrt(obj) * 10;
  31
  32                                         dojo.style(this.blue, "left", this.x);
  33                                         dojo.style(this.blue, "top", this.y + 10);
  34
  35                                         this.render();
  36                                 }
  37                         });
  38
  39                         dojo.require("dojo.parser");
  40                 </script>
  41         </head>
  42         <body>
  43                 <div dojoType="demo.Animation" />
  44         </body>
  45 </html>