dojox.fx.Timeline¶
| Project owner: | Mike Wilcox |
|---|---|
| Author: | Mike Wilcox |
| since: | 1.5 |
Basic Description¶
An add-on to dojo.fx that provides the ability to create a complex property animation based on an array of “keyframes”.
The Timeline is a replacement for the default dojo._Line. Instead of _Line.getValue returning a float between 0-1, _Timeline.getValue returns an object with all properties and their current values. A property does not have to appear in every keyframe. As in the example below, “height” is transitioned from the first keyframe to the third. “width” is transitioned from the first to the second to the third.
After including dojox.fx.Timeline, the factory method dojox.fx.animateTimeline becomes available. This method accepts two arguments. The second is the node or id of the node to animate. The first is an object which expects two properties:
- duration
- Duration of the animation in milliseconds. Defaults to 1000.
- keys
- An array of objects, with style properties and values.
The objects in the keys array are key-value pairs of CSS properties, similar as in dojo.animateProperty. In addition to the CSS key-values, a keys object accepts two custom properties:
- step
- The start, finish or percentage that this keyframe represents. Allowed parameters are:
0%-100% (as a string)
from (same as 0%, used to conform with the Webkit animation spec)
to (same as 100%, used to conform with the Webkit animation spec)
- ease
The string name of a dojo.fx.easing ease. Defaults to “linear”. Use the suffix name of the ease, like: “quadIn”, not: “dojo.fx.quadIn”.
Example¶
CSS:
.rgt{
width:300px;
height:400px;
border:1px solid #666;
position:relative;
float:left;
margin-left:10px;
}
#myDiv{
width:90px;
height:40px;
position:relative;
border:1px solid #000;
background:#ffff00;
margin:10px auto;
text-align:center;
}
HTML:
<div class="rgt">
<div id="myDiv">Animate Me</div>
</div>
JavaScript:
dojo.require("dojox.fx.Timeline");
var keys = [
{
step:"0px",
ease:"quadInOut",
width:"90px",
height:"40px",
lineHeight:"40px"
},{
step:"25%",
width:"190px"
},{
step:"100%",
width:"90px",
height:"200px",
lineHeight:"200px"
}
];
dojo.ready(function(){
ani = dojox.fx.animateTimeline({keys:keys, duration:2000}, "myDiv").play();
});
reverse¶
If you include dojox.fx.ext-dojo.reverse, the Timeline animation can be reversed.