tween 缓动动画

在讲tween类之前，不得不提的是贝塞尔曲线了。首先，贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多，例如PS中的钢笔工具，firework中的画笔等等。无论运用在哪里，它们的原理都是一样的。同样，在用js实现运动效果时，我们也可以利用贝塞尔曲线来实现不同的特效，而tween.js就是一个封装好的计算辅助算法。你可以通过连续输入多个值，然后利用贝塞尔曲线公式输出不同的值，最终形成了一条光滑的曲线。因为一条曲线上的值的不一样的，所以我们可以利用曲线的特性创造出不同的效果。

　　tween.js封装了多种效果的计算方法，我们可以利用里面的公式或者自己重写方法。以下是源代码，可根据自己的需要增删使用。　

  1 // Tween类
  2 var Tween = {
  3     Linear: function(t,b,c,d){ return c*t/d + b; },
  4     Quad: {
  5         easeIn: function(t,b,c,d){
  6             return c*(t/=d)*t + b;
  7         },
  8         easeOut: function(t,b,c,d){
  9             return -c *(t/=d)*(t-2) + b;
 10         },
 11         easeInOut: function(t,b,c,d){
 12             if ((t/=d/2) < 1) return c/2*t*t + b;
 13             return -c/2 * ((--t)*(t-2) - 1) + b;
 14         }
 15     },
 16     Cubic: {
 17         easeIn: function(t,b,c,d){
 18             return c*(t/=d)*t*t + b;
 19         },
 20         easeOut: function(t,b,c,d){
 21             return c*((t=t/d-1)*t*t + 1) + b;
 22         },
 23         easeInOut: function(t,b,c,d){
 24             if ((t/=d/2) < 1) return c/2*t*t*t + b;
 25             return c/2*((t-=2)*t*t + 2) + b;
 26         }
 27     },
 28     Quart: {
 29         easeIn: function(t,b,c,d){
 30             return c*(t/=d)*t*t*t + b;
 31         },
 32         easeOut: function(t,b,c,d){
 33             return -c * ((t=t/d-1)*t*t*t - 1) + b;
 34         },
 35         easeInOut: function(t,b,c,d){
 36             if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 37             return -c/2 * ((t-=2)*t*t*t - 2) + b;
 38         }
 39     },
 40     Quint: {
 41         easeIn: function(t,b,c,d){
 42             return c*(t/=d)*t*t*t*t + b;
 43         },
 44         easeOut: function(t,b,c,d){
 45             return c*((t=t/d-1)*t*t*t*t + 1) + b;
 46         },
 47         easeInOut: function(t,b,c,d){
 48             if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 49             return c/2*((t-=2)*t*t*t*t + 2) + b;
 50         }
 51     },
 52     Sine: {
 53         easeIn: function(t,b,c,d){
 54             return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 55         },
 56         easeOut: function(t,b,c,d){
 57             return c * Math.sin(t/d * (Math.PI/2)) + b;
 58         },
 59         easeInOut: function(t,b,c,d){
 60             return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 61         }
 62     },
 63     Expo: {
 64         easeIn: function(t,b,c,d){
 65             return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 66         },
 67         easeOut: function(t,b,c,d){
 68             return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 69         },
 70         easeInOut: function(t,b,c,d){
 71             if (t==0) return b;
 72             if (t==d) return b+c;
 73             if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 74             return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 75         }
 76     },
 77     Circ: {
 78         easeIn: function(t,b,c,d){
 79             return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 80         },
 81         easeOut: function(t,b,c,d){
 82             return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 83         },
 84         easeInOut: function(t,b,c,d){
 85             if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 86             return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 87         }
 88     },
 89     Elastic: {
 90         easeIn: function(t,b,c,d,a,p){
 91             if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 92             if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
 93             else var s = p/(2*Math.PI) * Math.asin (c/a);
 94             return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 95         },
 96         easeOut: function(t,b,c,d,a,p){
 97             if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 98             if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
 99             else var s = p/(2*Math.PI) * Math.asin (c/a);
100             return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
101         },
102         easeInOut: function(t,b,c,d,a,p){
103             if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
104             if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
105             else var s = p/(2*Math.PI) * Math.asin (c/a);
106             if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
107             return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
108         }
109     },
110     Back: {
111         easeIn: function(t,b,c,d,s){
112             if (s == undefined) s = 1.70158;
113             return c*(t/=d)*t*((s+1)*t - s) + b;
114         },
115         easeOut: function(t,b,c,d,s){
116             if (s == undefined) s = 1.70158;
117             return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
118         },
119         easeInOut: function(t,b,c,d,s){
120             if (s == undefined) s = 1.70158;
121             if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
122             return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
123         }
124     },
125     Bounce: {
126         easeIn: function(t,b,c,d){
127             return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
128         },
129         easeOut: function(t,b,c,d){
130             if ((t/=d) < (1/2.75)) {
131                 return c*(7.5625*t*t) + b;
132             } else if (t < (2/2.75)) {
133                 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
134             } else if (t < (2.5/2.75)) {
135                 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
136             } else {
137                 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
138             }
139         },
140         easeInOut: function(t,b,c,d){
141             if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
142             else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
143         }
144     }
145 };

　　下载地址：http://pan.baidu.com/s/1sjQdWQx

　　这个算法可以用在很多地方，如果滚动条的移动，物块的移动或各种渐变等等。今天我就用物块移动demo的例子来讲讲这个辅助计算类怎么用吧，首先我们得创建一个定时器或者函数，一下是我常用的方法。

 1             //利用tween.js返回特殊值，生成不同效果
 2             function tweenFn(obj,attr,value,endFn){
 3                 var timer = null;
 4                 var start = 0;        //开始位置
 5 //                var value = value        //改变值大小
 6                 var t = 0;                //从0步开始
 7                 var endT = 30;            //结束步数
 8                 clearInterval(timer);
 9                 timer = setInterval(function(){
10                             t++;
11                             if(t>endT){
12                                 clearInterval(timer);
13                                 endFn && endFn();//回调函数存在则返回
14                                 return;
15                             };
16                         obj.style[attr] = Tween.Cubic.easeInOut(t,start,value,endT)+"px";
17                 },30);
18             }

　　函数说明：obj，绑定执行的对象；

　　　　　　　attr，改变的属性值；

　　　　　　　value，改变值的大小；

　　　　　　　endFn，执行完毕的回调函数，没有可不写；

　　　　　　　start，属性初始值；

　　　　　　　t,endT，执行的步数，可理解为分多少次执行完。

　　　　　　函数第十六行中Tween.Cubic.easeInOut(...)为调用tween.js中的方法，可根据实际需求修改Cubic或easeInOut的值。我把里面所有的方法列表如下：

原文地址：https://www.cnblogs.com/jacksplwxy/p/9973718.html