From: Jörn Zaefferer <joern.zaefferer@gmail.com>
Date: Thu, 23 Apr 2009 22:47:42 +0000 (+0000)
Subject: effects: demo visualising easing functions, tuning
X-Git-Tag: 1.8a1~122
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=fae081ed259121c89dea56d13ee58633c08cb46d;p=jquery-ui.git

effects: demo visualising easing functions, tuning
---

diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index 8fa0ed88f..3e6673bb7 100644
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -10,8 +10,6 @@
 		.graph {
 			float: left;
 			margin-left: 10px;
-			width: 100px;
-			height: 120px;
 		}
 	</style>
 	<script type="text/javascript">
@@ -21,46 +19,52 @@
 			return;
 		}
 		var i = 0;
+		var width = 100,
+			height = 100;
 		$.each($.easing, function(name, impl) {
 			// skip linera/jswing and any non functioning implementation
 			if (!$.isFunction(impl) || /linear|jswing/.test(name))
 				return;
 			var graph = $("<div/>").addClass("graph").appendTo("#graphs");
-			$("<div/>").text(++i + ". " + name).appendTo(graph);
+			var text = $("<div/>").text(++i + ". " + name).appendTo(graph);
 			
-			var canvas = $("<canvas/>").width(100).height(100).appendTo(graph)[0]
-			canvas.width = 100;
-			canvas.height = 135;
+			var canvas = $("<canvas/>").appendTo(graph)[0]
+			canvas.width = width;
+			canvas.height = height;
+			var drawHeight = height * 0.75;
+			var cradius = 10;
 			var ctx = canvas.getContext("2d");
 			ctx.fillStyle = "black";
 			
 			ctx.beginPath();
-			ctx.moveTo(10, 0);
-			ctx.quadraticCurveTo(0, 0, 0, 10);
-			ctx.lineTo(0, 125);
-			ctx.quadraticCurveTo(0, 135, 10, 135);
-			ctx.lineTo(90, 135);
-			ctx.quadraticCurveTo(100, 135, 100, 125);
-			ctx.lineTo(100, 0);
-			ctx.lineTo(10, 0);
+			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();
 			
 			ctx.strokeStyle = "#555";
 			ctx.beginPath();
-			ctx.moveTo(0, 100.5);
-			ctx.lineTo(100, 100.5);
+			ctx.moveTo(0, drawHeight + .5);
+			ctx.lineTo(width, drawHeight + .5);
 			ctx.stroke();
 			
 			ctx.strokeStyle = "white";
 			ctx.lineWidth = 2;
 			ctx.beginPath();
-			$.each(new Array(100), function(position) {
-				ctx.lineTo(position, 100 - position * impl(0, position, 0, 1, 100));
+			$.each(new Array(width), function(position) {
+				ctx.lineTo(position, drawHeight - position * impl(0, position, 0, 1, height) * 0.75);
 			});
 			ctx.stroke();
 			graph.click(function() {
 				$(canvas).animate({height: "hide"}, "slow", name).animate({"left": "0"}, 800).animate({height: "show"}, "slow", name);
 			});
+			
+			graph.width(width).height(height + text.height() + 10);
 			//return false;
 		});
 	});