详解tween.js 中文使用指南(2)

比如之前这个例子:

animate();

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

如果调用的时候不传入参数,update 将会判断当前时间点以确定自上次运行以来已经有多久。

当然你也可以传递一个明确的时间参数给 update

TWEEN.update(100);

意思是"更新时间 = 100 毫秒"。你可以使用它来确保代码中的所有时间相关函数都使用相同的时间值。例如,假设你有一个播放器,并希望同步运行补间。 你的 animate 函数可能看起来像这样:

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

我们使用明确的时间值进行单元测试。你可以看下tests.js 这个例子,看看我们如何用不同的值调用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);

关于无限的链式查看Hello world 。

在其他情况下,您可能需要将多个补间链接到另一个补间,以使它们(链接的补间)同时开始动画:

tweenA.chain(tweenB,tweenC);

警告:调用 tweenA.chain(tweenB) 实际上修改了tweenA,所以tweenA总是在tweenA完成时启动。 chain 的返回值只是tweenA,不是一个新的tween。

repeat

如果你想让一个补间永远重复,你可以链接到自己,但更好的方法是使用 repeat 方法。 它接受一个参数,描述第一个补间完成后需要多少次重复

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/198.html