Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

109 lines (96 sloc) 2.746 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Easing Equations</title>
<link rel="stylesheet" href="/resources/jquery-ui.css">
<script src="/resources/jquery.js"></script>
<script src="/resources/jquery-ui.js"></script>
<style>
.graph {
float: left;
margin-left: 10px;
font-size: 16px;
}
.description {
clear: both;
}
</style>
<script>
$(function() {
if ( !$( "<canvas>" )[0].getContext ) {
$( "<div>" ).text(
"Your browser doesn't support canvas, " +
"which is required to render the easing graphs."
).appendTo( "#graphs" );
return;
}
var i = 0,
width = 125,
height = 125;
$.each( $.easing, function( name, impl ) {
var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
text = $( "<div>" ).text( name ).appendTo( graph ),
wrap = $( "<div>" ).appendTo( graph ).css( "overflow", "hidden" ),
canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
canvas.width = width;
canvas.height = height;
var drawHeight = height * 0.8,
cradius = 10;
ctx = canvas.getContext( "2d" );
ctx.fillStyle = "black";
// draw background
ctx.beginPath();
ctx.moveTo( cradius, 0 );
ctx.quadraticCurveTo( 0, 0, 0, cradius );
ctx.lineTo( 0, height - cradius );
ctx.quadraticCurveTo( 0, height, cradius, height );
ctx.lineTo( width - cradius, height );
ctx.quadraticCurveTo( width, height, width, height - cradius );
ctx.lineTo( width, 0 );
ctx.lineTo( cradius, 0 );
ctx.fill();
// draw bottom line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight + .5 );
ctx.lineTo( width * 0.9, drawHeight + .5 );
ctx.stroke();
// draw top line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
ctx.stroke();
// plot easing
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo( width * 0.1, drawHeight );
$.each( new Array( width ), function( position ) {
var state = position / width,
val = impl( state, position, 0, 1, width );
ctx.lineTo( position * 0.8 + width * 0.1,
drawHeight - drawHeight * val * 0.7 );
});
ctx.stroke();
// animate on click
graph.click(function() {
wrap
.animate( { height: "hide" }, 2000, name )
.delay( 800 )
.animate( { height: "show" }, 2000, name );
});
graph.width( width ).height( height + text.height() + 10 );
});
});
</script>
</head>
<body>
<div id="graphs"></div>
<p class="description">
<strong>All easings provided by jQuery UI are drawn above.</strong>
Click a diagram to see the easing in action.
</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.