Tween.js线性动画效果
1.简介
Tween.js是一款可生成平滑动画效果的js动画库，和jQuery.easing.js很多类似之处，主要的方法名也一致。
Tween.js的github地址：https://github.com/tweenjs/tween.js
Tween.js文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide_zh-CN.md
Tween.js线性动画表：https://tweenjs.github.io/tween.js/examples/03_graphs.html
2.Tween.js动画
Tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。
例子：
var tween = new TWEEN.Tween({x: 50, y: 0})
.to({x: 400}, 2000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(function (object) {
output.innerHTML = 'x == ' + Math.round(object.x);
var transform = 'translateX(' + object.x + 'px)';
output.style.webkitTransform = transform;
output.style.transform = transform;
})
.start();
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time); //Tween.js本身不会运行，你需要通过update方法明确的告诉它什么时候开始运行。
}3.控制动画
start 和 stop
开始和停止动画
update
通过TWEEN.update方法来执行动画的更新。
chain
链接一个动画，如果你想制作多个连续的动画，例如：一个动画在另一个动画结束后开始。可以通过chain方法来使实现。如下的代码，tweenB 在 tweenA 之后开始动画:
tweenA.chain(tweenB);
可以像下面这样制作一个无限循环的动画：
tweenA.chain(tweenB); tweenB.chain(tweenA);
repeat
重复一个动画，如果想让一个动画链接到自己可以使用chain来实现，但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次的参数：
tween.repeat(10); // repeats 10 times and stops tween.repeat(Infinity); // repeats forever
yoyo
这个函数只在你使用repeat方法是起作用。当它被激活时，tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。
delay
delay方法用于控制动画之间的延时。
4.线性动画TWEEN.Easing
主要包含了：
Linear：线性匀速运动效果；
Quadratic：二次方的缓动（t^2）；
Cubic：三次方的缓动（t^3）；
Quartic：四次方的缓动（t^4）；
Quintic：五次方的缓动（t^5）；
Sinusoidal：正弦曲线的缓动（sin(t)）；
Exponential：指数曲线的缓动（2^t）；
Circular：圆形曲线的缓动（sqrt(1-t^2)）；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动（(s+1)*t^3 – s*t^2）；
Bounce：指数衰减的反弹缓动。
每个效果都分三个缓动方式，分别是：
easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。
详细查看上面的线性动画表。
5.回调函数
onStart
tween开始动画前的回调函数。
onStop
tween结束动画后的回调函数。
onUpdate
在tween每次被更新后执行。
onComplete
在tween动画全部结束后执行。