转自：https://www.cnblogs.com/chengguanhui/p/4664144.html
在讲tween类之前，不得不提的是贝塞尔曲线了。首先，贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多，例如PS中的钢笔工具，firework中的画笔等等。无论运用在哪里，它们的原理都是一样的。同样，在用js实现运动效果时，我们也可以利用贝塞尔曲线来实现不同的特效，而tween.js就是一个封装好的计算辅助算法。你可以通过连续输入多个值，然后利用贝塞尔曲线公式输出不同的值，最终形成了一条光滑的曲线。因为一条曲线上的值的不一样的，所以我们可以利用曲线的特性创造出不同的效果。
tween.js封装了多种效果的计算方法，我们可以利用里面的公式或者自己重写方法。以下是源代码，可根据自己的需要增删使用。
点击展开源代码下载地址：http://pan.baidu.com/s/1sjQdWQx
这个算法可以用在很多地方，如果滚动条的移动，物块的移动或各种渐变等等。
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的值。我把里面所有的方法列表如下：
| Linear | 线性匀速变化 | ||||
| Quad | easeIn
easeOut easeInOut |
二次方缓动 | Expo | easeIn
easeOut easeInOut |
指数曲线缓动 |
| Cubic | easeIn
easeOut easeInOut |
三次方缓动 | Circ | easeIneaseOut
easeInOut |
圆周曲线缓动 |
| Quart | easeIneaseOut
easeInOut |
四次方缓动 | Elastic | easeIneaseOut
easeInOut |
弹性伸缩缓动 |
| Quint | easeIn
easeOut easeInOut |
五次方缓动 | Back | easeIneaseOut
easeInOut |
返回缓动 |
| Sine | easeIneaseOut
easeInOut |
正弦曲线缓动 | Bounce | easeIneaseOut
easeInOut |
跳动缓动 |