JQuery Tween easing algorithm and jquerytween easing Algorithm

JQuery Tween easing algorithm and jquerytween easing Algorithm

Reference: Javascript Tween algorithm and easing Effect

After a Simple plug-in is developed, we will refactor it later:

/*** Description: javascript easing * jQuery Tween algorithm: Source: http://www.robertpenner.com/easing/ * @ author: xuzengqiang * @ since: 11:17:51 * two more complex types of data are not included * Elastic: exponential decay of the sine curve; * Back: beyond the range of cubic easing (s + 1) * t ^ 3-s * t ^ 2); **/; (function ($) {jQuery. extend ({Tweens: {Linear: function (t, B, c, d) {// return c * t/d + B;}, Quad: {// quadratic 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) return c/2 * t + B; return-c/2 * (-- t) * (t-2)-1) + B ;}}, Cubic: {// cubic easing (t ^ 3) easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (t = t/D-1) * t + 1) + B ;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return c/2 * (t-= 2) * t + 2) + B ;}}, Quart: {// Level 4 easing (t ^ 4) easeIn: functi On (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return-c * (t = t/D-1) * t-1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (t-= 2) * t-2) + B ;}, Quint: {// fifth power easing (t ^ 5) easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (t = t/D-1) * t + 1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2)) <1) return c/2 * t + B; return c/2 * (t-= 2) * t + 2) + B ;}, Sine: {// slow motion of the 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: {// easing of the exponential curve (2 ^ t) easeIn: function (t, B, c, d) {return (t = 0 )? B: c * Math. pow (2, 10 * (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, 10 * (t-1) + B; return c/2 * (-Math. pow (2,-10 * -- t) + 2) + B ;}, Circ: {// easing of the circular curve (sqrt (1-t ^ 2) easeIn: function (t, B, c, d) {return-c * (Math. 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: {// rebound of exponential attenuation 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) + B;} else if (t <(2/2. 75) {return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + B;} e Lse 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 and corresponding style value in the style sheet, and returns the **/Properties: function (properties) in an array) {var // property object set p Rops = [], // set of attribute 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: parameter * 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. The default value is 1. The larger the speed, faster tw Een: 'linear ', // select the Tween algorithm // easing mode: Linear: no easing mode // easeIn (acceleration starts from 0) // easeOut: (slow to 0) // easeInOut (the first half starts to accelerate from 0, and the second half slows down to 0 ). usage: 'easein'}; var slow = jQuery. extend ({}, defaultOptions, options ||{}), current =$ (this);/*** slow 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. random] (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 the change value **/function getChange (end, begin) {if (typeof end = "string") {var begin = end [0]; if (isNaN (BEGIN) {end = end. substr (end. indexOf ("=") + 1); if (then = "+ ") {// Add return parseInt (end);} else {// auto-Subtract 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 // The object to operate on prop = names [I], // change the value, // 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 **/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">