tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果。
var position = { x: 100, y: 0 }
var tween = new TWEEN.Tween(position); tween.to({ x: 200 }, 1000);
tween.start();
Tween.js本身不会运行,你需要通过update方法明确的告诉它什么时候开始运行。
animate(); function animate() { requestAnimationFrame(animate); TWEEN.update(); }
这里使用无参数调用方式,update方法将明确当前时间,以便于获取上一次动画的执行时间。 你也可以为update方法明确一个时间:
```
TWEEN.update(100);
```
这个动作将会更新所有被激活的tweens,在1秒钟(例如1000ms)position.x 将变为200。
tween.onUpdate(function() { console.log(this.x); });
这个函数在每次tweens被更新时都被调用。
tweenA.chain(tweenB);
可以像下面这样制作一个无限循环的动画:
tweenA.chain(tweenB);tweenB.chain(tweenA);
tween.repeat(10); // repeats 10 times and stopstween.repeat(Infinity); // repeats forever
以下的方法定义在 TWEEN 的全局对象中,其中大多数方法你都用不上,除了update方法:
该方法用于所有被激活的tweens,如果time没有被指定,将使用当前时间。
这两个方法用于胡获取被激活的tweens数组的一个引用,或从数组中删除所有tweens。
用于向被激活的tweens中添加一个tween,或移除一个tween。 以上方法通常只是在内部使用,一般情况下你了解即可。
tween.js提供了一些可用的easing函数。可用函数有:Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 类型分为: In, Out 和 InOut.
easedElapsed = easing(k); for each property: newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;
下面是一个使用Math.floor来做easing效果的例子: ``` function tenStepEasing(k) {
return Math.floor(k * 10) / 10;
} ```
你可以在tween 这样使用它: tween.easing(tenStepEasing);
另外一个有用的特性是你可以在每次tween循环周期的指定时间点调用自定义的函数。
例如:假设你想使一些不能直接修改参数的对象执行动画,要访问该对象的参数只能通过setter方法,你可以通过update方法的回调函数来设置新的setter值。
var trickyObjTween = new TWEEN.Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB()
})
.to({ propertyA: 100, propertyB: 200 })
.onUpdate(function() {
this.setA( this.propertyA );
this.setB( this.propertyB );
});
或者如果你想确认tween动画开始后某个对象指定状态下的某个值,你可以通过start回调来获取它:
var tween = new TWEEN.Tween(obj)
.to({ x: 100 })
.onStart(function() {
this.x = 0;
});