SOURCE CODE: Curve Explorer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Curve Explorer | JavaScript Tools | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="animation featured tool Uize.Curve"/>
<meta name="description" content="Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!"/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.tabs.css"/>
<link rel="stylesheet" href="../examples/css/selector-links.css"/>
<link rel="stylesheet" href="../examples/css/params-table.css"/>
<link rel="stylesheet" href="../examples/css/params-inspector.css"/>
<style type="text/css">
.main {
padding-bottom: 4px;
}
#page-paramsInspector .tabShell {
width: 480px;
}
#page_paramsInspector_curve {
width: 400px;
height: 251px;
font-size: 12px;
}
#page_paramsInspector_preview {
width: 466px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Curve Explorer
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/curve-explorer.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>The <b>Curve Explorer</b> tool (which makes use of the <a href="../reference/Uize.Curve.html"><code>Uize.Curve</code></a>, <a href="../reference/Uize.Curve.Rubber.html"><code>Uize.Curve.Rubber</code></a>, and <a href="../reference/Uize.Curve.Mod.html"><code>Uize.Curve.Mod</code></a> modules, among others) provides a UI for visualizing and experimenting with curve functions. Select a curve in the <b>"PRESETS"</b> tab. The preview on the left will update, and the silver sphere will animate, using your curve to control its motion. The curve graph includes a color fade in which <code>0</code> is dark blue and <code>1</code> is light blue. To tweak the curve expression for a preset, use the <b>"PARAMS"</b> tab. Play around with the parameters in a curve expression - if present - to see how they affect the curve, or add more complexity by using the curve modifiers defined in the <code>Uize.Curve.Mod</code> package. Use the <b>"PREVIEW CURVE"</b> button to preview the changes you make. For some more complex presets, scroll to the bottom of the <b>"PRESETS"</b> tab.</p>
</div>
<!-- page layout's "wireframe" with slots for curve preview and params inspector -->
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div style="position:relative; width:200px; height:350px; border:1px solid #555;">
<div id="page-curveGradient" style="position:absolute; width:200px; height:350px; left:0; bottom:0;"></div>
<div style="position:absolute; width:200px; height:200px; left:0; top:65px; border-top:1px dotted #888; border-bottom:1px dotted #888; background:#000; opacity:.5; filter:alpha(opacity=50);"></div>
<div id="page-curveGraph" style="position:absolute; width:200px; height:200px; left:0; top:66px;"></div>
<img id="page-sphere" src="images/silver-sphere.png" style="position:absolute; width:25px; height:25px; left:-28px; bottom:59px;" alt=""/>
</div>
</td>
<td id="page-paramsInspector"></td>
</tr>
</table>
</div>
<!-- JavaScript code to make the static HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.ParamsInspector',
'Uize.Fade',
'Uize.Curve',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Curve.Examples',
'Uize.Fx',
'Uize.Color',
'Uize.Color.xUtil',
'Uize.Dom.Basics',
'Uize.Dom.Pos'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** configurable values ***/
var
totalSegments = 200,
gradientStartColor = Uize.Color ('hsl(0,0,20)'),
gradientEndColor = Uize.Color ('hsl(0,0,80)')
;
/*** generate preview UI HTML ***/
function buildSegmentsHtml (rootNodeName,segmentHtmlTemplate) {
var
htmlChunks = [],
rootNode = page.getNode (rootNodeName),
rootNodeWidth = Uize.Dom.Pos.getDimensions (rootNode).width,
segmentWidth = rootNodeWidth / totalSegments,
currentPos = 0,
newPos
;
for (var segmentNo = -1; ++segmentNo < totalSegments;) {
newPos = Math.round (segmentWidth * (segmentNo + 1));
htmlChunks.push (segmentHtmlTemplate.replace ('LEFT',currentPos).replace ('WIDTH',newPos - currentPos));
currentPos = newPos;
}
page.setNodeInnerHtml (rootNode,htmlChunks.join (''));
return Uize.Dom.Basics.find ({root:rootNode,tagName:'div'})
}
var
gradientNodes = buildSegmentsHtml (
'curveGradient',
'<div style="position:absolute; left:LEFTpx; width:WIDTHpx; height:100%;"></div>'
),
graphNodes = buildSegmentsHtml (
'curveGraph',
'<div style="position:absolute; left:LEFTpx; width:1px; height:1px; background:#ffa200; border-top:solid 1px #ff0;"></div>'
)
;
/*** create the params inspector widget ***/
var lastPreviewedCurve;
page.addChild (
'paramsInspector',
UizeSite.ParamsInspector,
{
params:{curve:'string-multiline',duration:'integer'},
previewButtonText:'PREVIEW CURVE',
presets:Uize.Curve.Examples ()
}
).wire (
'Preset Selected',
function () {
var
values = page.children.paramsInspector.getValues (),
curve = values.curve,
curveFunction = Uize.eval (curve),
curveIsCurrent = curve == lastPreviewedCurve
;
if (!curveIsCurrent) {
lastPreviewedCurve = curve;
var
graphRootNodeHeight = Uize.Dom.Pos.getDimensions (page.getNode ('curveGraph')).height - 3,
previousCurveValue
;
for (var segmentNo = -1; ++segmentNo < totalSegments;) {
var curveValue = curveFunction (segmentNo / totalSegments);
gradientNodes [segmentNo].style.background =
Uize.Color.blend (gradientStartColor,gradientEndColor,curveValue,'#hex')
;
if (previousCurveValue == null) previousCurveValue = curveValue;
Uize.Dom.Basics.setStyle (
graphNodes [segmentNo],
{
bottom:Math.min (curveValue,previousCurveValue) * graphRootNodeHeight,
height:Math.max (Math.abs (curveValue - previousCurveValue) * graphRootNodeHeight,1)
}
);
previousCurveValue = curveValue;
}
}
page.setNodeStyle ('sphere',{bottom:59});
setTimeout (
function () {
Uize.Fx.fadeStyle (
page.getNode ('sphere'),
{bottom:59},
{bottom:259},
+values.duration,
{curve:curveFunction}
);
},
curveIsCurrent ? 200 : 500
);
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
);
</script>
</body>
</html>