dojo.animateProperty
dojo.animateProperty is the foundation of most dojo.fx animations. It takes an object of "properties" corresponding to style properties, and animates them in parallel over a set duration.
Usage
parameter | type | description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args | dojo.__AnimArgs |
|
Examples
Example 1
A simple animation that changes the width of the specified node.
dojo.animateProperty({
node: "nodeId",
properties: { width: 400 },
}).play();
Dojo figures out the start value for the width and converts the
integer specified for the width to the more expressive but
verbose form { width: { end: '400', units: 'px' } }
which you
can also specify directly
Example 2
animate width, height, and padding over 2 seconds...the pedantic way:
dojo.animateProperty({ node: node, duration:2000,
properties: {
width: { start: '200', end: '400', unit:"px" },
height: { start:'200', end: '400', unit:"px" },
paddingTop: { start:'5', end:'50', unit:"px" }
}
}).play();
Example 3
plug in a different easing function and register a callback for when the animation ends. Easing functions accept values between zero and one and return a value on that basis. In this case, an exponential-in curve.
dojo.animateProperty({
node: "nodeId",
// dojo figures out the start value
properties: { width: { end: 400 } },
easing: function(n){
return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
},
onEnd: function(){
// called when the animation finishes
}
}).play(500); // delay playing half a second