用Tweenjs做动画
更新时间: 2021-04-29 12:42:04
Tween.js是一个小型的JavaScript库，可以从https://github.com/tweenjs/tween.js/下载。
这个库可以用来定义某个属性在两个值之间的过渡，自动计算出起始值和结束值之间的所有中间值。这个过程叫做tweening(补间)。例如，你可以用这个库将一个网格x轴上的位置，在10秒内从10递减到3：
var tween = new TWEEN.Tween({x:10})
.to({x:3},10000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(function(){
//update the mesh
})
1
2
3
4
5
6
2
3
4
5
6
在这个例子里我们创建了一个TWEEN.Tween对象。这个对象可以保证x属性在10000毫秒内，从10变化到3。通过Tween.js你还可以指定在指定时间内属性如何变化，是线性的、指数性的，还是其他任何可能的方式（完整列表可以参照https://github.com/tweenjs/tween.js/blob/master/examples/03_graphs.html）。属性值在指定时间内的变化成为easing(缓动)。在Tween.js中，你可以用easing()函数来配置缓动效果。
例子中的使用了粒子系统，这些例子的位置变化的动画是由Tween.js库创建出的中间值：
var posSrc = { pos: 1}
var tween = new TWEEN.Tween(posSrc).to({pos: 0}, 2000);
tween.easing(TWEEN.Easing.Bounce.InOut);
var tweenBack = new TWEEN.Tween(posSrc).to({pos: 1}, 2000);
tweenBack.easing(TWEEN.Easing.Bounce.InOut);
tweenBack.chain(tween);
tween.chain(tweenBack);
tween.start();
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
这段代码里我们创建了两个补间：tween和tweenBack。第一个补间定义的是竖向position如何从1过渡到0，第二个补间正好相反。通过chain()函数，我们可以让这两个补间首尾相连。这样在启动动画之后，程序就会在这两个补间间循环。最后我们调用tween.start()函数。
开启补间后，我们需要告知Three.js什么时候应该刷新已知的所有补间。为此可以调用Tween.update()函数：
function renderScene(){
stats.update();
trackballControls.update(clock.getDelta())
TWEEN.update();
if(group){
var positionArray = group.geometry.attributes['position']
var origPosition = group.geometry.origPosition
for (var i = 0; i < positionArray.count ; i++) {
var oldPosX = origPosition.getX(i);
var oldPosY = origPosition.getY(i);
var oldPosZ = origPosition.getZ(i);
positionArray.setX(i, oldPosX * posSrc.pos);
positionArray.setY(i, oldPosY * posSrc.pos);
positionArray.setZ(i, oldPosZ * posSrc.pos);
}
positionArray.needsUpdate = true;
}
requestAnimationFrame(renderScene)
renderer.render(scene, camera)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25