tweenjs缓动算法使用小实例

这里的tweenjs不是依托于createjs的tewwnjs，而是一系列缓动算法集合。因为本身是算法，可以用在各个业务场景中，这也正是总结学习它的价值所在。tweenjs代码详情：

 /*
  * Tween.js
  * t: current time（当前时间）；
  * b: beginning value（初始值）；
  * c: change in value（变化量）；
  * d: duration（持续时间）。
  * you can visit 'http://easings.net/zh-cn' to get effect
 */
 var Tween = {
     Linear: function(t, b, c, d) {
         return c * t / d + b;
     },
     Quad: {
         easeIn: function(t, b, c, d) {
             return c * (t /= d) * t + b;
         },
         easeOut: function(t, b, c, d) {
             return -c *(t /= d)*(t-) + b;
         },
         easeInOut: function(t, b, c, d) {
             if ((t /= d / ) < ) return c /  * t * t + b;
             return -c /  * ((--t) * (t-) - ) + b;
         }
     },
     Cubic: {
         easeIn: function(t, b, c, d) {
             return c * (t /= d) * t * t + b;
         },
         easeOut: function(t, b, c, d) {
             return c * ((t = t/d - ) * t * t + ) + b;
         },
         easeInOut: function(t, b, c, d) {
             if ((t /= d / ) < ) return c /  * t * t*t + b;
             return c / *((t -= ) * t * t + ) + b;
         }
     },
     Quart: {
         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 - ) * t * t*t - ) + b;
         },
         easeInOut: function(t, b, c, d) {
             if ((t /= d / ) < ) return c /  * t * t * t * t + b;
             return -c /  * ((t -= ) * t * t*t - ) + b;
         }
     },
     Quint: {
         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 - ) * t * t * t * t + ) + b;
         },
         easeInOut: function(t, b, c, d) {
             if ((t /= d / ) < ) return c /  * t * t * t * t * t + b;
             return c / *((t -= ) * t * t * t * t + ) + b;
         }
     },
     Sine: {
         easeIn: function(t, b, c, d) {
             return -c * Math.cos(t/d * (Math.PI/)) + c + b;
         },
         easeOut: function(t, b, c, d) {
             return c * Math.sin(t/d * (Math.PI/)) + b;
         },
         easeInOut: function(t, b, c, d) {
             return -c /  * (Math.cos(Math.PI * t/d) - ) + b;
         }
     },
     Expo: {
         easeIn: function(t, b, c, d) {
             return (t==) ? b : c * Math.pow(,  * (t/d - )) + b;
         },
         easeOut: function(t, b, c, d) {
             return (t==d) ? b + c : c * (-Math.pow(, - * t/d) + ) + b;
         },
         easeInOut: function(t, b, c, d) {
             if (t==) return b;
             if (t==d) return b+c;
             if ((t /= d / ) < ) return c /  * Math.pow(,  * (t - )) + b;
             return c /  * (-Math.pow(, - * --t) + ) + b;
         }
     },
     Circ: {
         easeIn: function(t, b, c, d) {
             return -c * (Math.sqrt( - (t /= d) * t) - ) + b;
         },
         easeOut: function(t, b, c, d) {
             return c * Math.sqrt( - (t = t/d - ) * t) + b;
         },
         easeInOut: function(t, b, c, d) {
             if ((t /= d / ) < ) return -c /  * (Math.sqrt( - t * t) - ) + b;
             return c /  * (Math.sqrt( - (t -= ) * t) + ) + b;
         }
     },
     Elastic: {
         easeIn: function(t, b, c, d, a, p) {
             var s;
             if (t==) return b;
             if ((t /= d) == ) return b + c;
             if (typeof p == "undefined") p = d * .;
             if (!a || a < Math.abs(c)) {
                 s = p / ;
                 a = c;
             } else {
                 s = p / ( * Math.PI) * Math.asin(c / a);
             }
             return -(a * Math.pow(,  * (t -= )) * Math.sin((t * d - s) * ( * Math.PI) / p)) + b;
         },
         easeOut: function(t, b, c, d, a, p) {
             var s;
             if (t==) return b;
             if ((t /= d) == ) return b + c;
             if (typeof p == "undefined") p = d * .;
             if (!a || a < Math.abs(c)) {
                 a = c;
                 s = p / ;
             } else {
                 s = p/(*Math.PI) * Math.asin(c/a);
             }
             return (a * Math.pow(, - * t) * Math.sin((t * d - s) * ( * Math.PI) / p) + c + b);
         },
         easeInOut: function(t, b, c, d, a, p) {
             var s;
             if (t==) return b;
             if ((t /= d / ) == ) return b+c;
             if (typeof p == "undefined") p = d * (. * 1.5);
             if (!a || a < Math.abs(c)) {
                 a = c;
                 s = p / ;
             } else {
                 s = p / (  *Math.PI) * Math.asin(c / a);
             }
             if (t < ) return -. * (a * Math.pow(, * (t -= )) * Math.sin((t * d - s) * ( * Math.PI) / p)) + b;
             return a * Math.pow(, - * (t -= )) * Math.sin((t * d - s) * ( * Math.PI) / p ) * . + c + b;
         }
     },
     Back: {
         easeIn: function(t, b, c, d, s) {
             if (typeof s == "undefined") s = 1.70158;
             return c * (t /= d) * t * ((s + ) * t - s) + b;
         },
         easeOut: function(t, b, c, d, s) {
             if (typeof s == "undefined") s = 1.70158;
             return c * ((t = t/d - ) * t * ((s + ) * t + s) + ) + b;
         },
         easeInOut: function(t, b, c, d, s) {
             if (typeof s == "undefined") s = 1.70158;
             if ((t /= d / ) < ) return c /  * (t * t * (((s *= (1.525)) + ) * t - s)) + b;
             return c / *((t -= ) * t * (((s *= (1.525)) + ) * t + s) + ) + b;
         }
     },
     Bounce: {
         easeIn: function(t, b, c, d) {
             return c - Tween.Bounce.easeOut(d-t, , c, d) + b;
         },
         easeOut: function(t, b, c, d) {
             if ((t /= d) < ( / 2.75)) {
                 return c * (7.5625 * t * t) + b;
             } else if (t < ( / 2.75)) {
                 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .) + b;
             } else if (t < (2.5 / 2.75)) {
                 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .) + b;
             } else {
                 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .) + b;
             }
         },
         easeInOut: function(t, b, c, d) {
             if (t < d / ) {
                 return Tween.Bounce.easeIn(t * , , c, d) * . + b;
             } else {
                 return Tween.Bounce.easeOut(t *  - d, , c, d) * . + c * . + b;
             }
         }
     }
 }
 Math.tween = Tween;

具体每种算法的操作实例，可以看大神张鑫旭的博客实例：http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html

当然，以上这些算法仅仅是一个状态，需要配合时间上的变化，才能实现缓动，这里使用的是requestAnimationFrame，具体代码好吧，也是拿来主义

 (function() {
     var lastTime = ;
     var vendors = ['ms', 'moz', 'webkit', 'o'];
     for(var x = ; x < vendors.length && !window.requestAnimationFrame; ++x) {
         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                    || window[vendors[x]+'CancelRequestAnimationFrame'];
     }

     if (!window.requestAnimationFrame)
         window.requestAnimationFrame = function(callback, element) {
             var currTime = new Date().getTime();
             var timeToCall = Math.max(,  - (currTime - lastTime));
             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
               timeToCall);
             lastTime = currTime + timeToCall;
             return id;
         };

     if (!window.cancelAnimationFrame)
         window.cancelAnimationFrame = function(id) {
             clearTimeout(id);
         };
 }());

最后是简单的实例应用，很简单，

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>使用tweenjs</title>
     <style type="text/css">
     div {
         width: 100px;
         height: 100px;
         border: 1px solid red;
         text-align: center;
         line-height: 100px;
         position: absolute;
     }
     </style>
 </head>

 <body>
     <div id="test">
         这是测试
     </div>
     <script type="text/javascript" src="RequestAnimationFrame.js"></script>
     <script type="text/javascript" src="tween.js"></script>
     <script type="text/javascript">
         var DOM=document.getElementById("test");
     var t = ,//开始时间
         b = ,//开始位置
         c = ,//变化值
         d = ;//持续时间
     var step = function() {
         var value = Tween.Bounce.easeOut(t, b, c, d);
         DOM.style.left = value + 'px';

         t++;
         if (t <= d) {
             // 继续运动
             requestAnimationFrame(step);
         } else {
             // 动画结束
         }
     };
     step();
     </script>
 </body>

 </html>

具体使用中，需要参数以及控制好结束条件即可。