New file |
0,0 → 1,47 |
<html> |
<head> |
<title>Testing dojox.dtl using animation to change attributes</title> |
<script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script> |
<script> |
dojo.require("dojox.dtl.widget"); |
|
dojo.provide("demo"); |
|
dojo.declare("demo.Animation", dojox.dtl._Widget, |
{ |
buffer: 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering |
constructor: function(props, node){ |
this.context = new dojox.dtl.Context({ x: 0, y: 0 }); |
this.template = new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "animation.html")); |
}, |
postCreate: function(){ |
this.render(this.template, this.context); |
var anim = new dojo._Animation({ |
curve: [0, 300], |
rate: 10, |
duration: 5000, |
easing: dojo._defaultEasing |
}); |
dojo.connect(anim, "onAnimate", this, "_reDraw"); |
anim.play(); |
}, |
_reDraw: function(obj){ |
this.context.x = obj; |
this.context.y = Math.sqrt(obj) * 10; |
|
dojo.style(this.blue, "left", this.context.x); |
dojo.style(this.blue, "top", this.context.y + 10); |
|
this.render(this.template, this.context); |
} |
}); |
|
dojo.require("dojo.parser"); |
</script> |
</head> |
<body> |
<div dojoType="dojox.dtl.AttachPoint"> |
<div dojoType="demo.Animation" /> |
</div> |
</body> |
</html> |