124 lines
5.5 KiB
HTML
124 lines
5.5 KiB
HTML
<!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>-->
|
|
<!-- SVGWEB { -->
|
|
<meta name="svg.render.forceflash" content="true"/>
|
|
<script src="svgweb/src/svg.js" data-path="svgweb/src"></script>
|
|
<script src="../../../../dojo/dojo.js" djConfig="isDebug:true,forceGfxRenderer:'svg'" type="text/javascript"></script>
|
|
<!-- } -->
|
|
<script type="text/javascript" charset="utf-8">
|
|
dojo.require("dojox.gfx");
|
|
dojo.require("dojo.fx");
|
|
dojo.require("dojo.fx.easing");
|
|
dojo.require("dojox.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 surface, 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(){
|
|
// create surface
|
|
surface = dojox.gfx.createSurface(dojo.byId("surface"), 600, 400);
|
|
|
|
/* SVGWEB { */
|
|
surface.whenLoaded(function() {
|
|
// 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");
|
|
if(dojox.fx.easing !== dojo.fx.easing){
|
|
populateSelect("dojox.fx.easing", "easing");
|
|
}
|
|
dojo.attr("chain", "checked", false);
|
|
dojo.connect(dojo.byId("animate"), "onclick", animate);
|
|
enable(true);
|
|
});
|
|
/* } */
|
|
};
|
|
|
|
dojo.addOnLoad(init);
|
|
</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>
|