详解tween.js中⽂使⽤指南
补间(动画)是⼀个概念，允许你以平滑的⽅式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运⾏时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。
例如，position对象拥有x和y两个坐标:
var position = { x: 100, y: 0 }
如果你想将x坐标的值从100变成200，你应该这么做：
// ⾸先为位置创建⼀个补间(tween)
var tween = new TWEEN.Tween(position);
// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
<({ x: 200 }, 1000);
⼀般来说这样还不够，tween 已经被创建了，但是它还没被激活(使⽤)，你需要这样启动：
// 启动
tween.start();
最后，想要成功的完成这种效果，你需要在主函数中调⽤TWEEN.update，如下使⽤：
animate();
function animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}
这样在更新每帧的时候都会运⾏补间动画；经过 1秒后 (1000 毫秒) position.x将会变成 200。
除⾮你在控制台中打印出 x 的值，不然你看不到它的变化。你可能想要使⽤ onUpdate 回调:
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();
}
在这种情况下，因为three.js渲染器将在渲染之前查看对象的位置，所以不需要使⽤明确的onUpdate回调。
你可能也注意到了⼀些不同的地⽅：tween.js 可以链式调⽤！每个tween函数都会返回tween实例，所以你可以重写下⾯的代码：
var tween = new TWEEN.Tween(position);
<({ x: 200 }, 1000);
tween.start();
改成这样：
var tween = new TWEEN.Tween(position)
.to({ x: 200 }, 1000)
.start();
在将会看到很多例⼦，所以熟悉它是很好的！⽐如这个例⼦。
tween.js的动画
Tween.js 不会⾃⾏运⾏。你需要显式的调⽤ update ⽅法来告诉它何时运⾏。推荐的⽅法是在主动画循环中执⾏这个操作。使⽤ requestAnimationFrame 调⽤此循环以获得最佳的图形性能。
⽐如之前这个例⼦：
animate();
function animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}
如果调⽤的时候不传⼊参数，update 将会判断当前时间点以确定⾃上次运⾏以来已经有多久。
当然你也可以传递⼀个明确的时间参数给 update
TWEEN.update(100);
意思是"更新时间 = 100 毫秒"。你可以使⽤它来确保代码中的所有时间相关函数都使⽤相同的时间值。例如，假设你有⼀个播放器，并希望同步运⾏补间。你的 animate 函数可能看起来像这样：
var currentTime = player.currentTime;
TWEEN.update(currentTime);
我们使⽤明确的时间值进⾏单元测试。你可以看下这个例⼦，看看我们如何⽤不同的值调⽤TWEEN.update() 来模拟时间传递。
控制⼀个补间
start 和 stop
到⽬前为⽌，我们已经了解了Tween.start⽅法，但是还有更多的⽅法来控制单个补间。也许最重要的⼀个是 star 对应的⽅法：停⽌。如果你想取消⼀个补间，只要调⽤这个⽅法通过⼀个单独的补间:
tween.stop();
停⽌⼀个从未开始或已经停⽌的补间没有任何效果。没有错误被抛出。
start ⽅法接受⼀个参数 time。如果你使⽤它，那么补间不会⽴即开始，直到特定时刻，否则会尽快启动（i.e 即在下次调⽤TWEEN.update）。
update
补间也有⼀个更新的⽅法---这实际上是由 TWEEN.update 调⽤的。你通常不需要直接调⽤它，除⾮你是个疯狂的hacker。
chain
当你顺序排列不同的补间时，事情会变得有趣，例如在上⼀个补间结束的时候⽴即启动另外⼀个补间。我们称这为链式补间，这使⽤ chain ⽅法去做。因此，为了使 tweenB 在 tewwnA 启动：
tweenA.chain(tweenB);
或者，对于⼀个⽆限的链式，设置tweenA⼀旦tweenB完成就开始：
tweenA.chain(tweenB);
tweenB.chain(tweenA);
关于⽆限的链式查看。
在其他情况下，您可能需要将多个补间链接到另⼀个补间，以使它们（链接的补间）同时开始动画：
tweenA.chain(tweenB,tweenC);
警告：调⽤ tweenA.chain（tweenB）实际上修改了tweenA，所以tweenA总是在tweenA完成时启动。 chain 的返回值只是tweenA，不是⼀个新的tween。
repeat
如果你想让⼀个补间永远重复，你可以链接到⾃⼰，但更好的⽅法是使⽤ repeat ⽅法。它接受⼀个参数，描述第⼀个补间完成后需要多少次重复
补间的总次数将是重复参数加上⼀个初始补间。查看。
yoyo
这个功能只有在独⾃使⽤ repeat 时才有效果。活跃时，补间的⾏为将像 yoyo ⼀样，i.e 它会从起始值和结束值之间跳出，⽽不是从头开始重复相同的顺序。
delay
更复杂的安排可能需要在实际开始运⾏之前延迟补间。你可以使⽤ delay ⽅法来做到这⼀点
tween.delay(1000);
tween.start();
将在调⽤启动⽅法后的1秒钟后开始执⾏。
控制所有补间
在 TWEEN 全局对象中可以到以下⽅法，除了 update 之外，通常不需要使⽤其中的⼤部分对象。
TWEEN.update(time)
我们已经讨论过这种⽅法。它⽤于更新所有活动的补间。
如果 time 不指定，它将使⽤当前时间。
⽤于获取对活动 tweens 数组的引⽤，并分别仅从⼀个调⽤中将它们全部从数组中删除
TWEEN.add(tween) ve(tween)
⽤于将补间添加到活动补间的列表，或者分别从列表中删除特定的补间。
这些⽅法通常只在内部使⽤，但是如果您想要做⼀些有趣的事情，则会被暴露。
控制补间组
使⽤ TWEEN 单例来管理补间可能会导致包含许多组件的⼤型应⽤程序出现问题。在这些情况下，您可能希望创建⾃⼰的更⼩的补间组。
⽰例：交叉组件冲突
如果使⽤ TWEEN 有多个组件，并且每个组件都想管理⾃⼰的⼀组补间，则可能发⽣冲突。如果⼀个组件调⽤TWEEN.update（）或 veAll（），则其他组件的补间也将被更新或删除。
创建你⾃⼰的补间组
为了解决这个问题，每个组件都可以创建⾃⼰的 TWEEN.Group 实例（这是全局的 TWEEN 对象在内部使⽤的）。实例化新的补间时，可以将这些组作为第⼆个可选参数传⼊：
var groupA = new TWEEN.Group();
var groupB = new TWEEN.Group();
var tweenA = new TWEEN.Tween({ x: 1 }, groupA)
.to({ x: 10 }, 100)
.start();
var tweenB = new TWEEN.Tween({ x: 1 }, groupB)
.to({ x: 10 }, 100)
.start();
var tweenC = new TWEEN.Tween({ x: 1 })
.to({ x: 10 }, 100)
.start();
groupA.update(); // 只更新tweenA
groupB.update(); // 只更新tweenB
TWEEN.update(); // 只更新tweenC
通过这种⽅式，每个组件都可以处理创建，更新和销毁⾃⼰的⼀组补间。
改变缓动功能
Tween.js 将以线性⽅式执⾏值之间的插值（即缓动），所以变化将与流逝的时间成正⽐。这是可以预见的，但在视觉上也是相当⽆趣的。不要担⼼ - 使⽤缓动⽅法可以轻松更改此⾏为。例如：
tween.easing(TWEEN.Easing.Quadratic.In);
这将导致缓慢地开始向最终值变化，向中间加速，然后迅速达到其最终值，相反，TWEEN.Easing.Quadratic.Out ⼀开始会加速，但随着值的接近最终放缓。
可⽤的缓动函数：TWEEN.Easing
tween.js提供了⼀些现有的缓动功能。它们按照它们表⽰的⽅程式进⾏分组：线性，⼆次，三次，四次，五次，正弦，指数，圆形，弹性，背部和弹跳，然后是缓动型：In，Out和InOut。
除⾮您已经熟悉这些概念，否则这些名称可能不会对您说什么，所以您可能需要查看⽰例，该⽰例将⼀个页⾯中的所有曲线进⾏图形化，以便⽐较它们如何看待⼀瞥。
这些功能是从 Robert Penner 慷慨地提供⼏年前作为⾃由软件提供的原始⽅程派⽣⽽来的，但是已经被优化以便与JavaScript 很好地发挥作⽤。
使⽤⾃定义缓动功能
您不仅可以使⽤任何现有的功能，还可以提供您⾃⼰的功能，只要遵循⼀些约定即可：
它必须接受⼀个参数：
k: 缓动过程，或我们的补间所处的时间有多长。允许的值在[0，1]的范围内。
它必须根据输⼊参数返回⼀个值。
不管要修改多少个属性，easing函数在每次更新时只调⽤⼀次。然后将结果与初始值以及这个值和最终值之间的差值（delta）⼀起使⽤，就像这个伪代码⼀样：
easedElapsed = easing(k);
for each property:
newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;
对于更注重性能表现的⼈来说：只有在补间上调⽤ start() 时才会计算增量值。
因此，让我们假设您想使⽤⼀个缓解值的⾃定义缓动函数，但是将 Math.floor 应⽤于输出，所以只返回整数部分，从⽽产⽣⼀种梯级输出:
function tenStepEasing(k) {
return Math.floor(k * 10) / 10;
}
你可以通过简单地调⽤它的缓动⽅法来使⽤它，就像我们之前看到的那样：
tween.easing(tenStepEasing);
查看⽰例，以查看这个动作（还有⼀些⽤于⽣成步进函数的元编程）。
如何启用javascript功能
回调函数
另⼀个强⼤的特性是能够在每个补间的⽣命周期的特定时间运⾏⾃⼰的功能。当更改属性不够时，通常需要这样做。
例如，假设你正在试图给⼀些不能直接访问属性的对象设置动画，但是需要你调⽤setter。您可以使⽤ update 回调来读取新的更新值，然后⼿动调⽤setters。所有的回调函数都将补间对象作为唯⼀的参数。
var trickyObjTween = new TWEEN.Tween({
propertyA: PropertyA(),
propertyB: PropertyB()
})
.to({ propertyA: 100, propertyB: 200 })
.onUpdate(function(object) {
object.setA( object.propertyA );
object.setB( object.propertyB );
});
或者想象⼀下，当⼀个补间开始时，你想播放声⾳。你可以使⽤ start 回调：
var tween = new TWEEN.Tween(obj)
.to({ x: 100 })
.onStart(function() {
sound.play();
});
每个回调的范围是补间对象--在这种情况下，是 obj。
onStart
在补间开始之前执⾏--i.e. 在计算之前。每个补间只能执⾏⼀次，i.e. 当通过 repeat() 重复补间时，它将不会运⾏。
同步到其他事件或触发您要在补间启动时发⽣的操作是⾮常好的。
补间对象作为第⼀个参数传⼊。
onStop
当通过 stop() 显式停⽌补间时执⾏，但在正常完成时并且在停⽌任何可能的链补间之前执⾏补间。
补间对象作为第⼀个参数传⼊。
onUpdate
每次补间更新时执⾏，实际更新后的值。
补间对象作为第⼀个参数传⼊。
onComplete
当补间正常完成（即不停⽌）时执⾏。
补间对象作为第⼀个参数传⼊。
⾼级补间
相对值
使⽤ to ⽅法时，也可以使⽤相对值。当tween启动时，Tween.js将读取当前属性值并应⽤相对值来出新的最终值。
但是你需要使⽤引号，否则这些值将被视为绝对的。我们来看⼀个例⼦:
// This will make the `x` property be 100, always
var absoluteTween = new TWEEN.Tween(absoluteObj).to({ x: 100 });
// Suppose absoluteObj.x is 0 now
absoluteTween.start(); // Makes x go to 100
// Suppose absoluteObj.x is -100 now
absoluteTween.start(); // Makes x go to 100
//

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。