tweenjs动画库配合ThreeJS使用

tween.js是一款可生成平滑动画效果的js动画库。其官方网站为：http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html

tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。例如，假设你有一个对象 position ，它的坐标为 x 和 y ：

var position = { x: 100, y: 0 }

如果你想改变 x 的值从100到200，你只需要这样做：

// Create a tween for position first
var tween = new TWEEN.Tween(position);
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

到这里只是创建了tween对象，你需要激活它，让它开始动画：

// And set it to start
tween.start();

最后为了平滑动画效果，你需要在同一个循环动画中调用 TWEEN.update 方法。代码如下：

animate();
function animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}

这个动作将会更新所有被激活的tweens，在1秒钟（例如1000ms） position.x 将变为200。
你也可以使用 onUpdate 回调函数将结果打印到控制台上。

tween.onUpdate(function() {console.log(this.x);});

这个函数在每次tweens被更新时都被调用。它的出现频次依赖于很多因素-例如：依赖于你的电脑或设备的运行速度。
这里使用无参数调用方式， update 方法将明确当前时间，以便于获取上一次动画的执行时间。
你也可以为 update 方法明确一个时间：

TWEEN.update(100);

上面语句的意思是说： update 的时间=100毫秒。你可以使用这种方法来明确代码中所有随时间变化的函数。例如，动画已经开始，你想所有动画都同步进行，你的 animate 代码一改像这样：

var currentTime = player.currentTime;
TWEEN.update(currentTime);

控制tween动画

start和stop
Tween.start 和 Tween.stop 分别用于控制tween动画的开始和结束。
对于已经结束和没有开始的动画， Tween.stop 方法不起作用。 Tween.start 方法同样接收一个时间参数。如果你使用了该参数，tween动画将在延时该时间数后才开始动画。否则它将立刻开始动画。
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 方法用于控制动画之间的延时。

tween.delay(1000);tween.start();

我们可以通过easing函数给tweenjs设置运动规律

可用的easing函数：TWEEN.Easing

tween.js提供了一些可用的easing函数。可用函数有：Linear, Quadratic, Cubic, Quartic, Quintic,
Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 类型分为: In, Out 和 InOut.

1. Linear：线性匀速运动效果；
2. Quadratic：二次方的缓动（t^2）；
3. Cubic：三次方的缓动（t^3）；
4. Quartic：四次方的缓动（t^4）；
5. Quintic：五次方的缓动（t^5）；
6. Sinusoidal：正弦曲线的缓动（sin(t)）；
7. Exponential：指数曲线的缓动（2^t）；
8. Circular：圆形曲线的缓动（sqrt(1-t^2)）；
9. Elastic：指数衰减的正弦曲线缓动；
10. Back：超过范围的三次方缓动（(s+1)t^3 – st^2）；
11. Bounce：指数衰减的反弹缓动。
每个效果都分三个缓动方式，分别是：
easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。

使用自定义的Easing函数

你不但可以使用tween.js提供的easing函数，还可以自定义easing函数。但必须遵守下面的规则：

• 它必须接收一个参数。
• 它必须基于输入参数返回一个值。

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k){
    return Math.floor(k * 10) / 10;
}

你可以在tween 这样使用它：

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是你可以在每次tween循环周期的指定时间点调用自定义的函数。
如果你想确认tween动画开始后某个对象指定状态下的某个值，你可以通过 start 回调来获取它：

var tween = new TWEEN.Tween(obj)
.to({ x: 100 })
.onStart(function() {
this.x = 0;
});

onStart
tween开始动画前的回调函数。
onStop
tween结束动画后的回调函数。
onUpdate
在tween每次被更新后执行。
onComplete
在tween动画全部结束后执行。

DEMO