详解tween.js 中文使用指南

补间(动画)是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。

例如，position对象拥有x和y两个坐标:

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

如果你想将x坐标的值从100变成200，你应该这么做：

// 首先为位置创建一个补间(tween)var tween = new TWEEN.Tween(position);// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置tween.to({ x: 200 }, 1000);

一般来说这样还不够，tween 已经被创建了，但是它还没被激活(使用)，你需要这样启动：

// 启动tween.start();

最后，想要成功的完成这种效果，你需要在主函数中调用TWEEN.update，如下使用：

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

这样在更新每帧的时候都会运行补间动画；经过 1秒后 (1000 毫秒) position.x将会变成 200。

除非你在控制台中打印出 x 的值，不然你看不到它的变化。你可能想要使用 onUpdate 回调:

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

tips:你可能在这里获取不到 object.x ,具体的见我提的这个 issue

这个函数将会在动画每次更新的时候被调用；这种情况发生的频率取决于很多因素 - 例如，计算机或设备的速度有多快（以及如何繁忙）。

到目前为止，我们只使用补间动画向控制台输出值，但是您可以将它与 three.js 对象结合：

var tween = new TWEEN.Tween(cube.position) .to({ x: 100, y: 100, z: 100 }, 10000) .start();animate();function animate() { requestAnimationFrame(animate); TWEEN.update(); threeRenderer.render(scene, camera);}

在这种情况下，因为three.js渲染器将在渲染之前查看对象的位置，所以不需要使用明确的onUpdate回调。

你可能也注意到了一些不同的地方：tween.js 可以链式调用！ 每个tween函数都会返回tween实例，所以你可以重写下面的代码：

var tween = new TWEEN.Tween(position);tween.to({ x: 200 }, 1000);tween.start();

改成这样：

var tween = new TWEEN.Tween(position) .to({ x: 200 }, 1000) .start();

在将会看到很多例子，所以熟悉它是很好的！比如04-simplest 这个例子。

tween.js的动画

Tween.js 不会自行运行。你需要显式的调用 update 方法来告诉它何时运行。推荐的方法是在主动画循环中执行这个操作。使用 requestAnimationFrame 调用此循环以获得最佳的图形性能。

比如之前这个例子：