JQuery Tween easing Algorithm

JQuery Tween 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: algorithm source: www.bkjia.com * @ 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: {// cubic easing (t ^ 4) 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 ;}, 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 * T + B; return c/2 * (t-= 2) * t + 2) + B ;}}, Sine: {// 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;} 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 and corresponding style value in the style sheet, and returns the **/Properties: function (properties) in an array) {var // property object set props = [], // property name set 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 tween: '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. rows] (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 (else = +) {// return parseInt (end) for each auto-increment );} 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
 
  
 
Test code:
  
 
  
 
  

  
  
  <Script type = text/javascript src = jquery-1.9.1.js? Version = 20150123> </script> <script type = text/javascript src = jQuery. tween. js? Version = 20150123> </script>
  
 

   
  
1
   
  
2
   
  
3
   
  
4
   
  
5
  
 
  Mobile
  Test