From e12540706d93d04236c298e262b37be184ca7d61 Mon Sep 17 00:00:00 2001 From: Gilmore Davidson Date: Wed, 24 Nov 2010 21:26:37 +1100 Subject: [PATCH] Playing around with index a bit more --- demo.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 105 ++++++----------------------------------------------- 2 files changed, 104 insertions(+), 93 deletions(-) create mode 100644 demo.js diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..2c4f561 --- /dev/null +++ b/demo.js @@ -0,0 +1,92 @@ +(function($){ + var options = [], + $graph = $('#graph'), + canvas = $('').appendTo($graph)[0], + $container = $('#container'), + $move = $('#moving'), + contWidth = $container.width(); + +// if (window.G_vmlCanvasManager) { +// G_vmlCanvasManager.initElement(canvas); +// } + + var ctx = canvas.getContext('2d'); + + canvas.width = 600; + canvas.height = 500; + + $.each($.easing, function(name){ + if (name !== 'def' && typeof this === 'function') { + options.push( name ); + } + }); + + $('#easing').append(''); + $('#controls').submit(function () { + var easing = $('#easing').val(), + origRepeat = $('#repeat').val(), + repeat = parseInt(origRepeat, 10) || 1; + if (repeat < 1) { + repeat = 1; + } + doFancyStuff(easing, repeat); + if (repeat != origRepeat) { + $('#repeat').val(repeat); + } + return false; + }); + + function doFancyStuff(easing, repeat) { + // Clear canvas + ctx.fillStyle = 'rgba(0,0,0,0.8)'; + ctx.fillRect(0,0,600,500); + ctx.fillStyle = 'rgba(255,255,255,1)'; + + // Work out which easing function to use + var oldEasing = easing; + if (repeat > 1) { + easing += '' + repeat; + if (!(easing in $.easing)) { + $.createEasingRepeater(easing, oldEasing, repeat); + } + } + + // Draw graph + var steps = 1000, + maxX = 600, + maxY = 400, + minY = maxY - (canvas.height - maxY), + progress, e; + + // Original easing graph (if applicable) + if (easing != oldEasing) { + ctx.beginPath(); + ctx.moveTo(0, maxY); + for (progress = 0; progress < steps; progress++) { + e = $.easing[oldEasing]( progress/steps*1, progress, 0, steps, steps ); + ctx.lineTo( (progress / steps * maxX), maxY - (e / steps * minY) ); + } + ctx.strokeStyle = '#FFFFFF'; + ctx.stroke(); + } + + // New easing graph + ctx.beginPath(); + ctx.moveTo(0, maxY); + for (progress = 0; progress < steps; progress++) { + e = $.easing[easing]( progress/steps*1, progress, 0, steps, steps ); + ctx.lineTo( (progress / steps * maxX), maxY - (e / steps * minY) ); + } + ctx.strokeStyle = '#FFFF00'; + ctx.stroke(); + + // Run demo animation + var animProps = {}; + // Start off with just left val, in future support width/height and opacity + animProps.left = parseInt($move.css('left'), 10) ? 0 : contWidth - $move.width(); + $move.animate(animProps, 2000, easing); + + + // TODO - output example code for easing repeater creation + } +})(jQuery); diff --git a/index.html b/index.html index 03125a3..5e3affc 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,14 @@ jQuery Easing Repeater plugin @@ -16,104 +19,20 @@
-
- -
- - + +
+
+
-
+ + +
- +