tween.js
是一个小型的javaScript
库,其github
地址是https://github.com/tweenjs/tween.js 通过这个插件可以是用来定义,某个属性值之间的过渡,自动计算出起始值和结束值之间的所有中间值,这个过程叫做tweening
补间。
示例:
https://ithanmang.gitee.io/threejs/home/201808/20180829/05-animation-tween.html
引入库文件:
<script src="../../libs/tween/Tween.js"></script>
例如:将一个网格x
轴上的位置,在一秒内从10递减到3
let tween = new TWEEN.Tween({
x:10}).to({
x:3}, 1000);
tween.easing(TWEEN.Easing.Elastic.InOut);
tween.onUpdate(function () {
// update the mesh
});
上面的例子中创建了一个TWEEn.Tween
对象,这个对象可以保证x
属性在1000
毫秒之内,从10
变化到3
,通过Tween.js
还可以在指定时间内属性变化方式,是线性的还是指数型。
属性值在指定时间内的变化称为easing
缓动,在Tween.js
中可以使用easing()
函数来配置缓动效果。
示例中使用上一节的粒子系统的例子,实现的效果是,让所有的粒子来回向上和向下移动,通过下面这段代码可以实现
let position = {
y: 1};
let tween = new TWEEN.Tween(position).to({
y:0}, 5000);
tween.easing(TWEEN.Easing.Sinusoidal.InOut);
let tweenBcak = new TWEEN.Tween(position).to({
y:1}, 5000);
tweenBcak.easing(TWEEN.Easing.Sinusoidal.InOut);
tween.chain(tweenBcak);
tweenBcak.chain(tween);
// 获取顶点个数
let count = geometry.getAttribute('position').count;
let onUpdate = function () {
let y = this.y;
let vertexs = [];
for (let i = 0; i < count; i++ ) {
vertexs.push(geometry.localPosition[i * 3] );
vertexs.push(((geometry.localPosition[i * 3 + 1] + 3.22544) * y) - 3.22544);
vertexs.push(geometry.localPosition[i * 3 + 2]);
}
geometry.getAttribute('position').array = new Float32Array(vertexs);
geometry.getAttribute('position').needsUpdate = true;
};
tween.onUpdate(onUpdate);
tweenBcak.onUpdate(onUpdate);
tween.start()