例如,假设你正在试图给一些不能直接访问属性的对象设置动画,但是需要你调用setter。 您可以使用 update 回调来读取新的更新值,然后手动调用setters。 所有的回调函数都将补间对象作为唯一的参数。
var trickyObjTween = new TWEEN.Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB()
})
.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
// In contrast...
// This will make the `x` property be 100 units more,
// relative to the actual value when it starts
var relativeTween = new TWEEN.Tween(relativeObj).to({ x: "+100" });
// Suppose relativeObj.x is 0 now
relativeTween.start(); // Makes x go to 0 +100 = 100
// Suppose relativeObj.x is -100 now
relativeTween.start(); // Makes x go to -100 +100 = 0
查看09_relative_values 示例。
补间值的数组
除了补间为绝对值或相对值之外,还可以让Tween.js跨一系列值更改属性。 要做到这一点,你只需要指定一个数组的值,而不是一个属性的单个值。 例如:
