|
15 | 15 | </style> |
16 | 16 | <script> |
17 | 17 | $(function() { |
18 | | - if ( !$( "<canvas/>" )[0].getContext ) { |
19 | | - $( "<div/>" ).text( |
20 | | - "Your browser doesn't support canvas, which is required for this demo. " + |
21 | | - "Give Firefox 3 a try!" |
| 18 | + if ( !$( "<canvas>" )[0].getContext ) { |
| 19 | + $( "<div>" ).text( |
| 20 | + "Your browser doesn't support canvas, which is required for this demo." |
22 | 21 | ).appendTo( "#graphs" ); |
23 | 22 | return; |
24 | 23 | } |
25 | 24 |
|
26 | 25 | var i = 0, |
27 | 26 | width = 100, |
28 | 27 | height = 100; |
| 28 | + |
29 | 29 | $.each( $.easing, function( name, impl ) { |
30 | | - // skip linear/jswing and any non functioning implementation |
31 | | - if ( !$.isFunction( impl ) || /jswing/.test( name ) ) { |
32 | | - return; |
33 | | - } |
34 | | - var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ), |
35 | | - text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ), |
36 | | - wrap = $( "<div/>" ).appendTo( graph ).css( 'overflow', 'hidden' ), |
37 | | - canvas = $( "<canvas/>" ).appendTo( wrap )[ 0 ]; |
| 30 | + var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), |
| 31 | + text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), |
| 32 | + wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), |
| 33 | + canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; |
| 34 | + |
38 | 35 | canvas.width = width; |
39 | 36 | canvas.height = height; |
40 | 37 | var drawHeight = height * 0.8, |
41 | 38 | cradius = 10; |
42 | 39 | ctx = canvas.getContext( "2d" ); |
43 | 40 | ctx.fillStyle = "black"; |
44 | 41 |
|
| 42 | + // draw background |
45 | 43 | ctx.beginPath(); |
46 | 44 | ctx.moveTo( cradius, 0 ); |
47 | 45 | ctx.quadraticCurveTo( 0, 0, 0, cradius ); |
|
53 | 51 | ctx.lineTo( cradius, 0 ); |
54 | 52 | ctx.fill(); |
55 | 53 |
|
| 54 | + // draw bottom line |
56 | 55 | ctx.strokeStyle = "#555"; |
57 | 56 | ctx.beginPath(); |
58 | 57 | ctx.moveTo( width * 0.1, drawHeight + .5 ); |
59 | 58 | ctx.lineTo( width * 0.9, drawHeight + .5 ); |
60 | 59 | ctx.stroke(); |
61 | 60 |
|
| 61 | + // draw top line |
62 | 62 | ctx.strokeStyle = "#555"; |
63 | 63 | ctx.beginPath(); |
64 | 64 | ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); |
65 | 65 | ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); |
66 | 66 | ctx.stroke(); |
67 | | - |
| 67 | + |
| 68 | + // plot easing |
68 | 69 | ctx.strokeStyle = "white"; |
69 | 70 | ctx.beginPath(); |
70 | 71 | ctx.lineWidth = 2; |
71 | 72 | ctx.moveTo( width * 0.1, drawHeight ); |
72 | 73 | $.each( new Array( width ), function( position ) { |
73 | | - var val = impl( 0, position, 0, 1, height ); |
74 | | - if ( /linear|jswing/.test( name ) ) { |
75 | | - val = position / width; |
76 | | - } |
| 74 | + var state = position / width, |
| 75 | + val = impl( state, position, 0, 1, width ); |
77 | 76 | ctx.lineTo( position * 0.8 + width * 0.1, |
78 | 77 | drawHeight - drawHeight * val * 0.7 ); |
79 | 78 | }); |
80 | 79 | ctx.stroke(); |
| 80 | + |
| 81 | + // animate on click |
81 | 82 | graph.click(function() { |
82 | 83 | wrap |
83 | 84 | .animate( { height: "hide" }, 2000, name ) |
|
0 commit comments