diff options
author | Scott González <scott.gonzalez@gmail.com> | 2012-02-11 12:20:46 -0500 |
---|---|---|
committer | Scott González <scott.gonzalez@gmail.com> | 2012-08-13 05:45:36 -0400 |
commit | c7223b952d662cd2f0f0886705ffcd1931620fe2 (patch) | |
tree | 072064ef5810ac8af3dddad25ff8c6f20a2de4a9 /demos | |
parent | 5e935ead9fbfb0ab368a9828a4d4b8d17eb38d5c (diff) | |
download | jquery-ui-c7223b952d662cd2f0f0886705ffcd1931620fe2.tar.gz jquery-ui-c7223b952d662cd2f0f0886705ffcd1931620fe2.zip |
Easings: Rewrote all easings to only rely on state and reduce code size. Fixes #8115 - Easings: Simplify equations to only rely on state.
(cherry picked from commit c0093b599fcd58b6ad122ab425c4cc1a4da4a520)
Conflicts:
ui/jquery.effects.core.js
Diffstat (limited to 'demos')
-rw-r--r-- | demos/effect/easing.html | 35 |
1 files changed, 18 insertions, 17 deletions
diff --git a/demos/effect/easing.html b/demos/effect/easing.html index c97535c0b..610e30208 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 ) |