148 lines
3.6 KiB
HTML
148 lines
3.6 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>visualising dojo._Animation.easing via dojox.charting</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen"
|
||
|
|
href="../../../dojo/resources/dojo.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen"
|
||
|
|
href="../../../dijit/themes/tundra/tundra.css">
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
.box { padding:14px;
|
||
|
|
border:1px solid #b7b7b7;
|
||
|
|
-moz-border-radius:8pt;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true"
|
||
|
|
src="../../../dojo/dojo.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// one simple theme, and the charting engine:
|
||
|
|
dojo.require("dojox.charting.Chart2D");
|
||
|
|
// and easing functions:
|
||
|
|
dojo.require("dojox.fx.easing");
|
||
|
|
|
||
|
|
var d=0;
|
||
|
|
var masterData = {};
|
||
|
|
var makeSeries = function(/* string */str, /* Function */ func){
|
||
|
|
// make some data by running a 2sec animation with an easing function
|
||
|
|
// and adding it to the chart
|
||
|
|
var seriesData = [];
|
||
|
|
if(str in masterData){
|
||
|
|
seriesData=masterData[str];
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!seriesData.length){
|
||
|
|
var func = func || dojox.fx.easing[str];
|
||
|
|
func = (dojo.isFunction(func) ? func : dojo._defaultEasing);
|
||
|
|
|
||
|
|
for(var i=0; i<=120; i++){
|
||
|
|
var pct = i/120;
|
||
|
|
seriesData.push({ y: 30 * func(pct), x: (pct) * 30});
|
||
|
|
}
|
||
|
|
if(!str.match(/^dynSeries/)){
|
||
|
|
masterData[str] = seriesData;
|
||
|
|
}
|
||
|
|
chart.addSeries(str,
|
||
|
|
seriesData,
|
||
|
|
{ stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" }
|
||
|
|
).render();
|
||
|
|
}else{
|
||
|
|
chart.updateSeries(str, seriesData).render();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var removeSeries = function(str){
|
||
|
|
chart.updateSeries(str, []);
|
||
|
|
if(!clearAll){ chart.render(); }
|
||
|
|
};
|
||
|
|
|
||
|
|
var toggleChart = function(widget, str){
|
||
|
|
if(!chart) return;
|
||
|
|
if(widget.checked){
|
||
|
|
makeSeries(str);
|
||
|
|
}else{
|
||
|
|
removeSeries(str);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chart;
|
||
|
|
var clearAll=false;
|
||
|
|
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
|
||
|
|
// setup our chart
|
||
|
|
chart = new dojox.charting.Chart2D("easingChart");
|
||
|
|
chart.addAxis("x", {
|
||
|
|
fixLower: "major",
|
||
|
|
fixUpper: "major",
|
||
|
|
majorTickStep: 10,
|
||
|
|
minorTickStep: 1,
|
||
|
|
minorLabels: false,
|
||
|
|
htmlLabels: false
|
||
|
|
});
|
||
|
|
chart.addAxis("y", {
|
||
|
|
vertical: true,
|
||
|
|
fixLower: "major",
|
||
|
|
fixUpper: "major",
|
||
|
|
majorTickStep: 10,
|
||
|
|
minorTickStep: 1,
|
||
|
|
htmlLabels: false
|
||
|
|
});
|
||
|
|
chart.addPlot("default", {type: "Areas"});
|
||
|
|
});
|
||
|
|
|
||
|
|
var opt;
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
|
||
|
|
var c = dojo.query(".clone")[0];
|
||
|
|
opt = dojo.byId("select");
|
||
|
|
|
||
|
|
for(var i in dojox.fx.easing){
|
||
|
|
var n = opt.appendChild(dojo.clone(c));
|
||
|
|
n.value = n.innerHTML = i
|
||
|
|
// n.innerHTML = i;
|
||
|
|
}
|
||
|
|
|
||
|
|
dojo.connect(opt,"onchange",function(e){
|
||
|
|
dojo.query("option",opt)
|
||
|
|
// we only want "selected" nodes
|
||
|
|
.filter(function(n){ return n.selected; })
|
||
|
|
// yay, here they are:
|
||
|
|
.forEach(function(n){
|
||
|
|
console.log(n);
|
||
|
|
});
|
||
|
|
makeSeries(opt.value,dojox.fx.easing[opt.value]);
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.query(".box").connect("onclick",function(e){
|
||
|
|
console.log(opt.value,dojox.fx.easing[opt.value]);
|
||
|
|
});
|
||
|
|
|
||
|
|
makeSeries("visible",dojo._defaultEasing);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="tundra" style="padding:20px">
|
||
|
|
|
||
|
|
<h1>dojox.fx.easing</h1>
|
||
|
|
|
||
|
|
<p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p>
|
||
|
|
|
||
|
|
<select id="select" multiple="true" size="7" name="easing">
|
||
|
|
<option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<div id="easingChart" style="height:300px"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|