diff options
| author | Tristan Zur <tzur@web.web.ccwn.org> | 2014-03-27 22:27:47 +0100 |
|---|---|---|
| committer | Tristan Zur <tzur@web.web.ccwn.org> | 2014-03-27 22:27:47 +0100 |
| commit | b62676ca5d3d6f6ba3f019ea3f99722e165a98d8 (patch) | |
| tree | 86722cb80f07d4569f90088eeaea2fc2f6e2ef94 /js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html | |
Diffstat (limited to 'js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html')
| -rw-r--r-- | js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html b/js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html new file mode 100644 index 0000000..def5ecd --- /dev/null +++ b/js/dojo-1.7.2/dojox/dtl/demos/demo_Animation_amd.html @@ -0,0 +1,53 @@ +<html> + <head> + <title>Testing dojox.dtl using animation to change attributes</title> + <script src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true, usePlainJson: true, async:true"></script> + <script> + require(["dojo/_base/lang", + "dojo/_base/declare", + "dijit/_WidgetBase", + "dojox/dtl/_DomTemplated", + "dojo/text!./templates/animation.html", + "dojo/aspect", + "dojo/_base/fx", + "dojo/dom-style", + 'dojo/domReady!', + "dojo/parser", + "dojox/dtl/contrib/dom"], // the dtl deps used in animation.html. require it here so that it is loaded when dtl is processed. + function(lang, declare, _WidgetBase, _DomTemplated, template, aspect, fx, domstyle){ + + declare("demo.Animation", [_WidgetBase, _DomTemplated], { + buffer: 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering + templateString: template, + constructor: function(props, node){ + this.x = 0; + this.y = 0; + }, + postCreate: function(){ + var anim = new fx.Animation({ + curve: [0, 300], + rate: 10, + duration: 5000, + easing: fx._defaultEasing + }); + aspect.after(anim, "onAnimate", lang.hitch(this, this._reDraw), true); + anim.play(); + }, + _reDraw: function(obj){ + this.x = obj; + this.y = Math.sqrt(obj) * 10; + + domstyle.set(this.blue, "left", this.x); + domstyle.set(this.blue, "top", this.y + 10); + + this.render(); + } + }); + }); + + </script> + </head> + <body> + <div data-dojo-type="demo.Animation" ></div> + </body> +</html> |