You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
5.0 KiB
113 lines
5.0 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|