This module defines the base dojo/_base/fx implementation.
See the dojo/_base/fx reference documentation for more information.
The default easing function for Animation(s)
| Parameter | Type | Description |
|---|---|---|
| n | Decimal |
Optional
|
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)
| Parameter | Type | Description |
|---|---|---|
| args | Object |
Object used to generate values from a start value to an end value
| Parameter | Type | Description |
|---|---|---|
| start | int | Beginning value for range |
| end | int | Ending value for range |
A simpler interface to animateProperty(), also returns
an instance of Animation but begins the animation
immediately, unlike nearly every other Dojo animation API.
Simpler (but somewhat less powerful) version
of 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 Animation object returned will be already playing, so
calling play() on it again is (usually) a no-op.
| Parameter | Type | Description |
|---|---|---|
| node | DOMNode | String | a DOM node or the id of a node to animate CSS properties on |
| properties | Object | |
| duration | Integer |
Optional The number of milliseconds over which the animation should run. Defaults to the global animation default duration (350ms). |
| easing | Function |
Optional 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 |
| onEnd | Function |
Optional A function to be called when the animation finishes running. |
| delay | Integer |
Optional The number of milliseconds to delay beginning the animation by. The default is 0. |
Fade out a node
basefx.anim("id", { opacity: 0 });
Fade out a node over a full second
basefx.anim("id", { opacity: 0 }, 1000);
Returns an animation that will transition the properties of
node defined in args depending how they are defined in
args.properties
Foundation of most dojo/_base/fx animations. It takes an object of "properties" corresponding to style properties, and animates them in parallel over a set duration.
| Parameter | Type | Description |
|---|---|---|
| args | Object | An object with the following properties:
|
A simple animation that changes the width of the specified node.
basefx.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 omitted.
Animate width, height, and padding over 2 seconds... the pedantic way:
basefx.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.
basefx.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 second
Like all Animations, animateProperty returns a handle to the
Animation instance, which fires the events common to Dojo FX. Use aspect.after
to access these events outside of the Animation definition:
var anim = basefx.animateProperty({
node:"someId",
properties:{
width:400, height:500
}
});
aspect.after(anim, "onEnd", function(){
console.log("animation ended");
}, true);
// 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 directly to callbacks.
basefx.animateProperty({
node:"mine",
properties:{
height:function(node){
// shrink this node by 50%
return domGeom.position(node).h / 2
},
width:{
start:function(node){ return 100; },
end:function(node){ return 200; }
}
}
}).play();
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 Animation when one is
returned.
| Parameter | Type | Description |
|---|---|---|
| args | Object | The 'magic argument', mixing all the properties into this animation instance. |
Returns an animation that will fade node defined in 'args' from its current opacity to fully opaque.
| Parameter | Type | Description |
|---|---|---|
| args | Object | An object with the following properties:
|
Returns an animation that will fade node defined in 'args' from its current opacity to fully transparent.
| Parameter | Type | Description |
|---|---|---|
| args | Object | An object with the following properties:
|