Constructordojo.animateProperty

<script src="../../js/dojo.js"></script>
defined in dojo/_base/fx.js

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

function (/*dojo.__AnimArgs*/ args) (view source)
parametertypedescription
argsdojo.__AnimArgs
fieldtypedescription
.durationIntegerOptional. Duration of the animation in milliseconds.
.easingFunctionOptional. An easing function.
.nodeDOMNode|StringThe node referenced in the animation
.propertiesObject 

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

PropertiesBack to top