JavaScript in-between原理与应用

Tween.js

Tween.js是用来在JavaScript当中实现tween的一个工具库。我们接下来讲解它的实现。在实际应用中，我们一般自己编写自己的Tween类，或者复制并修改开源工具库中的Tween类，因为自己编写的总是最符合自己业务需求的。大部分Tween工具库包含了很多你用不到的东西，在后面我会提到。

为了使用Tween.js，你需要先有一个待变化的对象。在下面的例子里，我们将对象foo初始化为{a: 1}（初始状态），并要求它在3000毫秒后变成{a: 4}（目标状态）。变化过程采用线性变化，即每个时间点的变化速率相等。

 1 var foo = {a: 1}, /*初始状态*/
 2   tween = new TWEEN.Tween(foo)
 3     .to({a: 4} /*目标状态*/, 3000 /*变化时间*/)
 4     .start();
 5 
 6   (function animate() {
 7     if ( foo.a < 4 ) {
 8       requestAnimationFrame(animate);
 9     }
10     TWEEN.update();
11     console.log(foo);
12   })();

如果你查看Chrome Inspector（或者Firefox下的Firebug插件），你将会看到控制台中输出了下面的数据

Object {a: 1.0001740000443533} 
Object {a: 1.0924470000900328} 
Object {a: 1.1527340000029653} 
Object {a: 1.1701550000580028} 
Object {a: 1.185736000072211}
... ...

喘口气

回过头来，我们来稍微解释一下上面的代码段。首先我们创建一个foo对象的tween

1 var foo = {a: 1}, /*初始状态*/
2   tween = new TWEEN.Tween(foo);

接下来，我们需要将确认foo对象的目标状态，在这里是{a: 4}，并且要求它正好在3000毫秒后到达目标状态。

1 tween.to({a: 4} /*目标状态*/, 3000 /*变化时间*/);

最后，我们需要激活这个tween，代表开始变化。调用tween.start()的时间就是开始变化的时间时间戳，除非你调用了tween.delay()方法。你还可以给tween.start(time)传入一个额外参数time，直接指定开始变化的时间戳。我们可以通过源码验证这点

1 _startTime = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() );
2 _startTime += _delayTime;

值得注意的是，在没有delay和指定time参数的情况下，Tween.js将优先使用window.performance.now()获取当前的时间戳，这样的时间戳是高精度时间戳（精度为10μs）。这是HTML5当中的新增的DOMHighResTimeStamp API。

询问进度

我们通过animate函数来轮询foo对象目前的状态。采用requestAnimationFrame进行异步调用，效率会更高。你也可以选择用setTimeout，jQuery就是这样做的。

在询问的时候，你首先需要调用TWEEN.update()更新所有的tween。

1 (function animate() {
2   if ( foo.a < 4 ) {
3     requestAnimationFrame(animate);
4   }
5   TWEEN.update();
6   console.log(foo);
7 })();

精髓

使用in-between的精髓就在于，它将属性的变化和询问分离。如果你熟悉MVC，属性的变化就好像是MVC里面的Model，而询问就好像是Controller，最后我们输出到控制台（Console）就好像是View。

“历史总是惊人地相似”

分离带来的好处是什么呢？它使得我们可以统一管理所有页面上的Tween，而不用关心它们究竟用于什么途径。接下来，我们通过实践来证明这一点。

git clone git@github.com:sole/tween.js.git
cd tween.js

 1 var tween = new TWEEN.Tween(elem)
 2   .to({ x: endValue }, 4000)
 3   .delay(Math.random() * 1000)
 4   .onUpdate(updateCallback)
 5   .easing(TWEEN.Easing.Back.Out)
 6   .start();
 7 
 8 var tweenBack = new TWEEN.Tween(elem, false)
 9   .to({ x: startValue}, 4000)
10   .delay(Math.random() * 1000)
11   .onUpdate(updateCallback)
12   .easing(TWEEN.Easing.Elastic.InOut);
13 
14 tween.chain(tweenBack);
15 tweenBack.chain(tween);

1 jQuery.fx = Tween.prototype.init;

 1 jQuery.map( props, createTween, animation );
 2 
 3 function createTween( value, prop, animation ) {
 4   var tween,
 5     collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),
 6     index = 0,
 7     length = collection.length;
 8   for ( ; index < length; index++ ) {
 9     if ( (tween = collection[ index ].call( animation, prop, value )) ) {
10       // we're done with this property
11       return tween;
12     }
13   }
14 }

1 for ( ; index < length ; index++ ) {
2   animation.tweens[ index ].run( percent /*当前动画的时间进度*/);
3 }

1 jQuery.fx.start = function() {
2   if ( !timerId ) {
3     timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
4   }
5 };