r2484 - effects: demo visualising easing functions, tuning

r2484 - effects: demo visualising easing functions, tuning


Author: joern.zaefferer
Date: Thu Apr 23 14:03:48 2009
New Revision: 2484
Modified:
trunk/demos/effect/easing.html
Log:
effects: demo visualising easing functions, tuning
Modified: trunk/demos/effect/easing.html
==============================================================================
--- trunk/demos/effect/easing.html    (original)
+++ trunk/demos/effect/easing.html    Thu Apr 23 14:03:48 2009
@@ -38,10 +38,12 @@
        }
        var i = 0;
        $.each($.easing, function(name, impl) {
-            if (!$.isFunction(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 canvas = $("<canvas/>").appendTo(graph)[0]
            canvas.width = 100;
            canvas.height = 100;
@@ -56,7 +58,9 @@
                ctx.moveTo(index * 10 + 10.5, 96);
                ctx.lineTo(index * 10 + 10.5, 100);
                ctx.stroke();
-            })
+            });
+            
+            // needs higher precision for better graphs
            $.each(new Array(100), function(position) {
                var mod = impl(0, position, 0, 1, 100);
                ctx.beginPath();
@@ -84,7 +88,7 @@
<div class="demo-description">
-

All easings provided by jQuery UI are drawn above. Click a diagram to
see the easing in action. "linear" and "jswing" aren't rendered properly,
but work, too.


+

All easings provided by jQuery UI are drawn above. Click a diagram to
see the easing in action.


</div><!-- End demo-description -->