例如,假设你正在试图给一些不能直接访问属性的对象设置动画,但是需要你调用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跨一系列值更改属性。 要做到这一点,你只需要指定一个数组的值,而不是一个属性的单个值。 例如: