Function
Object
Object
Function
Beginning value for range
Ending value for range
dojo._Line is the object used to generate values from a start value to an end value
int
Beginning value for range
int
Ending value for range
Function
a floating point number greater than 0 and less than 1
Returns the point on the line
Decimal
Function
The 'magic argument', mixing all the properties into this animation instance.
A generic animation class that fires callbacks into its handlers object at various states.
A generic animation class that fires callbacks into its handlers object at various states. Nearly all dojo animation functions return an instance of this method, usually without calling the .play() method beforehand. Therefore, you will likely need to call .play() on instances of `dojo.Animation` when one is returned.
Function
Returns an animation that will fade the node defined by args.node from the start to end values passed (args.start args.end) (end is mandatory, start is optional)
dojo.Animation
Function
The node referenced in the animation
Duration of the animation in milliseconds.
An easing function.
DOMNode|String
The node referenced in the animation
Integer?
Duration of the animation in milliseconds.
Function?
An easing function.
Function
Returns an animation that will fade node defined in 'args' from its current opacity to fully opaque.
dojo.Animation
Function
Returns an animation that will fade node defined in 'args' from its current opacity to fully transparent.
dojo.Animation
Function
The default easing function for dojo.Animation(s)
Function
Returns an animation that will transition the properties of node defined in `args` depending how they are defined in `args.properties`
`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.
dojo.Animation
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. Defaults to 'px' if ommitted.Animate width, height, and padding over 2 seconds... the
pedantic way:
dojo.animateProperty({ node: node, duration:2000,
properties: {
width: { start: '200', end: '400', units:"px" },
height: { start:'200', end: '400', units:"px" },
paddingTop: { start:'5', end:'50', units:"px" }
}
}).play();
Note 'paddingTop' is used over 'padding-top'. Multi-name CSS properties
are written using "mixed case", as the hyphen is illegal as an object key.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(node){
// called when the animation finishes. The animation
// target is passed to this function
}
}).play(500); // delay playing half a secondLike all `dojo.Animation`s, animateProperty returns a handle to the
Animation instance, which fires the events common to Dojo FX. Use `dojo.connect`
to access these events outside of the Animation definiton:
var anim = dojo.animateProperty({
node:"someId",
properties:{
width:400, height:500
}
});
dojo.connect(anim,"onEnd", function(){
console.log("animation ended");
});
// play the animation now:
anim.play();Each property can be a function whose return value is substituted along.
Additionally, each measurement (eg: start, end) can be a function. The node
reference is passed direcly to callbacks.
dojo.animateProperty({
node:"mine",
properties:{
height:function(node){
// shrink this node by 50%
return dojo.position(node).h / 2
},
width:{
start:function(node){ return 100; },
end:function(node){ return 200; }
}
}
}).play();Function
a DOM node or the id of a node to animate CSS properties on
The number of milliseconds over which the animation should run. Defaults to the global animation default duration (350ms).
An easing function over which to calculate acceleration and deceleration of the animation through its duration. A default easing algorithm is provided, but you may plug in any you wish. A large selection of easing algorithms are available in `dojo.fx.easing`.
A function to be called when the animation finishes running.
The number of milliseconds to delay beginning the animation by. The default is 0.
A simpler interface to `dojo.animateProperty()`, also returns an instance of `dojo.Animation` but begins the animation immediately, unlike nearly every other Dojo animation API.
`dojo.anim` is a simpler (but somewhat less powerful) version of `dojo.animateProperty`. It uses defaults for many basic properties and allows for positional parameters to be used in place of the packed "property bag" which is used for other Dojo animation methods. The `dojo.Animation` object returned from `dojo.anim` will be already playing when it is returned from this function, so calling play() on it again is (usually) a no-op.
dojo.Animation
Fade out a node
dojo.anim("id", { opacity: 0 });Fade out a node over a full second
dojo.anim("id", { opacity: 0 }, 1000);Function
Object