Easings: Rewrote all easings to only rely on state and reduce code size. Fixes #8115 - Easings: Simplify equations to only rely on state.

1 files changed, 18 insertions, 17 deletions

diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index e3270c070..f3e07a9c5 100644
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -15,10 +15,9 @@
 	</style>
 	<script>
 	$(function() {
-		if ( !$( "<canvas/>" )[0].getContext ) {
-			$( "<div/>" ).text(
-				"Your browser doesn't support canvas, which is required for this demo. " +
-				"Give Firefox 3 a try!"
+		if ( !$( "<canvas>" )[0].getContext ) {
+			$( "<div>" ).text(
+				"Your browser doesn't support canvas, which is required for this demo."
 			).appendTo( "#graphs" );
 			return;
 		}
@@ -26,15 +25,13 @@
 		var i = 0,
 			width = 100,
 			height = 100;
+
 		$.each( $.easing, function( name, impl ) {
-			// skip linear/jswing and any non functioning implementation
-			if ( !$.isFunction( impl ) || /jswing/.test( name ) ) {
-				return;
-			}
-			var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ),
-				text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ),
-				wrap = $( "<div/>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
-				canvas = $( "<canvas/>" ).appendTo( wrap )[ 0 ];
+			var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
+				text = $( "<div>" ).text( ++i + ". " + 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,
@@ -42,6 +39,7 @@
 				ctx = canvas.getContext( "2d" );
 			ctx.fillStyle = "black";
 
+			// draw background
 			ctx.beginPath();
 			ctx.moveTo( cradius, 0 );
 			ctx.quadraticCurveTo( 0, 0, 0, cradius );
@@ -53,31 +51,34 @@
 			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 val = impl( 0, position, 0, 1, height );
-				if ( /linear|jswing/.test( name ) ) {
-					val = position / width;
-				}
+				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 )