JQuery Tween easing algorithm

Reference: Javascript tween algorithm and easing effect

Make a simple plugin, and then slowly refactor:

/** * Description: JavaScript easing * jQuery Tween algorithm: algorithm Source: http://www.robertpenner.com/easing/* @author: Xuzengqiang * @since: 2015-1- 23 11:17:51 * Two more complex not included in the * Elastic: exponential attenuation of the sinusoidal easing; * Back: three-square easing ((s+1) *t^3-s*t^2) over the range, **/;(function ($) {Jquery.extend ( {tweens:{linear:function (t,b,c,d) {//No easing return C*t/d+b;},quad: {//two-time-square easing (t^2) easein:function (t,b,c,d) {return c* (t/= d) *t + b;},easeout:function (t,b,c,d) {return-c * (t/=d) * (t-2) + b;},easeinout:function (t,b,c,d) {if ((T/=D/2) < 1) Retu  RN C/2*t*t + B;RETURN-C/2 * ((--T) * (t-2)-1) + B;}},cubic: {//three-time-square easing (t^3) easein:function (t,b,c,d) {return c* (t/=d) *t*t + B;},easeout:function (t,b,c,d) {return c* ((t=t/d-1) *t*t + 1) + b;},easeinout:function (t,b,c,d) {if ((T/=D/2) < 1) retur N c/2*t*t*t + b;return c/2* ((t-=2) *t*t + 2) + B;}},quart: {//four-square easing (t^4) easein:function (t,b,c,d) {return c* (t/=d) *t*t*t + B;},easeout:function (t,b,c,d) {return-c * ((t=t/d-1) *t*t*t-1) + b;},easeinout:function (t,b,c,d) {if ((T/=D/2) < 1) r Eturn c/2*t*t*t*t + B;RETURN-C/2* ((t-=2) *t*t*t-2) + B;}},quint: {//five-time-square easing (t^5) easein:function (t,b,c,d) {return c* (t/=d) *t*t*t*t + b;},easeout:function (t,b,c,d) {return c* ((t=t/d-1) *t*t*t*t + 1) + b;},easeinout:function (t,b,c,d) {if ((T/=D/2) < 1) return c/2*t*t*t*t*t + B;return  C/2* ((t-=2) *t*t*t*t + 2) + B;}},sine: {//Ease of sine curve (sin (t)) Easein:function (t,b,c,d) {return-c * Math.Cos (T/D * (MATH.PI/2)) + C + b;},easeout:function (t,b,c,d) {return c * Math.sin (T/D * (MATH.PI/2)) + b;},easeinout:function (t,b,c,d) {return-c/  2 * (Math.Cos (MATH.PI*T/D)-1) + B;}},expo: {//Ease of exponential curve (2^t) easein:function (t,b,c,d) {return (t==0)? B:c * MATH.POW (2,  Ten * (T/D-1)) + b;},easeout:function (t,b,c,d) {return (T==d)? B+c:c * (-math.pow (2, -10 * t/d) + 1) + B;},easeinout: function (t,b,c,d) {if (t==0) return b;if (T==d) return b+c;if ((T/=D/2) < 1) return C/2 * MATH.POW (2, Ten * (t-1)) + b Return C/2 * (-math.pow (2, -10 *--t) + 2) + B;}},CIRC: {///round curve easing (sqrt (1-t^2)) easein:function (t,b,c,d) {return-c * (Ma TH.SQRT (1-(t/=d) *t)-1) + b;},easeout:function (t,b,c,d) {return c * MATH.SQRT (1-(t=t/d-1) *t) + b;},easeinout:function (t,b,c,d) {if ( (T/=D/2) < 1) RETURN-C/2 * (MATH.SQRT (1-t*t)-1) + B;return C/2 * (MATH.SQRT (1-(t-=2) *t) + 1) + b;}},bounce: {// Exponential decay of rebound easing easein:function (t,b,c,d) {return c-jquery.tweens.bounce.easeout (d-t, 0, C, D) + b;},easeout:function (t,b,c,d {if (T/=d < (1/2.75)) {return c* (7.5625*t*t) + B;} else if (T < (2/2.75)) {return c* (7.5625* (t-=)) 1.5/2.75 +. () + b;}  else if (T < (2.5/2.75)) {return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + B;} else {return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b;}},easeinout:function (t,b,c,d) {if (T < D/2) return JQuery.Tweens.Bounce.easeIn (t*2, 0, C, D) *. 5 + b; else return JQuery.Tweens.Bounce.easeOut (t*2-d, 0, C, D) *. 5 + c*.5 + b;}}},/** * Description: Gets the style name in the style sheet and the corresponding style value, returned as an array of **/prope Rties:function (properties) {var//Property Object collection props = [],///property name collection names = [],len = 0;for (var prop in properties) {names[len]= Prop;props[names[Len]] =properties[prop];len++;} return {Names:names,props:props}},});/** * Description: jquery easing * Options: Parameters * Properties: Final style. Similar to {"width": "200px", "opacity": " 1 "}, * Callback: callback function **/jquery.fn.slowmove = function (options,properties,callback) {var defaultoptions={duration:1000 ,//Duration speed:2,//speed, default to 1,speed larger, faster tween: ' Linear ',///select Tween algorithm//easing mode: Linear no easing mode//easein (starting from 0)//easeout: ( Easing to 0)//easeinout (the first half is accelerated from 0, and the second half slows to 0). Ease: ' easeIn '};var slow = jquery.extend ({},defaultoptions,options | |  {}), current = $ (this);/** * Easing core function * Prop: Object **/function Move (prop,t,b,c,d) {var result;if (Slow.tween = = = "Linear") {result = Jquery.tweens[slow.tween] (t,b,c,d);} else {result = Jquery.tweens[slow.tween][slow.ease] (t,b,c,d);} if (T<=d) {T + = Slow.speed;current.css (Prop,result). addclass ("Slowmove"); SetTimeout (function () {Move (Prop,t,b,c, d);},10);} else {current.removeclass ("Slowmove"), if (typeof callback = = = "undefined") return False;callback ();}};/ * * Description: Get change value **/function getchange (end,begin) {if (typeof enD = = = "string") {var oper = end[0];if (IsNaN (oper)) {end = End.substr (End.indexof ("=") +1), if (oper = = = "+") {//per self-increment return PA Rseint (end);} else {//auto minus return-parseint (end);}} else {return parseint (end)-Begin;}} return parseint (end)-Begin;} Return This.each (function () {var styles = Jquery.properties (Properties), names = Styles.names,props = Styles.props;for ( var i=0,maxlen=names.length;i<maxlen;i++) {var//action Object prop = names[i],//Change value change,//start value begin = parseint ( CURRENT.CSS (prop)),//start time timer = 0;if (!isnan (begin)) {change = Getchange (Props[prop],begin); Move (Prop,timer,begin, (change,slow.duration);}});}; JQuery.fn.extend ({/** * Description: Whether to move the **/ismove:function () {return $ (this). Hasclass ("Slowmove");});}) (JQuery);

Test code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">




JQuery Tween easing algorithm