Skip to content

Commit c0093b5

Browse files
scottgonzalezscottgonzalez
committed
Easings: Rewrote all easings to only rely on state and reduce code size. Fixes #8115 - Easings: Simplify equations to only rely on state.
1 parent 530d4cb commit c0093b5

File tree

2 files changed

+53
-232
lines changed

2 files changed

+53
-232
lines changed

‎demos/effect/easing.html

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,31 @@
1515
</style>
1616
<script>
1717
$(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."
2221
).appendTo( "#graphs" );
2322
return;
2423
}
2524

2625
var i = 0,
2726
width = 100,
2827
height = 100;
28+
2929
$.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+
3835
canvas.width = width;
3936
canvas.height = height;
4037
var drawHeight = height * 0.8,
4138
cradius = 10;
4239
ctx = canvas.getContext( "2d" );
4340
ctx.fillStyle = "black";
4441

42+
// draw background
4543
ctx.beginPath();
4644
ctx.moveTo( cradius, 0 );
4745
ctx.quadraticCurveTo( 0, 0, 0, cradius );
@@ -53,31 +51,34 @@
5351
ctx.lineTo( cradius, 0 );
5452
ctx.fill();
5553

54+
// draw bottom line
5655
ctx.strokeStyle = "#555";
5756
ctx.beginPath();
5857
ctx.moveTo( width * 0.1, drawHeight + .5 );
5958
ctx.lineTo( width * 0.9, drawHeight + .5 );
6059
ctx.stroke();
6160

61+
// draw top line
6262
ctx.strokeStyle = "#555";
6363
ctx.beginPath();
6464
ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
6565
ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
6666
ctx.stroke();
67-
67+
68+
// plot easing
6869
ctx.strokeStyle = "white";
6970
ctx.beginPath();
7071
ctx.lineWidth = 2;
7172
ctx.moveTo( width * 0.1, drawHeight );
7273
$.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 );
7776
ctx.lineTo( position * 0.8 + width * 0.1,
7877
drawHeight - drawHeight * val * 0.7 );
7978
});
8079
ctx.stroke();
80+
81+
// animate on click
8182
graph.click(function() {
8283
wrap
8384
.animate( { height: "hide" }, 2000, name )

‎ui/jquery.effects.core.js

Lines changed: 35 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -662,229 +662,49 @@ $.fn.extend({
662662
/*********************************** EASING ***********************************/
663663
/******************************************************************************/
664664

665-
/*
666-
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
667-
*
668-
* Uses the built in easing capabilities added In jQuery 1.1
669-
* to offer multiple easing options
670-
*
671-
* TERMS OF USE - jQuery Easing
672-
*
673-
* Open source under the BSD License.
674-
*
675-
* Copyright 2008 George McGinley Smith
676-
* All rights reserved.
677-
*
678-
* Redistribution and use in source and binary forms, with or without modification,
679-
* are permitted provided that the following conditions are met:
680-
*
681-
* Redistributions of source code must retain the above copyright notice, this list of
682-
* conditions and the following disclaimer.
683-
* Redistributions in binary form must reproduce the above copyright notice, this list
684-
* of conditions and the following disclaimer in the documentation and/or other materials
685-
* provided with the distribution.
686-
*
687-
* Neither the name of the author nor the names of contributors may be used to endorse
688-
* or promote products derived from this software without specific prior written permission.
689-
*
690-
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
691-
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
692-
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
693-
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
694-
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
695-
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
696-
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
697-
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
698-
* OF THE POSSIBILITY OF SUCH DAMAGE.
699-
*
700-
*/
665+
// based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
701666

702-
// t: current time, b: begInnIng value, c: change In value, d: duration
703-
$.easing.jswing = $.easing.swing;
667+
var baseEasings = {};
704668

705-
$.extend( $.easing, {
706-
def: "easeOutQuad",
707-
swing: function ( x, t, b, c, d ) {
708-
return $.easing[ $.easing.def ]( x, t, b, c, d );
709-
},
710-
easeInQuad: function ( x, t, b, c, d ) {
711-
return c * ( t /= d ) * t + b;
712-
},
713-
easeOutQuad: function ( x, t, b, c, d ) {
714-
return -c * ( t /= d ) * ( t - 2 ) + b;
715-
},
716-
easeInOutQuad: function ( x, t, b, c, d ) {
717-
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t + b;
718-
return -c / 2 * ( ( --t ) * ( t-2 ) - 1) + b;
719-
},
720-
easeInCubic: function ( x, t, b, c, d ) {
721-
return c * ( t /= d ) * t * t + b;
722-
},
723-
easeOutCubic: function ( x, t, b, c, d ) {
724-
return c * ( ( t = t / d - 1 ) * t * t + 1 ) + b;
725-
},
726-
easeInOutCubic: function ( x, t, b, c, d ) {
727-
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t * t + b;
728-
return c / 2 * ( ( t -= 2 ) * t * t + 2) + b;
729-
},
730-
easeInQuart: function ( x, t, b, c, d ) {
731-
return c * ( t /= d ) * t * t * t + b;
732-
},
733-
easeOutQuart: function ( x, t, b, c, d ) {
734-
return -c * ( ( t = t / d - 1 ) * t * t * t - 1) + b;
735-
},
736-
easeInOutQuart: function ( x, t, b, c, d ) {
737-
if ( (t /= d / 2 ) < 1 ) return c / 2 * t * t * t * t + b;
738-
return -c / 2 * ( ( t -= 2 ) * t * t * t - 2) + b;
739-
},
740-
easeInQuint: function ( x, t, b, c, d ) {
741-
return c * ( t /= d ) * t * t * t * t + b;
742-
},
743-
easeOutQuint: function ( x, t, b, c, d ) {
744-
return c * ( ( t = t / d - 1 ) * t * t * t * t + 1) + b;
745-
},
746-
easeInOutQuint: function ( x, t, b, c, d ) {
747-
if ( ( t /= d / 2 ) < 1 ) return c / 2 * t * t * t * t * t + b;
748-
return c / 2 * ( ( t -= 2 ) * t * t * t * t + 2) + b;
749-
},
750-
easeInSine: function ( x, t, b, c, d ) {
751-
return -c * Math.cos( t / d * ( Math.PI / 2 ) ) + c + b;
752-
},
753-
easeOutSine: function ( x, t, b, c, d ) {
754-
return c * Math.sin( t / d * ( Math.PI /2 ) ) + b;
755-
},
756-
easeInOutSine: function ( x, t, b, c, d ) {
757-
return -c / 2 * ( Math.cos( Math.PI * t / d ) - 1 ) + b;
758-
},
759-
easeInExpo: function ( x, t, b, c, d ) {
760-
return ( t==0 ) ? b : c * Math.pow( 2, 10 * ( t / d - 1) ) + b;
761-
},
762-
easeOutExpo: function ( x, t, b, c, d ) {
763-
return ( t==d ) ? b + c : c * ( -Math.pow( 2, -10 * t / d) + 1) + b;
764-
},
765-
easeInOutExpo: function ( x, t, b, c, d ) {
766-
if ( t==0 ) return b;
767-
if ( t==d ) return b + c;
768-
if ( ( t /= d / 2) < 1) return c / 2 * Math.pow( 2, 10 * (t - 1) ) + b;
769-
return c / 2 * ( -Math.pow( 2, -10 * --t ) + 2 ) + b;
770-
},
771-
easeInCirc: function ( x, t, b, c, d ) {
772-
return -c * ( Math.sqrt( 1 - ( t /= d ) * t ) - 1 ) + b;
773-
},
774-
easeOutCirc: function ( x, t, b, c, d ) {
775-
return c * Math.sqrt( 1 - ( t = t / d - 1 ) * t ) + b;
776-
},
777-
easeInOutCirc: function ( x, t, b, c, d ) {
778-
if ( ( t /= d / 2) < 1 ) return -c / 2 * ( Math.sqrt( 1 - t * t ) - 1 ) + b;
779-
return c / 2 * ( Math.sqrt( 1 - ( t -= 2 ) * t ) + 1 ) + b;
780-
},
781-
easeInElastic: function ( x, t, b, c, d ) {
782-
var s = 1.70158,
783-
p = d * 0.3,
784-
a = c;
785-
if ( t == 0 ) return b;
786-
if ( ( t /= d ) == 1 ) return b+c;
787-
if ( a < Math.abs( c ) ) {
788-
a = c;
789-
s = p / 4;
790-
} else {
791-
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
792-
}
793-
return - ( a * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t * d - s) * ( 2 * Math.PI ) / p ) ) + b;
794-
},
795-
easeOutElastic: function ( x, t, b, c, d ) {
796-
var s = 1.70158,
797-
p = d * 0.3,
798-
a = c;
799-
if ( t == 0 ) return b;
800-
if ( ( t /= d ) == 1 ) return b+c;
801-
if ( a < Math.abs( c ) ) {
802-
a = c;
803-
s = p / 4;
804-
} else {
805-
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
806-
}
807-
return a * Math.pow( 2, -10 * t ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) + c + b;
808-
},
809-
easeInOutElastic: function ( x, t, b, c, d ) {
810-
var s = 1.70158,
811-
p = d * ( 0.3 * 1.5 ),
812-
a = c;
813-
if ( t == 0 ) return b;
814-
if ( ( t /= d / 2 ) == 2 ) return b+c;
815-
if ( a < Math.abs( c ) ) {
816-
a = c;
817-
s = p / 4;
818-
} else {
819-
s = p / ( 2 * Math.PI ) * Math.asin( c / a );
820-
}
821-
if ( t < 1 ) return -.5 * ( a * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) ) + b;
822-
return a * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t * d - s ) * ( 2 * Math.PI ) / p ) *.5 + c + b;
823-
},
824-
easeInBack: function ( x, t, b, c, d, s ) {
825-
if ( s == undefined ) s = 1.70158;
826-
return c * ( t /= d ) * t * ( ( s+1 ) * t - s ) + b;
827-
},
828-
easeOutBack: function ( x, t, b, c, d, s ) {
829-
if ( s == undefined ) s = 1.70158;
830-
return c * ( ( t = t / d - 1 ) * t * ( ( s + 1 ) * t + s) + 1) + b;
669+
$.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
670+
baseEasings[ name ] = function( p ) {
671+
return Math.pow( p, i + 2 );
672+
};
673+
});
674+
675+
$.extend( baseEasings, {
676+
Sine: function ( p ) {
677+
return 1 - Math.cos( p * Math.PI / 2 );
831678
},
832-
easeInOutBack: function ( x, t, b, c, d, s ) {
833-
if ( s == undefined ) s = 1.70158;
834-
if ( ( t /= d / 2 ) < 1 ) return c / 2 * ( t * t * ( ( ( s *= 1.525 ) + 1 ) * t - s ) ) + b;
835-
return c / 2 * ( ( t -= 2 ) * t * ( ( ( s *= 1.525 ) + 1 ) * t + s) + 2) + b;
679+
Circ: function ( p ) {
680+
return 1 - Math.sqrt( 1 - p * p );
836681
},
837-
easeInBounce: function ( x, t, b, c, d ) {
838-
return c - $.easing.easeOutBounce( x, d - t, 0, c, d ) + b;
682+
Elastic: function( p ) {
683+
return p === 0 || p === 1 ? p :
684+
-Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 );
839685
},
840-
easeOutBounce: function ( x, t, b, c, d ) {
841-
if ( ( t /= d ) < ( 1 / 2.75 ) ) {
842-
return c * ( 7.5625 * t * t ) + b;
843-
} else if ( t < ( 2 / 2.75 ) ) {
844-
return c * ( 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + .75 ) + b;
845-
} else if ( t < ( 2.5 / 2.75 ) ) {
846-
return c * ( 7.5625 * ( t -= ( 2.25/ 2.75 ) ) * t + .9375 ) + b;
847-
} else {
848-
return c * ( 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + .984375 ) + b;
849-
}
686+
Back: function( p ) {
687+
return p * p * ( 3 * p - 2 );
850688
},
851-
easeInOutBounce: function ( x, t, b, c, d ) {
852-
if ( t < d / 2 ) return $.easing.easeInBounce( x, t * 2, 0, c, d ) * .5 + b;
853-
return $.easing.easeOutBounce( x, t * 2 - d, 0, c, d ) * .5 + c * .5 + b;
689+
Bounce: function ( p ) {
690+
var pow2,
691+
bounce = 4;
692+
693+
while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
694+
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
854695
}
855696
});
856697

857-
/*
858-
*
859-
* TERMS OF USE - EASING EQUATIONS
860-
*
861-
* Open source under the BSD License.
862-
*
863-
* Copyright 2001 Robert Penner
864-
* All rights reserved.
865-
*
866-
* Redistribution and use in source and binary forms, with or without modification,
867-
* are permitted provided that the following conditions are met:
868-
*
869-
* Redistributions of source code must retain the above copyright notice, this list of
870-
* conditions and the following disclaimer.
871-
* Redistributions in binary form must reproduce the above copyright notice, this list
872-
* of conditions and the following disclaimer in the documentation and/or other materials
873-
* provided with the distribution.
874-
*
875-
* Neither the name of the author nor the names of contributors may be used to endorse
876-
* or promote products derived from this software without specific prior written permission.
877-
*
878-
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
879-
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
880-
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
881-
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
882-
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
883-
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
884-
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
885-
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
886-
* OF THE POSSIBILITY OF SUCH DAMAGE.
887-
*
888-
*/
698+
$.each( baseEasings, function( name, easeIn ) {
699+
$.easing[ "easeIn" + name ] = easeIn;
700+
$.easing[ "easeOut" + name ] = function( p ) {
701+
return 1 - easeIn( 1 - p );
702+
};
703+
$.easing[ "easeInOut" + name ] = function( p ) {
704+
return p < .5 ?
705+
easeIn( p * 2 ) / 2 :
706+
easeIn( p * -2 + 2 ) / -2 + 1;
707+
};
708+
});
889709

890710
})(jQuery);

0 commit comments

Comments
 (0)