TWEEN

需要让数值属性在一定范围内做插值的动画可以使用 TWEEN，名字来自动画技术 in-betweening（补间动画）：你指定关键帧，而计算机则在关键帧之间插补出其他帧。

引擎内置了tween.js动画库，通过TWEEN可以很容易地实现某个属性在两个值之间进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。

补间是一个允许您以一种平滑的方式更改对象属性值的概念。你只需要告诉它你想改变哪些属性，当补间结束运行时，它们应该是哪些最终值，并且可以定义发生这个过程需要多长时间，tween引擎会负责寻找从起点到终点的中间值。

TWEEN 比 AnimationMixer 更适合于事先不知道最终数值的动画。例如，插值动态选择的相机变焦值最好用 TWEEN 节点完成，用 AnimationMixer 节点做同样的事情会很困难。

例如，你可以用这个库将一个网格x轴上的位置，在10秒内从10递减到3：

const TWEEN = VT.TWEEN;

var tween = new TWEEN.Tween({x:10})
    .to({x:3},10000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(function(){
    //update the mesh
    })

在这个例子里我们创建了一个TWEEN.Tween对象。这个对象可以保证x属性在10000毫秒内，从10变化到3。

通过Tween你还可以指定在指定时间内属性如何变化，是线性的、指数性的，还是其他任何可能的方式（完整列表可以参照https://github.com/tweenjs/tween.js/blob/master/examples/03_graphs.html），属性值在指定时间内的变化成为easing(缓动)，可以用easing()函数来配置缓动效果。

全局方法

TWEEN.getAll

获取所有补间

TWEEN.removeAll

删除所有补间

实例方法

start

开始一个补间

tween.start();

stop

取消一个补间

tween.stop();

easing

缓动类型, TWEEN.Easing

tween.easing(TWEEN.Easing.Linear.None)

缓动类型

chain

当你将不同的补间按顺序排列时，事情会变得更有趣,例如，设置一个补间在前一个补间完成后开始。我们称之为链式补间，这是用chain方法完成的。因此，让补间B在补间A结束后开始:

tweenA.chain(tweenB)

repeat

如果你想让补间永远重复，你可以把使用chain把它自己连起来，但更好的方法是使用repeat方法。它接受一个参数，用于描述第一个补间完成后需要重复的次数：

tween.repeat(10) // 第一次动画结束后重复10次
tween.repeat(Infinity) // 永远重复

yoyo

此功能只有在和repeat使用时才有效。当激活时，补间的行为就像溜溜球，也就是说，它将从开始值和结束值来回弹跳，而不是一开始就重复相同的顺序：

tween.yoyo(false);
tween.yoyo(true);

delay

补间开始运行之前延迟它，可以使用delay方法

tween.delay(1000)
tween.start()

repeatDelay

通常情况下，delay时间是在补间重复之间，但是如果为repeatDelay函数提供了一个值，那么这个值将决定补间重复之间经过的总时间。

tween.delay(1000)
tween.repeatDelay(500)
tween.start()

回调方法

onStart

在补间动画开始之前执行，在delay方法指定的延迟时间之后执行。这将在每个补间中只执行一次，也就是说，当通过repeat()重复补间时，它将不会运行。

onStop

当补间通过stop()显式停止时执行，但不是在补间正常完成时，以及在停止任何可能的链式补间之前执行。

补间对象作为第一个参数传入

onUpdate

在值实际更新之后，每次更新补间时执行。

补间对象作为第一个参数传入。

onComplete

当补间正常完成时执行(即未停止)。

补间对象作为第一个参数传入

onRepeat

当一个补间刚刚完成一次重复并将开始另一次重复时执行。

补间对象作为第一个参数传入