dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
114 lines (100 loc) • 5.08 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animate rectangles</title>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>-->
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<script type="text/javascript" charset="utf-8">
dojo.require("dojox.gfx");
dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
var WIDTH = 600, HEIGHT = 400,
BAR_GAP = 20, BAR_WIDTH = 76,
BAR_FILL = "red", BAR_STROKE = "black",
CHAIN_DURATION = 250, COMBINE_DURATION = 1000;
var rects = [];
var enable = function(enabled){
// enable/disable controls on the page
dojo.query("input, select, button, textarea").attr("disabled", !enabled);
};
var empty = {};
var populateSelect = function(from, select){
var module = dojo.getObject(from);
for(var name in module){
if(name in empty){ continue; }
var fun = module[name];
if(dojo.isFunction(fun)){
dojo.create("option", {
value: from + "." + name,
selected: name == "backOut",
innerHTML: from + "." + name
}, select);
}
}
};
var animate = function(){
// disable controls
enable(false);
// get old heights
var oldHeights = dojo.map(rects, function(rect){ return rect.getShape().height; });
// generate new heights (can't be 0 on IE/VML!)
var newHeights = dojo.map(rects, function(){ return 1 + Math.random() * (HEIGHT - 1); });
// get parameters
var duration = dojo.byId("chain").checked ? CHAIN_DURATION : COMBINE_DURATION,
easing = dojo.getObject(dojo.byId("easing").value);
// create animations between heights
var animations = dojo.map(rects, function(rect, i){
// create animation
var anim = new dojo._Animation({
duration: duration,
easing: easing,
curve: [oldHeights[i], newHeights[i]]
});
// update the rectangle on every tick
dojo.connect(anim, "onAnimate", function(height){
var shape = rect.getShape();
shape.y = HEIGHT - height;
shape.height = height;
rect.setShape(shape);
});
return anim;
});
// combine all animations
var masterAnimation = dojo.byId("chain").checked ?
dojo.fx.chain(animations) : dojo.fx.combine(animations);
// enable controls when they are done
dojo.connect(masterAnimation, "onEnd", function(){ enable(true); });
// start the animation
masterAnimation.play();
}
var init = function(surface){
// create rectangles
for(var w = BAR_GAP; w < WIDTH - BAR_WIDTH; w += BAR_WIDTH + BAR_GAP){
rects.push(surface.createRect({
x: w, y: HEIGHT, width: BAR_WIDTH, height: 1
}).setFill(BAR_FILL).setStroke(BAR_STROKE));
}
// IE/VML doesn't allow height to be 0!
// prepare and enable controls
populateSelect("dojo.fx.easing", "easing");
dojo.attr("chain", "checked", false);
dojo.connect(dojo.byId("animate"), "onclick", animate);
enable(true);
};
function createSurface(){
var surface = dojox.gfx.createSurface(dojo.byId("surface"), 600, 400);
surface.whenLoaded(init);
};
dojo.addOnLoad(createSurface);
</script>
</head>
<body>
<p>
<button id="animate" disabled="disabled">Animate!</button>
<label>Easing: <select id="easing" disabled="disabled"></select></label>
<label><input id="chain" type="checkbox" disabled="disabled"> Chain (otherwise Combine)</label>
</p>
<div id="surface" style="width: 600px; height: 400px; border:1px solid #000;"></div>
</body>
</html>