From a24b17a8747e01eeac5dc255eca92684ac59b408 Mon Sep 17 00:00:00 2001
From: Jörn Zaefferer <joern.zaefferer@gmail.com>
Date: Thu, 23 Apr 2009 22:11:02 +0000
Subject: effects: demo visualising easing functions, tuning

---
 demos/effect/easing.html | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index 72f535f67..189c3d667 100644
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -21,13 +21,9 @@
 	<style type="text/css">
 		.graph {
 			float: left;
-			margin-left: 5px;
+			margin-left: 10px;
 			width: 100px;
-			height: 120px;
-		}
-		.graph canvas {
-			border: 1px solid black;
-			border-top: none; border-right: none;
+			height: 160px;
 		}
 	</style>
 	<script type="text/javascript">
@@ -46,21 +42,26 @@
 			
 			var canvas = $("<canvas/>").appendTo(graph)[0]
 			canvas.width = 100;
-			canvas.height = 100;
+			canvas.height = 135;
 			var ctx = canvas.getContext("2d");
-			ctx.fillStyle = "rgb(255, 232, 198)";
-			ctx.fillRect(0, 0, 100, 100);
-			ctx.lineWidth = 1;
-			$.each(new Array(10), function(index) {
-				ctx.beginPath();
-				ctx.moveTo(0, index * 10 + 10.5);
-				ctx.lineTo(4, index * 10 + 10.5);
-				ctx.moveTo(index * 10 + 10.5, 96);
-				ctx.lineTo(index * 10 + 10.5, 100);
-				ctx.stroke();
-			});
+			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.fill();
+			
+			ctx.strokeStyle = "white";
+			ctx.beginPath();
+			ctx.moveTo(0, 100.5);
+			ctx.lineTo(100, 100.5);
+			ctx.stroke();
 			
-			// needs higher precision for better graphs
 			var mod = 2;
 			ctx.beginPath();
 			$.each(new Array(100 * mod), function(position) {
@@ -70,7 +71,7 @@
 			});
 			ctx.stroke();
 			graph.click(function() {
-				$(canvas).animate({height: "hide"}, "slow", name).animate({height: "show"}, "slow", name);
+				$(canvas).animate({height: "hide"}, "slow", name).animate({"left": "0"}, 800).animate({height: "show"}, "slow", name);
 			});
 			//return false;
 		});
@@ -95,3 +96,4 @@
 
 </body>
 </html>
+
-- 
cgit v1.2.3